adobe/spectrum-web-components

[Bug][a11y]: Table selected row state without "selects" specified lacks sufficient contrast

Open

#3,399 opened on Jun 29, 2023

View on GitHub
 (2 comments) (0 reactions) (1 assignee)TypeScript (256 forks)auto 404
Component:TableGood first issueSEV missingSpectruma11ybug

Repository metrics

Stars
 (1,525 stars)
PR merge metrics
 (PR metrics pending)

Description

Code of conduct

  • I agree to follow this project's code of conduct.

Impacted component(s)

Table

Expected behavior

It should be possible to distinguish a selected row from a not selected row even when the selection checkbox is not present.

See React-Spectrum for a positive example: https://react-spectrum.adobe.com/react-spectrum/TableView.html#highlight-selection

Actual behavior

Selected row state with not selects attribute specified lacks sufficient contrast to distinguish selected rows from not selected rows, which is a failure of WCAG 2.1 Success Criterion 1.4.11 Non-text Contrast

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

  1. Go to '...'
  2. Click on '....'
  3. Scroll to '....'
  4. Check console
  5. See error

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

Contributor guide

Research direction
Adjust the CSS styles for selected rows to increase contrast ratio, ensuring it meets WCAG 2.1 Success Criterion 1.4.11 Non text Contrast. Inspect the existing styles for selected state and modify the background color or add visual cues like a left border.
Tech stack
typescript
Domain
frontendaccessibility
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
CSSAccessibility
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70