A11y review of v6

[nicolethoen]

No description provided.

[thatblindgeye]

List of things noticed in an initial pass

Urgent - should be looked at/resolved more immediately

• The contents of the chatbot container is navigable before it's even opened, requiring a lot of Tabbing to get past it all (this sort of applies to the "Embedded" demo as well, where the "back to top" button can be navigated to despite not being visibly rendered)
• Cannot get into the "Chatbot selector" or "Chatbot options" menus via keyboard
  • Additionally, the menus being appended to the end of the document body poses a problem for other AT as those menu options are only navigable after the rest of the page content
• When closing the "Menu" (via the hamburger icon button), focus is lost and shifts to the end of the page; expected the "menu" button to receive focus so that pressing Tab would move focus to the "Chatbot selector" menu toggle (only applies to the "Basic chatbot" demo; the "Embedded" demo seems to work fine in this regard)
• New content in the message area needs to be announced to AT. Currently when a new message appears/when the bot is "typing" (the 3 dots icon appearing before an actual message), it just falls into the void without any indication anything new has appeared unless you can visually see the window without any issues
  • Might be helpful to include a visually hidden container that states who the message is from to be announced when a new message arrives, e.g. "Message from [bot|userName]"
• A majority of buttons look to have both an aria-describedby and aria-label, where the aria-describedby is unnecessary/adding noise/pointing to a tooltip that contains the same content as the aria-label. Instead the aria-describedby should be removed from these buttons (the content being pointed to isn't really "describing" the button as much as it is labeling it) and either update the aria-label to match the tooltip content or use aria-labelledby instead

Improvement - can be resolved at another time/post-release

• The "Chatbot selector" menu toggle could include the currently selected option as part of its accessible name or description (currently will only announce "Chatbot selector..." without any indication what chatbot is currently selected without having to go into the menu)
• The page title should be updated when a new message arrives (for when that tab isn't the active one)
  • Likewise, if the chatbot menu is closed and a new messages comes in, there should be a badge/some other means to notify that there's a new message
• The alt attribute on the user/bot avatars in the chat window could possibly be changed to an empty string; if a chat goes on for a long time, imagining that that could create a ton of noise for something that may be more decorative.
• The "microphone" button tooltip should be an aria-live region since it has dynamic content (see tooltip on icon with dynamic content example)
• The message container should have a tab-index of 0, role, and aria-label, matching our recommendation for scrollable elements
• In the Attach via menu of options demo, you cannot navigate to the filter/search input (probably just needs a custom onOpenChangeKeys prop passed in to exclude the Tab key)
• If the zoom is higher than 100% in the browser, the message content area can get obscured by the "to top/bottom" buttons (following screenshot at 125% zoom):
  

Spike - may need further investigating/brainstorming

• Some resources mention including a "Skip to chatbot" link (similar to the "Skip to content" link), especially if the button for the chatbot is all the way at the end of the page. Possibly something worth including in docs if this is something we want to recommend as well.
• This could a little more investigating, but possibly making each message a section element rather than a plain div, making each message more easily contained (know when you're moving into/away from a message for example), with a unique aria-label on each (e.g. "Message from [bot|userName] - date/time of message ").

[rebeccaalpert]

Converting to tickets here:

Urgent:

• a11y - chatbot container #214
• a11y - dropdowns not keyboard-accessible and appended to end of body #215
• a11y - Basic chatbot loses focus on hamburger when closing menu via hamburger #216
• a11y - Announce new content in message area #217
• a11y - Remove unnecessary aria-describedbys #218

Improvement:

• a11y - Chatbot selector menu should announce currently selected option #221
• a11y - Update page title when new message arrives #222
• a11y - Specify an empty alt attribute for user/bot avatars #227
• a11y - Microphone button tooltip should have aria-live region #223
• a11y - Message container should have tabIndex, role, and aria-label #224
• a11y - Cannot navigate to filter/search input in attach menu demo #225
• a11y - Message content area obscured by top/bottom buttons when page is zoomed in #226

Spike:

• a11y - Add skip to chatbot link #219
• a11y - Make each message a section #220

[rebeccaalpert]

Moving urgents into current sprint; we'll prioritize the others alongside features and improvements in future sprints.

[thatblindgeye]

Closing as complete as an initial audit has been completed and separate issues opened up above