search

Shift3 / boilerplate-client-react

The Bitwise standard starting point for new React web projects.
7 stars 10 forks source link

[Enhancement] Notification Bell has no alt tag for screen reader. #671

Open MichaelDLS opened 2 years ago

MichaelDLS commented 2 years ago

Devices

MacBook Pro (16-inch, 2019) macOS Monterey Version 12.5.1 Processor 2.6 GHz 6-Core Intel Core i7 Chrome Version Version 106.0.5249.119 (Official Build) (x86_64) FireFox 107.0 (64-bit) Safari Version Version 15.6.1 (17613.3.9.1.16)

Expected Behavior

The notification Bell should have alt text.

Actual Behavior

The notification bell does not have alt text.

Steps to Reproduce Issue

  1. Activate the screen reader. ( Command + F5 for Mac)
  2. Use the tab key to navigate to the notification bell.
  3. Notice it does not read "Notification" but instead "Group" followed by the number of unread messages.

Photos

Screen Shot 2022-11-10 at 3 42 43 PM

Note

Try using a name such as "Notification Bell Button" to notify ada reader.

lreyes-qae commented 2 years ago

Adding on to this ticket here, there are several buttons that are missing a descriptive text so that screen reader users can be presented with the function of the button.

  1. In the Log In page, the show/Hide Password button LogInPage_ButtonMissingFormLabel
  2. In the Agent List page: A. Dark Mode/Light Mode button B. Notification button C. Next/Previous page buttons AgentListPage_ButtonsMissingFormLabel Note: The buttons listed above have the descriptive text missing in the User List page as well.
aliciajbrookshire commented 1 year ago

@coreyshuman The listed issues are still occurring and were again noted in issue #771. I am closing 771 with reference to this issue.