Allow aria-selected for role=gridcell

[aubreyquinn]

Describe the bug

I am using a grid with gridcells and the primary mechanism for deciding if a row was selected is via the gridcell.
According to this reference (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected), aria-selected is a compatible attribute with the gridcell roll.

To Reproduce
Steps to reproduce the behavior:

1. Go to the stackblitz link provided.
2. Open the preview in a different tab.
3. Run FastPass in the Accessibility Insights web browser extension.
4. See error

CodePen repro example

https://stackblitz.com/run?file=src%2Fexample.tsx

Expected behavior

No error from FastPass.

Screenshots

Context (please complete the following information)

System:
OS: Windows 11 10.0.22631
CPU: (16) x64 AMD EPYC 7763 64-Core Processor
Memory: 42.17 GB / 63.95 GB
Browsers:
Edge: Chromium (131.0.2903.48)
Internet Explorer: 11.0.22621.3527
npmPackages:
@fluentui/react: ^8.112.8 => 8.115.6
@fluentui/react-components: 9.38.0 => 9.38.0
@fluentui/react-hooks: ^8.6.33 => 8.6.36
@fluentui/react-icons: ^2.0.221 => 2.0.227
@fluentui/react-portal-compat: ^9.0.110 => 9.0.128
@types/react: ~17.0.2 => 17.0.75
@types/react-dom: ~17.0.2 => 17.0.25
react: ~17.0.2 => 17.0.2
react-dom: ~17.0.2 => 17.0.2

Are you willing to submit a PR?

yes

Did you search for similar existing issues?

yes

Additional context

[v-sharmachir]

Hi @aubreyquinn, opening the repro link above is redirecting to the stackblitz homepage, and we are not getting the page as per screenshot. Can you help us with that to further investigate the issue.

[aubreyquinn]

Hi @v-sharmachir , does this link work? https://stackblitz.com/edit/l2nmm4?file=src%2Fexample.tsx

[v-viyada]

Hi @aubreyquinn, as per latest document for aria-checked, it is not valid for role=gridcell. It looks to be issue with fluent ui DataGrid component. Please refer open issue microsoft/fluentui#31073

[joestegman425]

Hi @aubreyquinn,

As Vikash mentions, the issue is the row=gridcell is setting aria-checked (vs. aria-selected per your notes). While aria-selected is allowed for row=gridcell, aria-checked is not. I noticed the Fluent Grid header row uses aria-checked where the other rows use aria-selected. As such, this looks to be a bug in the Fluent UI Grid header. Can you confirm?

Thanks,
Joe

[smhigley]

Hi all! The reason we use aria-checked instead of aria-selected is because our multiselect grid can result in a mixed-state checkbox in the header cell. Only aria-checked supports that state; aria-selected is not sufficient. Since aria-checked does have some practical support and actually provides a better and more informed user experience than aria-selected in practice, we use it because the priority of constituencies puts end users above authors, browser devs, and spec purity 😅.

There is currently an issue open on the ARIA spec to add aria-checked as an allowed prop on role=gridcell (w3c/aria#1960), and it has general consensus from the working group to proceed. The ball is actually in my court to push it forward, it just got kinda deprioritized because of other efforts which is on me 😅.

Would Accessibility Insights be at all interested in removing the error for this attribute in the meantime, since it does no harm? I'd understand either way, TBH.

[joestegman425]

Hi Sarah,

That context is helpful and hopefully you can get the ARIA spec updated.

Related to the error message, Accessibility Insights for Web uses Deque's axe-core as the detection engine and the error in question comes from axe-core. As such, similar to your ARIA work, you will need also work with Deque to have them remove the error. Note that the axe-core implementation is in a public repository.

Joe