alphagov / reported-bugs

Tracking bugs in browsers, assistive technologies and operating systems that have been reported by GDS
5 stars 2 forks source link

VoiceOver not announcing legend hint with aria-describedby if first input has hint #50

Open NickColley opened 4 years ago

NickColley commented 4 years ago

Upstream bug: https://bugs.webkit.org/show_bug.cgi?id=208050#add_comment Date: 2020-02-21 Reported by: @hannalaakso and @nickcolley Related to: https://github.com/alphagov/govuk-frontend/issues/1696


Overview

The hint text for the aria-describedby on the input type="checkbox" supersedes the hint text for the aria-describedby on the fieldset. So the user only gets one hint read to them when they jump to the input through the tab index – the one on the input, rather than the legend.

  1. Navigate to https://output.jsbin.com/juyaquq
  2. Tab to first input

Minimal test case

<fieldset aria-describedby="confirm-nationality-hint">
    <legend>
        What is your nationality?
    </legend>
    <span id="confirm-nationality-hint">
      Select all options that are relevant to you.
    </span>
    <br>
    <input id="confirm-nationality" name="confirm-nationality" type="checkbox" value="british-nationality" aria-describedby="confirm-nationality-item-hint">
    <label for="confirm-nationality">British</label>
    <span id="confirm-nationality-item-hint" class="govuk-hint govuk-checkboxes__hint">
      including English, Scottish, Welsh and Northern Irish
    </span>
    <br>
    <input name="confirm-nationality" type="checkbox" value="irish-nationality" aria-describedby="confirm-nationality-2-item-hint">
    <label class="govuk-label govuk-checkboxes__label" for="confirm-nationality-2">Irish</label>
    <span id="confirm-nationality-2-item-hint" class="govuk-hint govuk-checkboxes__hint">
      including from Northern Ireland
    </span>
    <br>
    <input id="confirm-nationality-3" name="confirm-nationality" type="checkbox" value="other-country-nationality" data-aria-controls="conditional-confirm-nationality-3">
    <label for="confirm-nationality-3">Citizen of a different country</label>
</fieldset>

JSBIN: https://output.jsbin.com/juyaquq

Expected result

The legend is announced, followed by the legend hint, then the input and finally the input hint.

Actual result

The legend is announced, then the input and finally the input hint.