papercups-io/papercups

Accessibility - buttons should have discernible text

Open

#885 geöffnet am 17. Juni 2021

Auf GitHub ansehen
 (7 Kommentare) (1 Reaktion) (0 zugewiesene Personen)Elixir (6.032 Stars) (566 Forks)batch import
buggood first issue

Beschreibung

Describe the bug The button to toggle the chat widget doesn't have discernible text.

To Reproduce Steps to reproduce the behavior:

  1. Go to a page with the Papercups chat widget installed.
  2. Check accessibility with axe DevTools
  3. See Buttons must have discernible text issue on <button class="Papercups-toggleButton css-1lzvboz">

Expected behavior All buttons should have discernible text, so that screen readers can properly present the page to people with low or no vision.

Additional context Fixing this is basically following one of the solutions in https://dequeuniversity.com/rules/axe/4.2/button-name?application=rocketvalidator - basically adding a aria-label attribute with the text Open chat widget for example.

Contributor Guide

Tech Stack
reactjavascriptcsshtml
Domain
frontendaccessibility
Issue Type
bug
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
1
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
under 1 hour
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
stale
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
Keine
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
95
Research-Richtung
The button with class 'Papercups toggleButton' is likely in a React component. Add an aria label attribute with the text 'Open chat widget' to this button. Ensure that if the button toggles between open and close, the aria label updates accordingly (e.g., 'Close chat widget'). Test using axe DevTools or similar. The relevant file is probably in the frontend directory, e.g., components/ToggleButton.jsx.