Skip to content

Screenreader-Output Input-/Textarea-Counter optimieren #7162

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.

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

Open
cbraehmig opened this issue Dec 6, 2024 · 7 comments · May be fixed by #7707, public-ui/public-ui.github.io#321 or #7727
Open

Screenreader-Output Input-/Textarea-Counter optimieren #7162

cbraehmig opened this issue Dec 6, 2024 · 7 comments · May be fixed by #7707, public-ui/public-ui.github.io#321 or #7727
Assignees
Labels
a11y good first issue Community issues and good for newcomers need:test v2 v3

Comments

@cbraehmig
Copy link
Contributor

cbraehmig commented Dec 6, 2024

  • Audiomüll bei Screenreader-Ausgabe vermeiden.
  • Best-practise recherchieren
  • Lösungsidee: Debounce umsetzen

image

@laske185 laske185 added the good first issue Community issues and good for newcomers label Mar 24, 2025
@laske185 laske185 moved this to 🗂️ Backlog in KoliBri Board Mar 24, 2025
@laske185 laske185 changed the title Screenreader-Output Input-/Textarea-Counter optimieren (Draft) Screenreader-Output Input-/Textarea-Counter optimieren Mar 24, 2025
@laske185
Copy link
Contributor

laske185 commented Apr 28, 2025

Aktuelle Umsetzung:

<span class="counter" aria-atomic="true" aria-live="polite" data-testid="input-counter">
    46 
    <span>
        characters
    </span>
</span>

@laske185 laske185 moved this from 🗂️ Backlog to 📄 Ready in KoliBri Board Apr 28, 2025
@sdvg sdvg self-assigned this May 5, 2025
@sdvg
Copy link
Member

sdvg commented May 6, 2025

Das Gov.uk hat hier ein sehr schöne Seite dazu, die bereits auf Recherche und User-Testing basiert: https://design-system.service.gov.uk/components/character-count/

Ich habe für uns abgeleitet:

Fragen:

  • Welchen Zweck erfüllt ein reiner Counter, ohne Limit? Ist das ein notwendiges Feature in KoliBri?

Empfehlungen:

  • Der Text sollte überarbeitet werden: "8 von 10 Zeichen" könnte implizieren, dass 10 Zeichen notwendig sind. Besser: "Noch 2 Zeichen verfügbar.".
  • Das Limit (o.g. Text) sollte vorgelesen werden, wenn der Nutzende aufgehört hat zu tippen (Debounce, wie durch Christian empfohlen).
  • Das Limit sollte schon vor der Eingabe über ein zusätzliches aria-describedby-Feld kommuniziert werden ("Es können bis zu 200 Zeichen eingegeben werden.").
  • Bessere Beispiele in der Sample App: Die Best Practice-Empfehlung sollte eine Textarea ohne maxlength, aber mit Zeichenlimit im Counter und entsprechender Validierung sein. So können auch längere Text reinkopiert und anschließend gekürzt werden.

@sdvg
Copy link
Member

sdvg commented May 6, 2025

@cbraehmig @laske185 @deleonio
Schonmal vorab zur Info. Wir können die konkreten nächsten Schritte gerne im nächsten Daily oder Planning besprechen.

@sdvg sdvg moved this from 📄 Ready to 🏗 In progress in KoliBri Board May 6, 2025
@laske185
Copy link
Contributor

laske185 commented May 8, 2025

Ich finde die Vorschläge gut. Ein reiner Counter macht keinen Sinn, bzw. mir fehlt dazu ein valider Use-Case.

Für eine Beschränkung ist das Feature nützlich. Es sollte sich dann so verhalten, wie beim oben genannten Beispiel:
Image
Image

@sdvg
Copy link
Member

sdvg commented May 8, 2025

Umsetzungsplan bzw. Vorschlag:

  • V3
    • _has-counter für alle Komponenten entfernen. Für kol-input-x ersatzlos.
    • _character-limit für kol-textarea einführen. Setzt das beschriebene Verhalten um und funktioniert unabhängig von _max-length.
  • V2
    • _has-counter wird aus Kompatibilitätsgründen beibehalten.
    • tbd: Ist das neue Feature _character-limit für V2 notwendig oder kommt es nur in V3?
      • Falls notwendig: Umsetzen analog V3, es darf nur entweder _character-limit ODER _has-counter gesetzt sein.
      • Falls nicht notwendig: Counter bleibt konzeptionell wie er ist, aber das Screenreader Announcement wird throttled.

sdvg added a commit that referenced this issue May 14, 2025
sdvg added a commit that referenced this issue May 14, 2025
sdvg added a commit that referenced this issue May 14, 2025
sdvg added a commit that referenced this issue May 14, 2025
sdvg added a commit that referenced this issue May 14, 2025
@sdvg sdvg linked a pull request May 14, 2025 that will close this issue
5 tasks
@sdvg sdvg linked a pull request May 14, 2025 that will close this issue
5 tasks
sdvg added a commit that referenced this issue May 14, 2025
sdvg added a commit that referenced this issue May 14, 2025
sdvg added a commit that referenced this issue May 14, 2025
sdvg added a commit that referenced this issue May 14, 2025
sdvg added a commit that referenced this issue May 14, 2025
sdvg added a commit that referenced this issue May 14, 2025
sdvg added a commit that referenced this issue May 14, 2025
publicuibot bot pushed a commit that referenced this issue May 15, 2025
publicuibot bot pushed a commit that referenced this issue May 15, 2025
sdvg added a commit that referenced this issue May 15, 2025
sdvg added a commit that referenced this issue May 15, 2025
@sdvg sdvg linked a pull request May 15, 2025 that will close this issue
5 tasks
@deleonio deleonio moved this from 🏗 In progress to 🚹 A11y in KoliBri Board May 15, 2025
@deleonio
Copy link
Contributor

@cbraehmig - bitte den PR nachtesten - dazu einfach den Netifly-Link im PR öffnen: #7707

@sdvg sdvg linked a pull request May 16, 2025 that will close this issue
5 tasks
sdvg added a commit that referenced this issue May 16, 2025
sdvg added a commit that referenced this issue May 16, 2025
publicuibot bot pushed a commit that referenced this issue May 16, 2025
sdvg added a commit that referenced this issue May 16, 2025
@sdvg sdvg linked a pull request May 16, 2025 that will close this issue
5 tasks
@sdvg
Copy link
Member

sdvg commented May 16, 2025

@cbraehmig - bitte den PR nachtesten - dazu einfach den Netifly-Link im PR öffnen: #7707

V2 steht jetzt ebenfalls bereit: #7727
Hier habe ich nur den alternativen Text mit Debounce ergänzt, damit es keinen Breaking Change gibt. Die visuelle Darstellung bleibt also die gleiche wie vorher.

@deleonio deleonio assigned cbraehmig and unassigned sdvg May 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment