You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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'.
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:
Action Performed:
Prerequisite: user has created personal account and is logged into same.
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?
Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:
Bug5187601_Screen_Readers-Chat-New_chat_menu_button_has_wrong_button_role__state_not_announced.mp4
View all open jobs on GitHub
The text was updated successfully, but these errors were encountered: