1997399 - [dialogs] Keyboard focus moves outside of modal dialogs

Status: RESOLVED FIXED

(Firefox :: New Tab Page, defect)

Description

[Natalie Stroud [:nstroud]]

Screen recording (no audio)

STR:

1. Open Firefox Nightly

2. Go to about:newtab

3. Open any of the following modals: 'New shortcut', 'Edit shortcut', 'Block', or 'Delete from history'
   --New Shortcut: opens from clicking 'Add shortcut' button
   --Edit shortcut: click a shortcut > kebab icon button > Edit
   --Block: click the kebab icon button at the top right of any row that has story cards > Block
   --Delete from history: click the kebab icon button at the top right of a shortcut > Delete from history

4. With the TAB key, move focus and observe behavior

Actual / Expected:

TAB should move focus to the next focusable element inside the dialog. When focus is on the last focusable element in the dialog, focus moves to the first focusable element in the dialog

See: Modal Dialog Example | WAI

Comment 1

[Reem Hamoui]

I think a way of solving this issue would be to convert the modals we have on newtab to use the Dialog HTML element: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog It's a newer element that's been made to tackle a lot of the a11y issues hard-coded modals create. It's already being used in several places (i.e. Report content/report ads, and the weather opt-in dialog).

Comment 2

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:thecount, could you have a look please?

For more information, please visit BugBot documentation.

Comment 3

[Reem Hamoui]

I think this can officially be closed, as we updated our modal components to be the native HTML dialog element!

Comment 4

[Reem Hamoui]

Re-opening this as one of its blocking tickets has been backed out and I'll need to work on a fix. I'll close it once it's patched up.

Comment 5

[Reem Hamoui]

Okay, officially closing this now as the backed out ticket has been fixed! Modals are now accessible on newtab :)