Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🐞 Bug: toast: Konzept für Tastaturbedienung fehlt #5808

Open
fohi17 opened this issue Dec 20, 2023 · 11 comments · May be fixed by #6376
Open

🐞 Bug: toast: Konzept für Tastaturbedienung fehlt #5808

fohi17 opened this issue Dec 20, 2023 · 11 comments · May be fixed by #6376
Assignees
@cbraehmig @AntnSaj @fohi17
Labels
a11y-refine bug Something isn't working feature New feature or request v2
Milestone
BIK BITV-Test '23

Comments

@fohi17
Copy link

fohi17 commented Dec 20, 2023

Note

  • Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgebe.

Fehlermeldung

Beschreibung des Fehlers

Die Toasts sind mit der Tastatur nicht sinnvoll bedienbar. Da die Toasts nicht automatisch ausgeblendet werden (sollen) müssen sie über den Schließen Button geschlossen werden. Der Fokus wird jedoch beim Erscheinen nicht in die Toasts gesetzt. Ein Tastaturnutzer müsste die ganze Seite navigieren, um die Toasts zu schließen, da diese sich aktuell am Seitenanfang (im Code ganz vorne) befinden.

Reproduktion

Komponente: toast basic (https://public-ui.github.io/v2/sample-react/#/toast/basic)
Version: v2.0.0

Schritte zum Reproduzieren des Verhaltens:

  • Navigation mit der TAB-Taste

Mögliche Lösungen

Es muss ein Konzept entwickelt werden, wie die Toasts effizient mit der Tastatur (und mit Screenreader) bedienbar sind.
Ideen bisher:

  1. Fokus wird in Toasts gesetzt und nach schließen wieder Raus. Stört je nach Einsatzszenario den Arbeitsfluss.
  2. Toasts werden nach eine bestimmten Zeit selbst geschlossen. Dann MUSS die Zeit aber Einstellbar sein, schwierig da einzelne Komponente.
  3. Toasts bekommen, wie aktuell, am Anfang oder Ende der Seite den Fokus. Sehr hoher Navigationsaufwand, doppelte Wahrnehmung für Screenreader, Toasts verdecken Inhalt.
@fohi17 fohi17 added the bug Something isn't working label Dec 20, 2023
@deleonio
Copy link
Contributor

deleonio commented Dec 20, 2023 •
edited
Loading

Brainstroming/Diskussionspunkte:

  • Tabreihenfolge ist für den Toast-Container ggf. nicht zutreffend / wir können uns entscheiden zw. entweder am Anfang oder am Ende der Seite
  • Die Toast in eine Listenstruktur auflisten.
  • Wie gehen wir konkret mit automatischen Schließen. (@fohi17 Grenze definieren)
  • Der Schließenschalter sollte nicht den "Dialog"-Modus erfordern. Das heißt, der Fokus muss nicht auf das Toast gesetzt werden.
  • Wenn interaktive Inhalte im Toast sind, dann muss der Dialog-Modus greifen. Der Fokus geht auf das Toast. Wird das Toast geschlossen, geht der Fokus zurück auf das Element, vor dem Öffnen des Toasts.

@deleonio deleonio added feature New feature or request a11y-retest labels Dec 20, 2023
@deleonio deleonio moved this to 🕒 Waiting in KoliBri Board Dec 20, 2023
@deleonio deleonio added this to the BIK BITV-Test '23 milestone Jan 5, 2024
@laske185
Copy link
Contributor

Auf wen oder was wird gewartet?

@deleonio deleonio mentioned this issue Mar 26, 2024
Closed
@laske185
Copy link
Contributor

laske185 commented Apr 4, 2024

Den PoC (#6176) abwarten und schauen, wie es sich verhält. Dann neu bewerten.

@laske185
Copy link
Contributor

laske185 commented Apr 4, 2024 •
edited
Loading

WCAG: „Wichtige Statusmeldungen dürfen nicht automatisch geschlossen werden.“
→ Wichtige Meldungen nicht über einen Toast lösen
→ Unwichtige Informationen (die auch alternativ eingeholt werden können) können über einen Toast gelöst werden, die automatisch geschlossen werden.

Literatur:

@sdvg
Copy link
Member

sdvg commented Apr 29, 2024

Für einen ersten (funktionierenden) Ansatz mit Dialog-Elemente, siehe #6376

@laske185 laske185 removed the v1 label May 21, 2024
@laske185
Copy link
Contributor

Todo: Neue Tickets mit klaren granularen Aufgaben anlegen. Dieses Ticket hier ist dafür das Epic.

@laske185 laske185 moved this from 🕒 Waiting to Backlog in KoliBri Board May 21, 2024
@deleonio
Copy link
Contributor

Wir müssen hier mit der Barrierefreiheit mal einen SOLL-Zustand aufschreiben. Gerne auch in den Diskussions.

@deleonio deleonio moved this from Backlog to 🚹 A11y-Test in KoliBri Board Jul 23, 2024
@deleonio deleonio linked a pull request Jul 26, 2024 that will close this issue
6176 toast dialog #6376
Draft
10 tasks
@github-actions GitHub Actions
Copy link
Contributor

This issue has been automatically marked as stale and will be closed in 10 days because it has not had recent activity and is much likely outdated. If you think this issue is still relevant and applicable, please post a comment or remove the Stale label.

@github-actions github-actions bot added the Stale label Jan 10, 2025
@github-actions GitHub Actions
Copy link
Contributor

This issue was closed because it has been stale for 10 days with no activity. If the issue is still relevant to you, feel free to re-open with a comment.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Jan 21, 2025
@github-project-automation github-project-automation bot moved this from 🚹 A11y to ✅ Done in KoliBri Board Jan 21, 2025
@deleonio deleonio reopened this Feb 3, 2025
@github-project-automation github-project-automation bot moved this from ✅ Done to 🏗 In progress in KoliBri Board Feb 3, 2025
@deleonio deleonio moved this from 🏗 In progress to 📄 Ready in KoliBri Board Feb 3, 2025
@deleonio deleonio moved this from 📄 Ready to 🗂️ Backlog in KoliBri Board Feb 3, 2025
@deleonio
Copy link
Contributor

deleonio commented Feb 3, 2025 •
edited
Loading

Wir sprechen das mit der Testerin noch einmal ab, ob ein nicht-modaler Dialog die barrierefreie Lösung darstellt. Wenn ja, dann setzen wir das so um.

#6376

@github-actions github-actions bot removed the Stale label Feb 4, 2025
@deleonio
Copy link
Contributor

Toast mittels popover bzw. dialog umsetzen ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cbraehmig cbraehmig

@AntnSaj AntnSaj

@fohi17 fohi17

Labels
a11y-refine bug Something isn't working feature New feature or request v2
Projects
KoliBri Board
Status: 🗂️ Backlog
Milestone
BIK BITV-Test '23
Development

Successfully merging a pull request may close this issue.

6176 toast dialog public-ui/kolibri
6 participants
@sdvg @deleonio @laske185 @cbraehmig @AntnSaj @fohi17