Fluentui: [DetailsList] ariaLabelForSelectAllCheckbox adds an aria-describedby instead of a aria-label - which results to the select all checkbox to not have a name property

[satbai]

Bug Report

• __Package version(s)__: latest
• __Browser and OS versions__: all

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? No
Requested priority: Normal

Describe the issue:

Adding ariaLabelForSelectAllCheckbox on the DetailsList component will actually add an aria-describedby instead of aria-label, therefore the name property of the select all checkbox will not get added and the element does not meet the Microsoft accessibility standard.

Actual behavior:

Expected behavior:

ariaLabelForSelectAllCheckbox should add an aria label that will provide a name property for the element.

Alternatively, the DetailsList component could add a default aria-label for the element if it's not provided through the props. "Select all" would be a good option and cover most of the cases.

If applicable, please provide a codepen repro:

https://developer.microsoft.com/en-us/fabric#/components/detailslist

[ThomasMichon]

@satbai We can't use an aria-label here because the aria-label will then also be read as the name of the column, which is not desirable. The aria-describedby tells the user what the checkbox will do, while the checkbox's own aria-label (settable via ariaLabelForSelectionColumn) becomes the column header name.

[natalieethell]

Thanks for your issue! As Thomas mentioned above, if you'd like to specifically set the aria-label, you can utilize ariaLabelForSelectionColumn. We don't have a default for ariaLabelForSelectionColumn due to localization concerns, but we do have it set on our DetailsList demo pages.

Feel free to let us know if you have any other considerations.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!