Problem/Motivation

If you hover on any of the focusable elements in the full pager component (first, previous, any page number, next, last) or the mini pager component (<, current page number, >) the color contrast for the label is way too low. Label text needs a color contrast of at least 4.5:1. At the moment it looks like there are no labels on hover, but zooming in you'll notice them but they are barely visible:

full pager with 4 pages visible and the next button hovered but the label is not visible anymore
full pager with 4 pages visible and the last button hovered but the label is not visible anymore
full pager with 4 pages visible and the first page hovered but the label is not visible anymore
mini pager on the third page  and the next page button hovered but the label is not visible anymore

Steps to reproduce

  1. Go to <code>admin/structure/views/view/content to switch between the full and mini pager and set the items per page to 1
  2. Go to admin/content and create 4 to 5 nodes
  3. hover over pager elements

Proposed resolution

Ensure that the text labels have a color contrast of at least 4.5:1 against the background color also on hover

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
mini.jpg10.92 KBrkoller
full3.jpg19.52 KBrkoller
full2.jpg15.91 KBrkoller
full1.jpg17.36 KBrkoller

Issue fork drupal-3636640

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rkoller created an issue. See original summary.

shank115 made their first commit to this issue’s fork.

shank115’s picture

Status: Active » Needs review

Tested with full and mini pagers, the taxonomy overview pager and an AJAX views pager, in light, dark, high contrast and RTL, and with the accent presets. Hover text is readable now, and the other states didn't change.