[VoiceOver+Safari] Tooltips / aria-describedby on interactive elements are no longer read out by VO

[cee-chen]

NOTE: This is not an issue with EUI, this is an issue with VO+Safari and needs to be fixed by Apple, not by us.

Problem

Specific elements no longer automatically read out aria-describedby text in Safari+VO. This appears to be primarily the element, with mixed results from <button> elements, and other roles (such as img elements) have their aria descriptions read out immediately with no issue.

It appears that the description goes into a new "More context" menu (ctrl+option+command+/) which is a little baffling to me.

To Reproduce

https://codesandbox.io/s/elastic-spence-rl7y4k?file=/index.html

Go to the above link with Safari + VO, tab to the items in the browser pane. Not that the link and input do not read out its aria describedby text, whereas the other 2 do.

More context

Trevor and I noticed this while QAing #7373 (comment). It's reproducible on both EUI production as well as on EuiToolTip all the way back to v60, so it's definitely not caused by any Emotion or React 18 related changes.

This is only an issue on Safari/Webkit - Firefox+VO continues to read out aria-describedby with no issue.

Environment

• Operating System: MacOS Sonoma 14.1.1
• Browser: Safari 17.1
• Screenreading device: VoiceOver (no version, tied to OS)
• Server destination: Reproducible on latest production

[cee-chen]

@1Copenut Splitting this out to a new issue for tracking/discussion. It looks like the description now lives in a new "More context" menu (ctrl+option+command+/) which I have no idea how to navigate. Do you have any luck?

Based on the above, I wonder if Sonoma is what messed this up. I'm not sure whether we should file an issue with Webkit (https://bugs.webkit.org/) or Apple.

[1Copenut]

@cee-chen Good call splitting this to a separate issue. I know a little about the "More context" menu. Somewhere around Safari v17 (Ventura and Sonoma), Apple started requiring users to hunt for that more information. I tested our EuiTooltips on their own and in the tables, but neither announces the more context at all, like they're not semantically linked. I tested with all other pairings and found both to be working as expected, so it feels like an Apple bug.

Requiring users to press Ctrl + Opt + Cmd + / to access aria-describedby helpers feels overly difficult, but I couldn't find a lot of information about the why of this change.

The only other thing I can say for sure is on a personal site I use aria-describedby to associate error messages with inputs on a form. Those announced as I would expect after pressing the four-key chord, but that's an incomplete test.

[cee-chen]

Ahh interesting - I just updated the CodeSandbox link above to include an <input type="text"> with an aria-describedby. it's not working for me either on Safari+VO but it is working on FF+VO. I get the menu prompt again on Safari. 😕

[1Copenut]

I updated my comment because I mis-spoke. I think the default experience is now pressing a four-key chord after hearing "More context" in VO + Safari, or it doesn't announce at all. Someone was talking about this on the Web A11y Slack maybe a week ago or so, will take a look back and see if I can find the thread.

[cee-chen]

+1 to checking the a11y Slack! Does Apple/VO have any kind of forum for giving feedback on this? 🥲 I think what's most frustrating to me is that it's so inconsistent. Why announce aria-describedby for some elements but not others?

[1Copenut]

Adrian Roselli posted an issue ticket to Apple and a test page on CodePen. Our EuiTooltips do not announce even the "more information available" prompt when we wrap links, input fields, or some buttons in tooltips. I think we need to investigate our examples using as simple proofs of concept as we can get, and see if nested grouping might be the culprit, or we're seeing a further bug beyond what's been reported.

• Bug 262895 - AX: aria-describedby content hidden behind new interaction
• Testing Safari 17 accDesc Regression - CodePenIO

[cee-chen]

frustrated Safari noises This isn't specific to aria-describedby, but since we're on the topic of things going awry on Safari+VO - @1Copenut, do you mind testing production EuiDataGrid and confirming whether or not cell navigation is broken for you? When I tab to the datagrid body and try to use any of the arrow keys, I land up in totally unexpected places instead of the neighboring cells like I expect. It's almost as if VO is using screen reader navigation at all times for arrow keys instead of allowing users to manually specify the ctrl+option arrow key for navigation.

FWIW I'm also testing W3's datagrid example on Safari+VO (https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-grids/) and that behaves unexpectedly/brokenly for me with VO open vs not open as well.