delegatesFocus breaks aria-describedby in fast-components

[litteredwitherrors]

🐛 Bug Report

When the delegatesFocus shadow option is set to true on a component that passes the aria-describedby to a shadow element, when the component receives focus, certain audible assistive technologies will not read corresponding descriptor element.

Google screen reader will read the descriptor.

Potentially effected components:

• fast-anchor
• fast-avatar
• fast-breadcrumb-item
• fast-button
• fast-combobox
• fast-number-field
• fast-text-field
• fast-toolbar

💻 Repro or Code Sample

These can be replicated by running fast-components locally and comparing the behavior of fast-button when shadowOptions: { delegatesFocus } is set to true or false when read by Microsoft Narrator or Apple VoiceOver.

🤔 Expected Behavior

<p id="descriptor">Helpful information</p>
<fast-button aria-describedby="descriptor">Button</fast-button>

When the fast-button receives focus, it should read the element with the corresponding ID's inner text (i.e. "Helpful information") when focus is delegated.

😯 Current Behavior

Apple VoiceOver does not read aloud the paragraph element's text "Helpful information" when focus is delegated. Once delegatesFocus is set to false it will be read by the screen reader.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: MacOS
• Browser: Microsoft Edge, Google Chrome, Apple Safari
• Version 11.5

[chrisdholt]

I think this comes down to an existing platform level problem that we may need to find a workaround for. I mentioned to @EisenbergEffect and @nicholasrice prior, so tagging them here as FYI. On the standards side, this seems to be related to WICG/webcomponents#917 and I think that API would help address this. Unfortunately it seems like these are currently being addressed per attribute so it may take some time for this to populate. We should consider if there is a clear path towards how this will be handled and look to implement our own solution in the meantime if necessary.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[janechu]

Unfortunately @microsoft/fast-components has been deprecated for some time.