epam / epam/UUI

[MainMenu]: accessibility issues related to the component

Open
#2,977 3 comments 0 reactions 1 assignee Claimed by @JuliaMV View on GitHub
A11y bug Main Menu
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.