[Bug]: DataGrid applying aria attribute to the wrong element

[aubreyquinn]

Component

DataGrid

Package version

9.38.0

React version

17.0.2

Environment

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

Current Behavior

I am using the DataGrid component and when I run Accessibility Insights, I notice that aria-selected is applied to role=gridcell instead of on the input field inside of it.

Expected Behavior

I expect the aria attribute to be applied to the input field instead of the gridcell.

Reproduction

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

Steps to reproduce

1. Go to the Stackblitz URL.
2. Open the preview in another browser tab.
3. Run FastPass with Accessibility Insights.
4. Notice the error.

Are you reporting an Accessibility issue?

yes

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

Power Platform Environment Settings

Are you willing to submit a PR to fix?

yes

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.

[sopranopillow]

Hi @aubreyquinn this is a known issue, the following is the explanation:

aria-allowed-attribute error on DataGrid for aria-checked on select all gridcell
The aria-allowed-attr error for aria-checked is technically disallowed from role=gridcell, but we choose to include it for a few reasons

• The supported selection attribute, aria-selected, does not support a mixed-state value, unlike aria-checked.
  In general, we find better user feedback for checked semantics in multiselect scenarios
• It does not cause any harm to add it to the gridcell. Even when it is not supported, the checkbox within the cell exposes the state.
• These bugs should be marked as false positives if found through vendor testing or use the axe-core config to bypass those tests on those element selectors if using axe-core in a testing suite.

[aubreyquinn]

Hi @sopranopillow , I raised the issue with Accessibility Insights and they said: microsoft/accessibility-insights-web#7498 (comment)

[smhigley]

@aubreyquinn as Esteban mentioned, aria-checked is technically disallowed from role=gridcell, as the Accessibility Insights team said. However, there is no other allowed attribute that would support the information and interaction we use in the grid, which is why we've also been discussing adding it in the ARIA working group. Having it there does no harm and provides some practical benefit, which is why we have it (following the principal of prioritizing users over web authors over browser implementors over spec purity).

There's more information documented in our internal known issues wiki