🐛 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