Bug 214003 – AX: Radio button input does not announce full label

• Component: Accessibility
• Status: NEW

[Jeff Miller]

Created attachment 403611 [details]
VO_RadioButton_AndMoreItems

The label/for accessible name is not being announced in full by VoiceOver. This is occurring with multiple spans being used to create a styled label.

Example Code:

<input name=“selector” id=“selector_2" type=“radio”>
<label for=“selector_2">
  <span class=“column”>
    <span>256GB<sup>1</sup></span>
    <span>Caption ipsum dolor</span>
  </span>
</label>

.column {
  display:flex;
  flex-direction:column;
}

VoiceOver announces the accessible name as "256GB1 and one more item"

VoiceOver announces the entire label:
– Removing the <sup> element
– Removing display:flex
– Added aria-labelledby to the input

[Radar WebKit Bug Importer]

<rdar://problem/65144885>

[James Craig]

Created attachment 403624 [details]
test case

[James Craig]

Related to bug 150176

[James Craig]

WebKit Accessibility Inspector has the full label, but the Mac platform Accessibility Inspector shows no label exposed to the AX API.

[James Craig]

If you change the flex-direction from column to row, VO reads the whole label, which is on one line now. It seems the reason this is getting a partial label is that WebKit is not exposing anything, so VO tries to repair/avoid the WebKit bug by speaking the nearest line of text as the label.

[James Craig]

Disregard the last comment about `flex-direction: row;` I might've had a typo because I'm not able to verify those results anymore.