[med] Keyboard Navigation: Many Pages: Invisible button is focused with Tab key

[ogumen]

Action Performed:

Prerequisites: the screen reader is enabled to show the issue clearly.

1. Using JAWS+Chrome, open https://staging.new.expensify.com/
2. Press Tab key to focus the "Phone or Email" text field.
3. Note what element is focused and announced just before the field.

Expected Result:

Only visible elements should be focused.

Actual Result:

An invisible button is focused and announced as 'unlabeled zero button'.

HTML:
<div role="button" tabindex="0" class="css-18t94o4 css-1dbjc4n" style="touch-action: auto; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><div tabindex="0" class="css-1dbjc4n"><div class="css-1dbjc4n" style="align-items: center; background-color: rgb(11, 27, 52); border-radius: 8px; box-shadow: rgb(0, 0, 0) 0px 0px 0px; flex-direction: row; justify-content: space-between; padding: 20px; -webkit-box-align: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-box-pack: justify;"><div dir="auto" class="css-901oao" style="color: rgb(255, 255, 255); font-family: GTAmericaExp-Regular; font-size: 15px; line-height: 20px; width: 90%;"></div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="#03d47c"><path d="M17.1 5.5l-.9-.9c-.2-.2-.6-.2-.9 0l-7.6 7.6-3.1-3c-.2-.2-.6-.2-.8 0l-.9.9c-.2.2-.2.6 0 .9L6 14.1l1.4 1.4c.2.2.6.2.9 0l1.4-1.4 7.6-7.6c.1-.4.1-.7-.2-1z"></path></svg></div></div></div>

Other occurrences:

1. Set password -> the same hidden element is focused and announced as 'unlabeled zero button'.
2. Chat -> the same issue is present.

Workaround:

No workaround

Area issue was found in:

Landing page, Set password page, Chat page

Failed WCAG checkpoints

2.4.3

User impact:

The users might not understand what element is focused.

Suggested resolution:

Use aria-hidden="true" and tabindex="-1" to hide the invisible elements from the keyboard and screen reader users. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute
If the element is not meant to be on this layout, remove it entirely from the code.

Platform:

Where is this issue occurring?

• Web

Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:

Bug5180495_Focus_order_-_hidden_elements_-_landing_page.mp4

Bug5180495_Hidden_elements-Set_password.mp4

View all open jobs on GitHub