Task #92665

Epic #89595: Improve accessibility of backend

Elements in the modal dialog have insufficient focus style

Added by Mylene Kreiger about 1 month ago. Updated about 1 month ago.

Status:
New
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2020-10-22
Due date:
% Done:

0%

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

Description

The elements in the modal dialog use the standard browser outline, which gets overlaid from the icons and crops the text, see screenshots. The close-button has opacity set to .5, so the contrast is very low.

.modal .close {
  opacity: .5;
}

:focus {
  outline: -webkit-focus-ring-color auto 1px;
}

Recommendation:
  • Use an individual focus style to avoid overlays
  • Set close-button to opacity 1
#1

Updated by Mylene Kreiger about 1 month ago

  • Tags changed from accessibility to accessibility, tas2020
#2

Updated by Riccardo De Contardi about 1 month ago

  • Parent task set to #89595

Also available in: Atom PDF