Select with checkbox input has axe violation

[KevinFCormier]

trafficstars

Describe the issue. What is the expected and unexpected behavior? Potential accessibility issue. A recent change in @patternfly/react-core changed the way the Select component with checkboxes is rendered. We use jest-axe to scan our project, and this error came up:

Certain ARIA roles must contain particular children (aria-required-children)

Fix any of the following:
Required ARIA child role not present: option



You can find more information on this issue here: 
https://dequeuniversity.com/rules/axe/4.2/aria-required-children?application=axeAPI

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool. With the Select Checkbox input example on @patternfly/react-core version 4.128.2, when the select is expanded, it's rendered like this:

<ul class="pf-c-select__menu" role="listbox" aria-label="Select Input">
  <label class="pf-c-check pf-c-select__menu-item pf-m-description">
    <input id="pf-random-id-0-Active" class="pf-c-check__input" type="checkbox" />
    <span class="pf-c-check__label">Active</span>
    <div class="pf-c-check__description">This is a description</div>
  </label>
  ...
</ul>

If you switch the @patternfly/react-core version back to 4.121.1, it used to be rendered like this:

<fieldset aria-label="Select Input" class="pf-c-form__fieldset">
  <label class="pf-c-check pf-c-select__menu-item pf-m-description">
    <input id="pf-random-id-0-Active" class="pf-c-check__input" type="checkbox">
    <span class="pf-c-check__label">Active</span>
    <div class="pf-c-check__description">This is a description</div>
  </label>
  ...
</fieldset>

I wasn't able to track down when exactly the change occurred, but it seems like it might be causing an accessibility problem.

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around? Bug. Not a blocker but wanted to bring this to the attention of the PatternFly team.

What is your product and what release version are you targeting? RHACM. No specific timeline for a fix is requested.

[KevinFCormier]

@jessiehuff I couldn't find another issue for this already, but maybe you're already aware of it? Not sure if it causes real issues with a screen reader or not.

[jessiehuff]

Thanks for catching it! 🙂 Sometimes screen readers are able to make a guess when roles are missing (for example, it doesn't seem to affect the VO experience significantly). However, some screen readers don't do this very effectively so it's still important to follow expected role patterns and make sure that each of the options has role "option" here. We're in the process of updating our versioning for the Axe script we use to test our PRs so this issue could hopefully be included in that effort.

[tlabaj]

This should be fixed with the new implementation of the Select. please let us know if you still have issues once you upgrade.