[med] Keyboard Navigation: Many Pages: Focus not moved/trapped within the opened dialog

[ogumen]

Action Performed:

Prerequisite: the user is logged in with valid credentials.

1. Using Chrome, open https://staging.new.expensify.com/
2. Press Tab key to focus the button of user icon in the top left and press Enter key to activate it.
3. Once the dialog opens, note where the focus is moved.
4. Continue navigating by pressing Tab key and note if the focus is trapped within the dialog.

Expected Result:

The focus should be moved to the opened dialog and correctly trapped within the dialog when navigating with Tab or Shift+Tab.

Actual Result:

The focus is not moved to the dialog once it is opened. Also, the focus is not trapped in the dialog and moves to the background elements.

Other occurrences:

1. Request Money -> Upon opening the dialog, the focus is not trapped within it and moves to the background elements.
2. Split Bill -> Upon opening the dialog, the focus is not trapped within it and moves to the background elements.
3. Create a new chat overlay -> Upon opening the dialog, the focus is not trapped within it and moves to the background elements.
4. About overlay -> same issue is seen.
5. Similar issues are present for the following elements either focus not moving to at all or not the first focusable element (i.e. close, back, etc.): Not Moved --- Chat: - Request a call panel - Setting Panel - Add Attachment Settings: - Paypal.me Wrong Focus (not first element) --- - New Group Panel Chat: - Search panel - New chat FAB menu - New chat panel Settings - Add Phone Number

Workaround:

No workaround

Area issue was found in:

Settings overlay, Request money overlay, Split bill overlay, Create new chat overlay, About overlay, Request a call overlay, Chat page, Create new group overlay, Add payment method flow

Failed WCAG checkpoints

2.4.3

User impact:

The users might not understand the boundaries of the whole-screen dialog as focus is not set to it or trapped in it.

Suggested resolution:

Make sure that the focus is set to the first actionable element in the dialog once it is opened and trapped in dialog until the user dismisses it. See: https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html and https://scottaohara.github.io/accessible_modal_window/

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:

Bug5182693_5182693-Many_pages-Focus_not_movedtrapped_within__Settings__dialog.mp4

Focus_order_-_hidden_elements_-_about.mp4

Keyboard.Navigation-Create.New.Group-Focus.is.not.trapped.in.panel.mp4

View all open jobs on GitHub