Epic #89595: Improve accessibility of backend
Search modal dialog cannot be used with a keyboard
Affected WCAG 2.1 Success criterions¶
- 1.3.1 Info and Relationships A
- 2.1.1 Keyboard A
- 2.4.4 Link Purpose (In Context) A
- 4.1.2 Name, Role, Value A
When you type text in the search input field, a modal dialog with the search results opens. This dialog with all including search results cannot be reached with the keyboard. As soon as the input field loses focus, the dialog gets closed.
The modal dialog also has an invalid ARIA role="menu", which would require to have additonal child nodes with other ARIA roles like role="menuitem":
<div class="dropdown-menu" role="menu"> ... </div>
The ARIA role="menu" is wrong in this context, as the modal dialog doesn't contain a menu.
Before the search model dialog there is an empty link, which seems to control the visibility of the dialog:
<a href="#" class="dropdown-toggle t3js-toolbar-search-dropdowntoggle" data-toggle="dropdown" aria-expanded="false"></a>
Empty links should be avoided.
Make the search modal dialog available for keyboard usage and use the best practice design pattern for modal dialogs for the search dialog.
Remove the empty link or at least make it invisible for screenreader users, for example with aria-hidden="true".
Updated by Riccardo De Contardi 6 months ago
On version 12 and 13 the livesearch has been rewritten and now it opens a modal window with the attributes
As far as I have seen the interface inside the modal can be navigated using the keyboard.
Is it a good idea to close this issue and open fresh ones about accessibility improvements of the new modal window?