papercups-io/papercups

Accessibility - buttons should have discernible text

Open

#885 opened on Jun 17, 2021

View on GitHub
 (7 comments) (1 reaction) (0 assignees)Elixir (6,032 stars) (566 forks)batch import
buggood first issue

Description

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
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
1
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
None
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
95
Research direction
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.