search

Automattic / studio

Studio by WordPress.com, a free desktop app that helps developers streamline their local WordPress development workflow.
https://developer.wordpress.com/studio/
GNU General Public License v2.0
172 stars 17 forks source link

feat: Improve AI assistant accessibility #248

Closed dcalhoun closed 3 months ago

dcalhoun commented 3 months ago

Fixes https://github.com/Automattic/dotcom-forge/issues/7520.

Proposed Changes

Hide decorative AI assistant icon from screen readers Selecting this description-less, decorative image provides little value for users.

Communicate message author to screen readers Navigating individual lines of text from a back-and-forth conversation is difficult and overwhelming when there are not discernible, navigable grouping or message author labels.

Communicate the active assistant "thinking" to screen readers Without a label, there is no indication that the assistant is actively working to answer a message.

Testing Instructions

[!TIP] When using VoiceOver...

  • Option+Control+Shift+[Up|Right|Down|Left] will navigate between/into/out of content "groups."
  • Option+Control+[Up|Right|Down|Left] will navigate between individual content elements, depending on the context and settings.
  • Option+Control+Space will "activate" the selected element, triggering the relevant event handler.

Decorative assistant icon is not selectable

  1. Enable a screen reader (e.g., VoiceOver).
  2. Navigate to the "Assistant" tab.
  3. Move selection to elements before and after the automatically focused input.
  4. Verify the assistant icon is skipped over and not selectable.

Message collection navigation is straightforward and comprehensible

  1. Enable a screen reader (e.g., VoiceOver).
  2. Navigate to the "Assistant" tab.
  3. Interact with the assistant — send messages, move selection between various messages, etc.
  4. Verify the message navigation is straightforward and comprehensible, providing clear communication of each message and the author, while also allowing navigation of content within each message.

Pre-merge Checklist

dcalhoun commented 3 months ago

I noticed that when navigating inside the group that represents the tab button, the icon is accessible by screen readers

Good note. TIL that one can set the alternative text of a pseudo element by suffixing a slash and string. However, from my testing, this does not work for hiding an element from a screen reader using an empty string value. 😞

Are you able to achieve a different outcome where the tab icon is hidden from the screen reader?

fluiddot commented 3 months ago

Are you able to achieve a different outcome where the tab icon is hidden from the screen reader?

I haven't managed to hide it from the screen reader. I tried to render the icon in a different way by using the icon tab property, but the component only renders the icon in that case (reference).

Not sure if it would be feasible but I wonder if we could use isAccessibilitySupportEnabled to determine when to apply the class name components-tab-panel__tabs--assistant that renders the icon.

dcalhoun commented 3 months ago

Not sure if it would be feasible but I wonder if we could use isAccessibilitySupportEnabled to determine when to apply the class name components-tab-panel__tabs--assistant that renders the icon.

A good idea. I'm not sure the impact warrants the complexity, currently. My suggestion would be to either:

A. Leave it as-is, considering it low-impact; B. Or adding a descriptive alternative text, e.g., Studio Assistant icon.

Would you be fine with either of those? If so, do you have a preference?

fluiddot commented 3 months ago

Would you be fine with either of those? If so, do you have a preference?

Yeah, let's keep it as-is. I don't think it will have a major impact in a11y.