patternfly / patternfly/patternfly-react

Bug - Table - hoverable example invalid markup and selection not announced on navigation

Offen
#7,745 5 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

A11y Stale
Vorherrschende Sprache
TypeScript
Sterne
862
Forks
392
Ø Merge
4 T. 8 Std.
Gemergte PRs (30 T.)
9

Beschreibung

Describe the problem
Followup to #7732

The hoverable selectable Table example throws the following warning in the dev environment:

Warning: validateDOMNesting(...): <output> cannot appear as a child of <tbody>

Additionally, due to the way screen readers navigate tables (by cell rather than by row), the row that is selected only gets announced when a row is selected via a cell. Using Tab to navigate between rows (as the table caption instructs) does announce whether the row is selected, but it only announces the aria-label and not the content of the row.

Some possible alternatives:

  • Add a hidden input to each row, similar to the implementation seen in Data list selectable rows example. To avoid invalid markup, I believe this might require having an empty column similar to the table examples that use visible radio inputs.
  • Add a hidden input to the first cell of a row, and add styling so that when the radio input has focus it looks like the row has focus.
  • Move the current output element to the first <td> element of a row

How do you reproduce the problem?
Navigate the Hoverable selectable table example with a screen reader

Expected behavior
Markup is valid, and users can be notified whether the current row is selected as best as possible

Is this issue blocking you?
No

Screenshots
N/A

What is your environment?
N/A

What is your product and what release date are you targeting?
N/A

Any other information?
N/A

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit dem im Issue verlinkten hoverbaren, auswählbaren Table-Beispiel und reproduziere die Warnung und das Screenreader-Verhalten bei der Navigation mit einem Screenreader. Untersuche das Markup für die Zeilenauswahl des Beispiels; fertig ist es, wenn die Tabelle gültiges Markup hat und sowohl ankündigt, ob die aktuelle Zeile ausgewählt ist, als auch so weit wie möglich deren Inhalt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
accessibility, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.