[a11y]: Search [expandable] - collapse status not announced

[andreancardona]

Package

@carbon/react

Browser

FF, Safari & iPhone

Package version

@carbon/[email protected]

Automated testing tool and ruleset

Manual QA

Assistive technology

JAWS & VO

Description

Collapse Status not announced when the component loads but when we click on Search Button Expand status announced.

If the screen reader does not announce the status change in a page element, it’s difficult for users to understand it on their own. This defect mainly impacts users who are blind.

Recommended Fix

Both Expand and Collapse status needs to be announced correctly when we navigate using the screen reader

WCAG 2.1 Violation

4.1.2 Name, Role, Value

[guidari]

This one is kinda trick due to this scenario:

The aria-expanded attribute is in the Search icon button and when we click to expand and show the search input, the focus is redirected to the input, skipping the aria-expanded to be read.
Since we want to keep this focus functionality the expanded announce won't be possible.

But the confusion can be solved by using the aria-label or placeholder to indicate what is happening on the screen and they have to type.

Note: I tried to use aria-live, aria-busy and aria-atomic but due to the JS focus being placed on the input it will be skipped.