Screen readers skip Angular grid checkbox, row number, and flair icon cells

[Stephanie Leary]

While testing the icon accessibility fixes for bug 1818086 during today's code review session, Jane discovered that the screen reader completely skipped over the first three cells in each grid row: the selection checkbox, the row count, and the flair icon. This is because those three cells lack the role="gridcell" attribute.

This is a severe bug for screen reader users, as it prevents them from selecting rows in any grid.

Branch coming up.

[Stephanie Leary (stephanieleary)]

Branch here: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp2038230-gridcell-roles

[Jane Sandberg (sandbergja)]

Thanks, Stephanie! Pushed to rel_3_10 and above.

[Jane Sandberg (sandbergja)]

Noting that this issue affected VoiceOver, but not NVDA. It seems that VoiceOver takes the aria standard very literally here -- "Rows contain cell or gridcell elements" -- and tosses out anything in a row that had some role other than cell or gridcell. NVDA was more forgiving of elements with unexpected roles within a row.

[Stephanie Leary (stephanieleary)]

I had a feeling it was specific to VoiceOver, because we had not encountered this in previous testing. Thanks for confirming!