Description
🐛 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
Metadata
Assignees
Type
Projects
Status
Done