adobe/spectrum-web-components

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

Offen

#3.399 geöffnet am 29.06.2023

Auf GitHub ansehenContributor Guide
 (2 Kommentare) (0 Reaktionen) (1 zugewiesene Person)TypeScript (256 Forks)auto 404
Component:TableGood first issueSEV missingSpectruma11ybug

Repository-Metriken

Stars
 (1.525 Sterne)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

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-Richtung
Passen Sie die CSS Stile für ausgewählte Zeilen an, um das Kontrastverhältnis zu erhöhen und sicherzustellen, dass es dem WCAG 2.1 Erfolgskriterium 1.4.11 (Nicht Text Kontrast) entspricht. Überprüfen Sie die vorhandenen Stile für den ausgewählten Zustand und ändern Sie die Hintergrundfarbe oder fügen Sie visuelle Hinweise wie einen linken Rand hinzu.
Tech Stack
typescript
Domain
frontendaccessibility
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
Halber Tag
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
CSSAccessibility
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
70