Problem/Motivation

In Claro, a visual hover state (blue background) is assigned to table rows and provides a visual cue for which row is active. This feature is only available when navigating by mouse/pointer and should be updated to inform keyboard users.

Steps to reproduce

Set admin theme to Claro and visit an admin page with a table, such as: admin/people

Screenshot of hover state on active row, I placed the cursor (not visible in screenshot) over the row which turns light blue:
table row with visible hover state

Focusing on row with keyboard, the light blue background is missing:
table with one of the cells in focus, no visual indicator on row

Proposed resolution

Suggested fix: add a selector to the hover style for keyboard users (:focus-within will apply the background color to the row whenever a child link, button, or form element has focus)

CommentFileSizeAuthor
#9 Screenshot 2024-05-15 at 3.25.23 PM.png31.67 KBcamilledavis
#4 simplescreenrecorder-2024-02-28_15.04.59.mkv380.34 KBdineshkumarbollu
claro_hover_row.png26.64 KBcamilledavis
claro_focus.png26.44 KBcamilledavis

Issue fork drupal-3424162

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:

About issue forks

Comments

camilledavis created an issue. See original summary.

camilledavis opened merge request !6794

camilledavis’s picture

camilledavis commented
Issue summary: View changes
dineshkumarbollu’s picture

dineshkumarbollu commented
StatusFileSize
new simplescreenrecorder-2024-02-28_15.04.59.mkv380.34 KB

The MR fixes the Focusing on row with keyboard, the light blue background,, Attaching the video for that.

camilledavis’s picture

camilledavis commented
Issue summary: View changes
camilledavis’s picture

camilledavis commented
Status: Active » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs issue summary update

Think this needs an issue summary update.

I do notice that when tabbing through the table the active color does not appear.

But using a macbook spoken content feature I didn't get any notification about the highlight.

camilledavis’s picture

camilledavis commented
Title: Claro highlighted row not communicated to keyboard or screen reader users » Claro highlighted row not communicated to keyboard users
Status: Needs work » Needs review
camilledavis’s picture

camilledavis commented
StatusFileSize
new Screenshot 2024-05-15 at 3.25.23 PM.png31.67 KB

Voiceover announces the row (see screenshot), so I removed the reference to screen readers from the description.

Partial screenshot of people table with username header and two users, test and admin, admin is selected and screenreader text reads 'row 3 of 3 link admin'

smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs issue summary update +Needs Review Queue Initiative

Okay so think this doesn't need an issue summary actually.

Tabbing through the hover is now activated

LGTM

  • nod_ committed cc96f977 on 10.3.x 
    Issue #3424162 by camilledavis, dineshkumarbollu, smustgrave: Claro...

nod_ closed merge request !6794

  • nod_ committed c80972a2 on 10.4.x 
    Issue #3424162 by camilledavis, dineshkumarbollu, smustgrave: Claro...

  • nod_ committed 61787742 on 11.0.x 
    Issue #3424162 by camilledavis, dineshkumarbollu, smustgrave: Claro...

  • nod_ committed 275cf720 on 11.x 
    Issue #3424162 by camilledavis, dineshkumarbollu, smustgrave: Claro...
nod_’s picture

nod_
Primary language French
Location Lille
commented
Version: 11.x-dev » 10.3.x-dev
Status: Reviewed & tested by the community » Fixed

Committed and pushed 275cf72083 to 11.x and 6178774238 to 11.0.x and c80972a291 to 10.4.x and cc96f97756 to 10.3.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.