Correct labeling of submenus

For accessibility, what is the best/correct aria-label of a submenu. Should there be a general label followed by the purpose of the menu? Or should the aria-label be the same for all submenus?

Example: The image shows an example menu for book settings. When the user focus the menu trigger button. should the aria-label be: "submenu book settings" or just "submenu".

Open for suggestion!

It depends if you are using aria-haspopup="true". Having that attribute will already notify the screen reader user that you have a submenu. Different screen readers might announce it differently but the gist of it is that there's a submenu so you don't have to include that in your aria-label. You can just have aria-label="book settings".

Note, however, if you use aria-haspopup, then you are committing to supporting up/down arrow key navigation through your menu, rather than tabbing through the submenu list. See an example of the menu button pattern.

Alternatively, instead of using aria-haspopup, you could use aria-expanded. You can support either tabbing through the submenu or arrowing up/down through the submenu, or both. See the Disclosure Navigation Menu example. With aria-expanded, the screen reader will hear "collapsed" when they navigate to the 3-dots icon so they'll know they can press enter/space to expand the menu so, again, you don't need to say "submenu" in your aria-label.