Project

General

Profile

Actions

Bug #92695

open

Epic #89595: Improve accessibility of backend

Search modal dialog cannot be used with a keyboard

Added by Gabe Troyan over 3 years ago. Updated 9 months ago.

Status:
In Progress
Priority:
Should have
Assignee:
Category:
Backend User Interface
Start date:
2020-10-23
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
11
PHP Version:
Tags:
tas2020, accessibility
Complexity:
Is Regression:
Sprint Focus:

Description

Pages/Tasks

  • Search

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

Affected components

  • Dialog

Description

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.

Recommendation

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".

Further Information

https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html

Search dialog modal with the typed text "AD" shows 5 results


Related issues 2 (2 open0 closed)

Related to TYPO3 Core - Epic #91518: Keyboard usage in the TYPO3 backendAcceptedMichael Telgkamp2020-06-05

Actions
Related to TYPO3 Core - Bug #92688: Search result list is missing correct HTML markup and additional search informationNew2020-10-23

Actions
Actions

Also available in: Atom PDF