💡 Hinweis: Tabellenzellen werden als anklickbar vorgelesen

[deleonio]

Tabellenzellen, deren Inhalt mit der _render-Funktion erzeugt wurde, sind offenbar für Screenreader immer als anklickbar markiert, auch wenn sie keine tatsächlich anklickbaren Komponenten enthalten.

[deleonio]

• Folgendes Beispiel um eine Spalte mit reinem Text und React.render hinzufügen.
• https://public-ui.github.io/sample-react/#/table/render-cell
• Mit NVDA / VoiceOver nachtesten, ob "anklickbar" vorgelesen wird

[deleonio]

Solved: #4999

[sdvg]

Erkenntnisse:

• Es macht bei mir keinen Unterschied, wie die Zelle gerendert wurde (HTML-String oder React)
• VoiceOver gibt Text-Zellen wie folgt aus:
  • Der erste Teil der Ausgabe entspricht dem Label und des aria-label des Buttons in der entsprechenden Header-Spalte.
  • Die Zelle wird also nicht direkt als "anklickbar" ausgegeben, enthält aber die Spaltenbeschriftung einschließlich Button-Label
• Was auch ein Problem sein könnte: Die Tabelle ist von einem div mit tabindex="0" umgeben. Das ist vermutlich Absicht, ich kann aber den Zweck gerade nicht nachvollziehen. Der tabindex sorgt dafür, dass die Tabelle fokussierbar ist, aber auch für einen Pointer-Cursor auf allen Zellen, auch wenn diese nicht anklickbar sind.

[sdvg]

Das verlinkte PR ändert die Render-Methode der Datum-Spalte zu React. Zumindest mit VoiceOver macht das aber keinerlei Unterschied.

[sdvg]

Die Ausgabe in NVDA ist identisch zu VoiceOver: Die Spalte wird nicht als anklickbar vorgelesen, dafür aber die komplette Spaltenbezeichnung inkl. Button.

[sdvg]

Mit diesem Beispiel ist das Problem in NVDA reproduzierbar, aber nicht in VoiceOver: https://stackblitz.com/edit/vitejs-vite-s86r7b?file=package.json,src%2FApp.tsx

[sdvg]

Mögliche Ursache: facebook/react#20895
React fügt einen Click-Eventlistener auf der erzeugten Root-Node hinzu, NVDA interpretierte diese deshalb als "klickbar".

Die dort in einem Kommentar beschriebene Lösung funktioniert bei mir: https://stackblitz.com/edit/vitejs-vite-dofl5r?file=package.json,src%2FApp.tsx
Die entscheidende Änderung ist das domNode.setAttribute('role', 'presentation');

[laske185]

Bitte noch in V1 umsetzen.

[sdvg]

PR für V1: #5662

[laske185]

Rückmeldung: Problem weiterhin vorhanden

"allerdings wird bei mir der Inhalt der Zelle von NVDA dann ignoriert und stattdessen der Inhalt der Zelle rechts daneben ausgegeben"

[laske185]

Die Sample-App sollte ein Beispiel mit einem renderer in einer Tabelle haben.

[sdvg]

Das Problem mit dem oben beschriebenen Workaround (role=presentation): Die Zellen werden im Tabellen-Navigationsmodus (Ctrl + Alt + Pfeiltaste) ganz übersprungen.

[sdvg]

Ich habe jetzt einen neuen Workaround gefunden, der die Probleme effektiv zu lösen scheint. Ich habe selber mit Voice Over und NVDA getestet.

Für den Workaround wird eine neue div-Node erzeugt, die als React-Root verwendet wird und die das Attribut role="presentation" zugewiesen bekommt. Diese Node wird dann der Zelle hinzugefügt.
(Zum Vergleich: Vorher hat die Zelle selbst, also das <td>, das Attribut bekommen. Das hat im Tabellen-Lesemodus nicht funktioniert.)

Beispiel-Implementierung: https://github.com/public-ui/kolibri/pull/5928/files#diff-80007a9798934b119d062a5814370b01441acbd47de0bd17be24866bb7ba2276R78

Zusätzlich gab es ein Problem mit den Input-Komponenten, welches durch das PR gelöst wird: Die Input-Komponenten registrieren einen click-Event-Listener auf dem <kol-input>-Element, wodurch NVDA die umgebende Zelle ebenfalls als "anklickbar" vorliest. Dieses Problem konnte ebenfalls durch role="presentation" gelöst werden.

[AntnSaj]

Nachgetestet. Fehler wurde behoben.
Neue Gefundene Fehler:
Die folgenden Fehler beziehen sich auf die NVDA/JAWS Ausgabe.
Bei dem initialen fokussieren des Sortierschalters (Formularmodus-Tab) wird nur Schalter vorgelesen und es wird nicht deutlich, was dieser Schalter macht.

Version 1.7.9:
table badge-size:
NVDA: Es wird nicht bei jeder um Sortierung eine Screenreader Ausgabe erzeugt.
JAWS: Der Sortierstatus wird immer ausgegeben. Bei dem unsortierten Status wird "sortiert" angesagt

table column-allignment:
NVDA: Der Sortierstatus wird immer richtig ausgegeben.
JAWS: Der Sortierstatus wird immer ausgegeben. Bei dem unsortierten Status wird "sortiert" angesagt

table render-cell:
NVDA: Status "Nicht sortiert" wird nicht ausgegeben.
JAWS: Der Sortierstatus wird immer ausgegeben. Bei dem unsortierten Status wird "sortiert" angesagt

table sort-data:
NVDA: Es wird nicht bei jeder um Sortierung eine Screenreader Ausgabe erzeugt.
JAWS: Der Sortierstatus wird immer ausgegeben. Bei dem unsortierten Status wird "sortiert" angesagt

Version 2.0.3:
table badge-size:
NVDA: Sortierung wird gar nicht angesagt.
JAWS: Sortierung wird gar nicht angesagt.

table column-allignment:
NVDA: Der Sortierstatus wird immer richtig vorgelesen.
JAWS: Der Sortierstatus wird immer ausgegeben. Bei dem unsortierten Status wird "sortiert" angesagt

table render-cell:
NVDA: Status "Nicht sortiert" wird nur manchmal ausgegeben. "Aufsteigend" und "Absteigend" werden immer ausgegeben.
JAWS: Der Sortierstatus wird immer ausgegeben. Bei dem unsortierten Status wird "sortiert" angesagt

table sort-data:
NVDA: Sortierung wird gar nicht angesagt.
JAWS: Sortierung wird gar nicht angesagt.