godaddy-wordpress
Caret buttons on mobile menu do not have accessible labels or aria-expanded values
Describe the bug:
When I open the mobile menu while using a screen reader, and I navigate to the caret "buttons" (they are not actually buttons, but simply svgs with a role="img" and a tabindex=0) that are used to expand and collapse sub-menus, the screen reader simply says "image," due to the carets not having accessible names via alt text, aria-labels, or another aria alternative. They do not contain aria-expanded values based on whether that sub-menu is expanded or collapsed, either.
Expected behavior:
I would expect these caret "buttons" to have accessible names, via alt text, aria-labels, or the like, so that a screen reader user can easily distinguish them from one another, and therefore more easily expand and collapse these menus, and therefore more easily navigate the site on mobile devices. I would also expect these buttons to have aria-expanded values based on whether that sub-menu is expanded or collapsed.
In the example below, I would expect the first caret button to be labeled "About Menu" (so "[name of main menu item] Menu") or the like. I would expect it to be collapsed first, then expanded when I expand it.
Screenshot(s):
https://github.com/user-attachments/assets/6b72b7ac-b9c9-479c-91b0-9274fb72a4ae
Priority (select one):
- [ ] High - Functional blocker
- [X] Medium - Doesn't work as expected
- [ ] Low - Not a big deal but we'd want to get to this eventually
