Bug #95191

Less visible difference between "disabled" buttons and not "disabled" buttons in pagination

Added by Sybille Peters about 1 month ago. Updated about 1 month ago.

Status:
Under Review
Priority:
Should have
Category:
Backend User Interface
Target version:
-
Start date:
2021-09-12
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
11
PHP Version:
Tags:
accessibility, backend UI
Complexity:
Is Regression:
Yes
Sprint Focus:

Description

Some of the buttons in the pagination button group of the redirects (and other) module are disabled if they do not apply.

In TYPO3 v10 the difference in styling between the active and disabled buttons was more noticeable. Since v11 this has changed so it is more difficult to see the difference between the active and not active buttons.

This may be an issue for accessibility, but also a general issue.

Examples

The buttons on the left side (|< <<) are disabled. The ones on the right side (>> >|) are not.

TYPO3 v10

color: rgb(215,215,215) = #d7d7d7

TYPO3 v11

color: rgb(115,115,115) = #737373


Files

redirects_pagination_v10.png (3.38 KB) redirects_pagination_v10.png Sybille Peters, 2021-09-12 04:59
redirects_pagination_v11.png (3.95 KB) redirects_pagination_v11.png Sybille Peters, 2021-09-12 04:59
action_button_placeholders.png (5.16 KB) action_button_placeholders.png action button placeholders Sybille Peters, 2021-09-13 14:31
pagination_empty_buttons.png (11.7 KB) pagination_empty_buttons.png Sybille Peters, 2021-09-13 16:45
#1

Updated by Sybille Peters about 1 month ago

  • Subject changed from Less difference between "disabled" buttons and not "disabled" buttons in pagination of redirects module to Less visible difference between "disabled" buttons and not "disabled" buttons in pagination
#2

Updated by Sybille Peters about 1 month ago

  • Description updated (diff)
#3

Updated by Sybille Peters about 1 month ago

  • Description updated (diff)
#4

Updated by Sybille Peters about 1 month ago

  • Description updated (diff)
#5

Updated by Sybille Peters about 1 month ago

Suggestions from Slack on usability / accessibility:

  • problem probably was created by increasing contrast of dimmed buttons for accesibility (which would be an improvement if they were not now so similar to the active buttons), https://github.com/w3c/wcag21/issues/

Possible solutions:

  1. A possible solution is to use a thicker stroke for the enabled buttons.
  2. Remove the disabled buttons - also removes visual noise (either entirely or leave an empty placeholder). In the case of the empty placeholder so that the buttons will not change their position. This is already being done for example in the list module:

action button placeholders

see https://typo3.slack.com/archives/C108Q9E2C/p1631517698014400

#6

Updated by Sybille Peters about 1 month ago

Screenshots for pagination with empty placeholders:

<core:icon identifier="miscellaneous-placeholder"/>

<core:icon identifier="empty-empty"/>
#7

Updated by Gerrit Code Review about 1 month ago

  • Status changed from New to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/71076

#8

Updated by Gerrit Code Review about 1 month ago

Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/71076

#9

Updated by Gerrit Code Review about 1 month ago

Patch set 3 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/71076

Also available in: Atom PDF