papercups-io/papercups

Accessibility - buttons should have discernible text

Open

#885 opened on 2021年6月17日

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

説明

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.

コントリビューターガイド

技術スタック
reactjavascriptcsshtml
領域
frontendaccessibility
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
1
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
under 1 hour
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
stale
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
clear
前提条件
なし
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
95
調査方針
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.