Collapsible list: unlabeled accessible button, decorative image

Offen Anfängerfreundlich
#2,811 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
68/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
react, typescript

Rechercherichtung

Beginne mit der in Docs verwendeten Schaltfläche für die einklappbare Liste und überprüfe ihr aktuelles Verhalten hinsichtlich der Barrierefreiheit mit einem Screenreader. Gib der Schaltfläche einen aktionsspezifischen zugänglichen Namen wie „Liste einklappen“ oder „Liste ausklappen“, blende ihr dekoratives Bild für unterstützende Technologien aus und überprüfe sowohl den eingeklappten als auch den ausgeklappten Zustand.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

a11y
What’s broken?

The button used to collapse/expand a collapsible list does not have an accessible name. The image it contains is not hidden from assistive technologies. As a result, the component is not vocalized and the user cannot identify the presence of a collapsible list in the document.

Impact

A blind user navigating with a screen reader cannot identify the collapsible list button. The component is unreachable: the user does not know that a collapsible list exists in the document and cannot interact with it.

What did you expect to happen?

The button must have an accessible name describing its action (for example "Collapse list" / "Expand list"). The decorative image contained in the button must be hidden from screen readers.

Steps to reproduce

Open a document containing a collapsible list in Docs.
Navigate with a screen reader.
Observe that the collapsible list button is not vocalized.

BlockNote version

0.51.1

Environment

No response

Additional context

No response

Contribution
  • I'd be interested in contributing a fix for this issue
Sponsor
  • I'm a sponsor and would appreciate if you could look into this sooner than later 💖
Vorherrschende Sprache
TypeScript
Sterne
10.2k
Forks
772
Ø Merge
3 T. 11 Std.
Gemergte PRs (30 T.)
17

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TypeCellOS/BlockNote

Alle Issues in TypeCellOS/BlockNote

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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