feat: Improve AI assistant accessibility

[dcalhoun]

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

• Have you checked for TypeScript, React or other console errors?

[dcalhoun]

Wrapping an element leveraging Tailwind's sr-only class is necessary to avoid unexpected overflow scrolling for the top level document.

[dcalhoun]

Previously, the existing aria-hidden value introduced in #202 was not passed down to the child svg element.

[fluiddot]

LGTM 🎊 !

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

I understand this is a minor issue, as it can only be focused when navigating within the group.

[dcalhoun]

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]

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]

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]

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.