Search Modal Updates

[carinaluise]

Accessibility Report

Search Modal has the following issues which affect accessibility:

Aria Role & Labels Missing

• Aria role is missing (lets the screenreader know that it is interacting with a modal): The element that serves as the dialog container should have a role of dialog.

• Aria labels missing for screenreader to announce that the user is interacting with a modal. The dialog should have either: - A value set for the aria-labelledby property that refers to a visible dialog title. - A label specified by aria-label. 
 - Optionally:
 aria-describedby enables screen readers to announce the description along with the dialog title and initially focused element when the dialog opens, which is typically helpful only when the descriptive content is simple and can easily be understood without structural information.

Screenreader Issues

• Inconsistent tabbing behaviour whilst interacting with modal

• Screenreader jumps back onto page 'behind' modal after reference input. (While the modal dialog is active, the contents obscured by the modal dialog should be inaccessible to all users. This means that the TAB key, and a screen reader’s virtual cursor (arrow keys) should not be allowed to leave the modal dialog and traverse the content outside of the dialog)

Related Articles / Potential Fixes: The dialog container element gets aria-modal set to true.
 https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/ https://www.tpgi.com/the-current-state-of-modal-dialog-accessibility/ https://developer.yoast.com/blog/the-a11y-monthly-making-modals-accessible/ https://www.youtube.com/watch?v=JS68faEUduk

[jonnysmillie]

Thanks Carina.

As with some of the other issues this should be addressed by PR https://github.com/substrate-developer-hub/substrate-docs/pull/1210