[Feature]: a11y: custom row aria labels for checkbox to satisfy WCAG's 3.3.2 success criterion

[dgreene1]

Library

React / v8 (@fluentui/react)

Describe the feature that you would like added

A new prop or data attribute that allows us to supply a function that will customize the aria label for the cell that contains the select within DetailsList.

Without this capability, it is impossible to meet the WCAG's Success Criterion 3.3.2: https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html

In the case of radio buttons, checkboxes, comboboxes, or similar controls that provide users with options, each option must have an appropriate label so that users know what they are actually selecting

As @jendowns clarified in https://github.com/microsoft/fluentui/issues/16450, not having the ability to change the label per row is problematic since the user doesn't know what they're selecting if every row is read as "Row X unselected." That issue was closed and I don't think it should have been for the reasons I'm about to share.

A gnarly workaround was provided but I have reservations about how this workaround will work if future versions of Fluent cause regressions. My concern from that stems from the fact that the use of onRenderRow and DetailsRow is essentially using internals mechanisms that might be changed. It feels dangerous to be using internals.

Moreover, it adds undue burden on the consumer. Any burden to meet accessibility issues makes it more challenging for consumers to meet a11y needs. I'd like to make it as easy as possible to make our websites accessible.

Have you discussed this feature with our team

No response

Additional context

No response

Validations

• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[gouttierre]

@dgreene1 - Thank you for filing this item with us. I'll add this to our contributors queue as it’s lower on our priority list and we’re likely not going to get to it for a while as we’re currently focused on larger coherence work items and enhancements to our performance. In the meantime, if you want to contribute towards this request, please share your PR and our dev team will review it.

cc @smhigley - looping you in as you are our SME on a11y.

[smhigley]

Currently if you set one of the columns to function as a rowheader, the cells in that column will function as a label for the checkbox in the same row automatically.

It looks like DetailsRow also supports the checkButtonAriaLabel prop (something I missed earlier), so you could define a string per-row that way:

onRenderRow={(props: IDetailsRowProps) => {
    return <DetailsRow {...props} checkButtonAriaLabel="custom label based on props"  />;
}}

I don't think adding something like a getRowCheckboxLabel function prop would be much more ergonomic than the above, so I'd lean against changing the DetailsList API to do so.

Let me know if that makes sense, and if you have any other questions!

[dgreene1]

I guess it would depend on what is in IDetailsRowProps. If it's the value for that row of the table, then yes it would be flexible enough to provide a unique value per row, which would in fact meeting WCAG 3.3.2. I don't have the time to investigate that currently since my team has elected to use another component library that they feel will allow us to meet our accessibility targets more quickly. I will close this ticket and if someone else wishes to reopen it, they can.