Fluentui: DetailsList Checkboxes dont have accessible name

[taparikh]

Codepen demonstrating the issue

https://codepen.io/Tanvi_p/pen/NZmLrO

Actual behavior:

The checkboxes in the DetailsList Fabric component do not have a legible accessible name (we see boxes in a garbled language) when tested using the Accessibility Insights Chrome Extension(Test - Custom Widgets: Design Pattern) in our environment. We have filled out all the aria props as provided in the documentation. We also tested the codepen provided on the office-ui website; updated it with the props we are using & tried the same accessibility test. This time we were able to see the appropriate accessible name for the checkbox.

The value passed into prop "checkButtonAriaLabel" actually ends up as the title attribute of the root div on the DetailsRow Checkbox.

Expected behavior:

The checkboxes in the DetailsList Fabric Component should have an accessible name.

Documentation describing expected behavior

Please find the screenshots below that demonstrate this behavior :

In our local environment.

In codepen.

[Vitalius1]

@taparikh thanks for submitting this issue and I am happy to tell you that I already submitted a fix for this issue that was brought to our attention on our Fabric React Teams channel. #9751 was merged and makes sure if you pass checkButtonAriaLabel it ends up being assigned to aria-label instead of title. Here is a codepen you can try run your accessibility test on it to confirm that it was fixed.

[taparikh]

@Vitalius1 Thanks for your note - I am currently working on your suggestions & will get back to you if any questions

[taparikh]

Hi @Vitalius1 - I updated my packages but im still getting the same error as before with garbled names for the checkboxes.

I did test the codepen you provided and it behaves exactly as you described. Please let me know my next steps

[Vitalius1]

Which checkbox is now flagged? The one in the header or the first row? Did you try to actually use an AT (Narrator, JAWS, NVDA) to see what is the actual readout? There are multiple layers around that checkbox and it might be possible that the Accessibility Insights tool is tripping on of the layer but when actually using a screenreader you hear the expected output.

[taparikh]

@Vitalius1 the checkbox that is flagged is the one associated with the row. Just wanted to doublecheck that if this test passes in the Narrator does that imply that it is "accessible" and overrides the result of the Accessibility Insights Tool ?

[Vitalius1]

Yes, I would say that the Accessibility Insights Tool result is based of some static analysis and when it flags something it would require a confirmation with a real AT if the flag is not a false positive. After all the user is using the screenreader and not the Insights Tool.

[Vitalius1]

@betrue-final-final could you please make a quick pass over the DetailsList screenreader readout and confirm that we readout the row’s checkbox aria-label.

[qazizaahirah]

Same issue. Updating office fabric to higher version resolves the issue

[taparikh]

@Vitalius1 @betrue-final-final We tested it out with the new react updates & it works as expected. We can close this issue now.