Improve BasicTable checkbox aria-label text

[alisonelizabeth]

Currently, when selection is defined, the BasicTable component adds an aria-label to each checkbox per row with the text: "Select this row".

eui/src/components/basic_table/basic_table.js

Line 864 in 1b7c29c

<EuiI18n token="euiBasicTable.selectThisRow" default="Select this row">

Ideally, this text would provide more context for screenreaders.

Suggested text from @barlowm:

"Select the <name_of_row> row."

Related issue: elastic/kibana#43842

[cjcenizal]

This might be resolved by #2335. That issue notes the need to be able to specify an "identifying cell" per row, by adding a <th scope="row">.

If we do this for each row in a table, then the checkbox in that row may not need any identifying information in its aria-label. For example, if it has aria-label="Select row" then I believe the screen reader would announce the content of the <th scope="row"> cell and then "Select row", thus allowing the user to associate the checkbox with the row they're in.

[cjcenizal]

@barlowm Could you please confirm the above?

[myasonik]

Not Mike but I can tag in here maybe.

In my experience testing tables, the short answer is "it depends" so I'd stick with having the info there (and as long as it's not the first thing that's read out, it shouldn't be intrusive either).

Depending on how the user navigated to the cell and on the environment (browser, screen reader, OS, etc) they're running, exactly what's read out will be different so providing context at the closest point of interaction is often the most helpful.

If you wanted to, you could move the identifying bits to an aria-describedby if that's technically easier and should provide similar levels of coverage while also demoting that info to a lower level of priority for the user.