[MainMenu]: accessibility issues related to the component
- Dominant language
- TypeScript
- Stars
- 247
- Forks
- 78
- Avg merge
- 14h 27m
- Merged PRs (30d)
- 15
Description
## Case №1
### Description
Part of navigation links are not available when content is zoomed up to 200%
### Precondition
Screen Reader is **ON** or **OFF**
### Steps to Reproduce
1. Open [Main Menu](https://uui.epam.com/documents?category=components&id=mainMenu&mode=doc&skin=UUI4_promo) component.
2. Set the size of the adaptive panel so that the Main Menu (hamburger) button is displayed and click on it.
3. Zoom in the content to 200% and observe.
### Actual Result
"Action items" and "Subscriptions" links are not available when content is zoomed up to 200% and no vertical scroll is provided.
https://github.com/epam/UUI/assets/57751283/6cff37d7-b729-45d2-8128-7e1d2fe9b7f5
### Expected Result
All functionality should be available when content is zoomed up to 200%.
**Failed WCAG Checkpoint:** 1.4.4 Resize text (Level AA)
https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html
## Case №2
### Description
State and change of state of "More" button is not announced by screen reader.
### Precondition
Screen Reader is **ON**
### Steps to Reproduce
1. Open [Main Menu](https://uui.epam.com/documents?id=mainMenu&mode=doc&category=components) component.
2. Use `Tab` key to navigate to collapsed "More" button and note the announcement.
3. Press Enter key to expand "More" button and note the announcement.
### Actual Result
Current state (collapsed) and change of state (expanded/collapsed) of "More" button is not announced by screen reader.
https://github.com/user-attachments/assets/e8edecb9-ff76-46d0-a4cf-e11f0a68bcdc
### Expected Result
Current state and change of state should be announced by screen reader.
### Recommendation
To indicate the expanded/collapsed state of the button provide aria-expanded="false" attribute when button is collapsed and aria-expanded="true" when button is expanded.
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
### Note
`aria-expanded` is present and correctly switches between `true` and `false`, but the screen reader still does not announce the state.
This suggests that the issue may not be caused by the ARIA attribute itself, but by how the element or its role is handled by assistive technologies.
Contributor guide
Assessment
This issue has not been assessed yet.