Page MenuHomePhabricator

Considering `role=group` for CheckboxMultiselect- & CheckboxMultiselectInputWidget
Open, MediumPublic

Description

Similar to role=radiogroup on RadioSelect- & RadioSelectInputWidget we should consider [[ http://www.oaa-accessibility.org/examplep/checkbox4/ | using role=group ]] for CheckboxMultiselect- & CheckboxMultiselectInputWidget

Event Timeline

A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies.

Both CheckboxMultiselect and CheckboxMultiselectInputWidget satisfy this criteria, and so it makes sense to add the role.

However, when a group is used in the context of list, authors MUST limit its children to listitem elements.

I am not sure what this means, or if it applies to us. My understanding is that the CheckboxMultiselect is a list of checkboxes and so each instance of the checkbox within the div soup needs to be marked as a listitem.

<div class="oo-ui-widget oo-ui-widget-enabled oo-ui-multiselectWidget oo-ui-checkboxMultiselectWidget" aria-disabled="false" ROLE="GROUP">
  <div class="oo-ui-multiselectWidget-group">
    <label class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-multioptionWidget oo-ui-checkboxMultioptionWidget" aria-disabled="false">
      <span class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget" aria-disabled="false">
        <input tabindex="0" aria-disabled="false" class="oo-ui-inputWidget-input" value="" type="checkbox" ROLE="LISTITEM">
      </span>
      <span class="oo-ui-labelElement-label">Cat</span>
    </label>

    <label class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-multioptionWidget oo-ui-checkboxMultioptionWidget" aria-disabled="false">
      <span class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget" aria-disabled="false">
        <input tabindex="0" aria-disabled="false" class="oo-ui-inputWidget-input" value="" type="checkbox" ROLE="LISTITEM">
      </span>
      <span class="oo-ui-labelElement-label">Dog</span>
    </label>

    <label class="oo-ui-widget oo-ui-widget-disabled oo-ui-labelElement oo-ui-multioptionWidget oo-ui-checkboxMultioptionWidget" aria-disabled="true">
      <span class="oo-ui-widget oo-ui-inputWidget oo-ui-checkboxInputWidget oo-ui-widget-disabled" aria-disabled="true">
        <input tabindex="-1" aria-disabled="true" class="oo-ui-inputWidget-input" value="" disabled="" type="checkbox" ROLE="LISTITEM">
      </span>
      <span class="oo-ui-labelElement-label">Goldfish</span>
    </label>
  </div>
</div>

@Prtksxna [[ https://www.w3.org/TR/wai-aria/roles#listitem | The Roles Model: listitem ]]

Authors MUST ensure elements with role listitem are contained in, or owned by, an element with the role list or group.

doesn't provide any further insights.

One thing, that's definitely wrong in your code proposal, is changing the inherent role of input type=checkbox to listitem. You shouldn't change inherent role of the element as it carries checkbox per default.
listitem is here, if at all, meant for label. Although I'd test in screenreaders for possible side-effects.

One thing, that's definitely wrong in your code proposal, is changing the inherent role of input type=checkbox to listitem. You shouldn't change inherent role of the element as it carries checkbox per default.

Yep, makes sense.

Volker_E triaged this task as Medium priority.Jun 4 2018, 7:48 PM