[Bug]: DetailsList has aria-required-children issue when testing a11y

[clgutier]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11370H @ 3.30GHz
    Memory: 10.76 GB / 31.84 GB
  Browsers:
    Edge: Spartan (44.22621.1105.0), Chromium (107.0.1418.62)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

yes

Reproduction

https://codepen.io/mizeljko/pen/oNMYOdo

Bug Description

Actual Behavior

Used the example codepen provided in documentation: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/grouped

When testing with axe-playwright automated tests, DetailsList fails with error aria-required-children. Verified the same happens in minimal repro for both DetailsHeader and DetailsRow:

To repro I used axe DevTools extension (can also repro if using playwright to test the component)

Note: Issue is still not shown in A11y Insights tool since it doesn't have most recent version of axe-core. Axe-core rules where recently updated, which is why this error is showing up now.

Expected Behavior

Component shouldn't fail with aria-required-children.

Logs

No response

Requested priority

Blocking

Products/sites affected

UCI / Dynamics

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[dbjorge]

My team also hit this in Accessibility Insights' own usage of DetailsList and investigated a bit further. The specific issue is that DetailsRow's main container has role="row", but it contains a child which has role="checkbox", which is not one of the roles that ARIA lists as a valid "required owned" role for a row. The specific checkbox element in question comes from this code in DetailsRow.base.tsx:

fluentui/packages/react/src/components/DetailsList/DetailsRow.base.tsx

Lines 388 to 393 in 92710eb

	<span
	role="checkbox"
	className={this._classNames.checkCover}
	aria-checked={isSelected}
	data-selection-toggle={true}
	/>

It's not clear to me what the purpose of this element actually is. I originally thought it was meant to implement the control to select a row when the DetailsList has a selection mode set, but that doesn't seem to be the case - that's handled separately in the block that begins on L342 with a showCheckbox check, which uses a more correct ARIA role setup with a role="gridcell" container around the checkbox. It looks like the problematic checkbox control actually renders with display: none in all the cases I saw among the example controls. The code suggests that it's intended to render with display: block if getDetailsRowStyles receives anySelected: true, which in turn looks like it's intended to happen when the list's selectionState contains isSelectionModal: true, but it doesn't look like this works as intended in practice; the DetailsList.Documents.Example.tsx control used as the primary DetailsList example still ends up with display: none on this element even when the "Enable Modal Selection" toggle for the example is toggled on.

There are two issues happening here causing the issue to be triggered, one on the fluentui side and one on the axe-core side. Both should be fixed individually:

• This role="checkbox" element shouldn't be a direct child of the role="row" container. If it were ever to actually render without display: none, it would be confusing for a screen reader user - it would represent an element with the role of an interactive checkbox control which isn't focusable or contained in a cell. I'm not sure why it exists at all - it seems redundant with the more correctly marked up checkbox control earlier in the row implementation.
• Given that it is rendering with display: none in practice, axe-core shouldn't be flagging it as an issue because it isn't visible in the accessibility tree. This is tracked as False positive in aria-required-children "unknown" path for child not in accessibility tree with aria-hidden="true" dequelabs/axe-core#3850.

[smhigley]

Most of these are false positives, as @dbjorge mentioned (also you beat me to logging that axe-core bug, thanks! :D)

I've created a PR to remove the extra checkbox: #26519. Don't know how I never noticed it before, and it doesn't functionally do anything. It's apparently been around forever, who knows why it was originally added 😂