Skip to content
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

[med] JAWS+Chrome: Chat: New chat menu button has wrong button role, state not announced #5677

Closed
ogumen opened this issue Oct 6, 2021 · 0 comments

Comments

@ogumen
Copy link

ogumen commented Oct 6, 2021

Action Performed:

Prerequisite: user has created personal account and is logged into same.

  1. Using JAWS+Chrome, open https://staging.new.expensify.com
  2. Tab over to the New Chat floating action button in the chat history panel on the left side and note how it is announced.

Expected Result:

The button is not a regular button. It functions as a menu button and should announce as such with a collapsed/expanded state. i.e. 'Menu Button, New chat or money request, collapsed'.

Actual Result:

No menu button role or collapsed state is announced. Only a regular button role and the label are announced without any further context. 'New Chat (floating action), button'.

HTML
<div aria-label="New Chat(Floating Action)" role="button" tabindex="0" class="css-1dbjc4n r-1awozwy r-1loqt21 r-1777fci r-u8s1d r-1otgn73" style="background-color: rgb(3, 212, 124); border-radius: 999px; bottom: 34px; height: 52px; right: 20px; transform: rotate(0deg); width: 52px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="rgba(255, 255, 255, 1)"><path d="M16.9 8.8h-5.6V3.1c0-.4-.2-.6-.6-.6H9.4c-.4 0-.6.3-.6.6v5.6H3.1c-.3.1-.6.3-.6.7v1.2c0 .4.2.6.6.6h5.6v5.6c0 .4.2.6.6.6h1.2c.4 0 .6-.2.6-.6v-5.6h5.6c.4 0 .6-.2.6-.6V9.4c.2-.4-.1-.6-.4-.6z"></path></svg></div>

Workaround:

No workaround

Area issue was found in:

Chat page

Failed WCAG checkpoints

4.1.2

User impact:

The screen reader users will not know the button triggers a menu or what state it is in.

Suggested resolution:

Implement the button as a menu button so it announces the proper role and users are aware that the button triggers a menu. Include aria-expanded to communicate the collapsed/expanded states.
https://www.w3.org/TR/wai-aria-practices-1.2/#menubutton
The descriptive label portion of the issue is reported under #5186645.

Platform:

Where is this issue occurring?

  • Web

Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:
Bug5187601_Chrome_Jaws-Chat-New_chat_menu_button_has_wrong_button_role__state_not_announced

Bug5187601_Screen_Readers-Chat-New_chat_menu_button_has_wrong_button_role__state_not_announced.mp4

View all open jobs on GitHub

@ogumen ogumen added this to the Accessibility Audit milestone Oct 6, 2021
@nazam100 nazam100 mentioned this issue Nov 3, 2021
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants