2022592 - Dialog opened with a dialog-button is missing accessible name for the container

Status: RESOLVED INVALID

(Firefox :: Settings UI, defect)

Description

[Anna Yeddi [:ayeddi]]

Attachment: Accessibility DevTools in Firefox showing the Dialog Button's dialog example being highlighted and "Dialogs should be labeled" issue is shown, the accessible name of the dialog is null

Steps to reproduce (STR):

1. Have a screen reader running (i.e. NVDA on Windows OS).
2. Using keyboard navigation, navigate to an instance of the <dialog-button> element and activate the button that triggers this dialog
   1. For instance, on the Storybook example for Domain-specific UI Widgets > Settings > Dialog Button > Default, activate Manage certificates... button
3. Confirm that the dialog is opened and observe the screen reader's announcement of this dialog's content.

Expected results:

1. The dialog container should include accessible name that is set on it explicitly, i.e. a screen reader would announce this name of the dialog once the dialog is opened and keyboard focus is moved into it.

Actual results:

1. The dialog container is not communicating its accessible name

Recommendation:

1. Set an on-screen string for the dialog to have a unique id
2. Update the dialog container to have aria-labelledby attribute that is set to the on-screen string's id

Comment 1

[Tim Giles [:tgiles]]

Thanks for going through Storybook and auditing this! I am going to mark this as INVALID though since we're not using this dialog-button anywhere in the Settings code. We ended up using moz-box-button for this case. See Bug 2023625 for more details about removing the dialog-button in the preferences/ folder.