Ensures ARIA attributes are allowed for an element's role for fabric DetailsList - Grouped.

[VivianSi233]

Library

React / v8 (@fluentui/react)

System Info

Package version(s): "@fluentui/react": "8.68.2",
Browser and OS versions: Chrome and Windows 10

Are you reporting Accessibility issue?

yes

Reproduction

https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/grouped

Bug Description

Go to https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/grouped, run Accessibility Insights for Web with FastPass, check actual result.

Actual Behavior

ARIA attributes are not allowed for an element's role.

Title: WCAG 4.1.2: Ensures ARIA attributes are allowed for an element's role (div[aria-rowindex="2"]) Tags: Accessibility, WCAG 4.1.2, aria-allowed-attr

Issue: Ensures ARIA attributes are allowed for an element's role (aria-allowed-attr - https://accessibilityinsights.io/info-examples/web/aria-allowed-attr)

Target application: Fluent UI - Controls - React - DetailsList - Grouped - https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/grouped

Element path: div[aria-rowindex="2"]

Snippet:

How to fix: Fix any of the following: ARIA attributes are not allowed: aria-expanded="true", aria-level="1"

Environment: Microsoft Edge version 101.0.1210.47

====

This accessibility issue was found using Accessibility Insights for Web 2.32.0 (axe-core 4.4.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Expected Behavior

Ensures ARIA attributes are allowed for an element's role

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

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

[VivianSi233]

Bug is repro on https://df.security.microsoft.com/securityreports?tid=596ade3a-1abe-4c5b-b7d5-a169c4b05d4a,

[gouttierre]

Thanks for filing this issue with us. To set expectations the developers will review this issue once capacity allows.

[espeo196]

Is there any update on this bug? My team is facing it as well and we'll need it to be fixed to be compliant. I was also able to repro it from the fluent doc site: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/grouped

[jendowns]

Hello everyone! Just checking in here -- are there any updates on this bug? My team is facing this issue as well. Please feel free to reach out to me internally via Teams & I can share the bug impact. Thank you!

[caratyler]

We are also facing this issue. Is this a return of the false positive that was previously fixed? https://github.com/dequelabs/axe-core/issues/2794

[nekale]

Was this issue resolved? I still see this issue for our service. Please let me know how to resolve the same. @fabricteam

[smhigley]

One of the two original disallowed attributes we have removed since this was filed -- aria-level.

I opted to keep aria-expanded, since we do actually have expanding rows, so it provides user benefit to expose that state, and the screen reader support is actually reasonable. For screen reader/browser combos that do not support it, there is no negative user impact to having the attribute.

The reason I didn't opt for treegrid semantics for Grouped DetailsList (as we do for GroupedList) is because treegrid impacts the support for virtual-cursor-mode grid navigation, and exposing column/row associations. Since Grouped DetailsList has column headers and overall functions more like a grid/table that GroupedList does, I thought preserving that behavior was in the best interest of users.

There is still that automated error, but aside from that this combination of roles and attributes was the best in my opinion for the end user. In v9, when we move away from row focus to cell focus, this will no longer be an issue. In the meantime, I'd suggest closing the bug against your team, or setting Accessibility Insights/axe-core to ignore that test on that UI.

Hope that helps!

[msft-fluent-ui-bot]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.