[low] Chrome + Jaws: Focus lands on the Hidden element and announced by the screen reader.

[Stutikuls]

Action Performed:

1. Using Chrome + Jaws, open URL staging.new.expensify.com
2. Navigate to new chat (+) using Tab key and press Enter to activate.
3. Content will be expanded, Navigate the expanded content using Tab key.
4. Listen to the screen reader and observe the issue.

Expected Result:

The focus should only move to the content which is visible on the screen and only those elements should be announced by the screen reader.

Actual Result:

Focus moved to the hidden element and announced by the screen reader. Screen reader announced as "New chat"

Other occurrences
Same issue repro on #8733, #9002, #8969, #8940

Workaround:

Yes

Area issue was found in:

New chat floating button

Failed WCAG checkpoints

1.3.2

User impact:

Screen reader users might be confused by the announcement of hidden content and about where current focus is.

Suggested resolution:

Provide CSS Display: none in order to hide the hidden elements.
And make sure to hide the element from the screen readers by setting an aria-hidden attribute with a value of "true".
Refer to:
https://webaim.org/techniques/css/invisiblecontent/

Platform:

• Web

8512.-3.-Hidden.element.focused.and.announced.by.the.screen.reader.mp4

Version Number: v1.1.55-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Stuti

[melvin-bot]

@Stutikuls, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.