Accessibility: Table headers are difficult to navigate using screen readers

[yousoph]

Table headers are in separate table element from table content, which is confusing to navigate for screen readers

How to reproduce the bug

1. Create a table chart
2. Add the chart to a dashboard
3. Use a screen reader to navigate to the table chart and navigate within the table

Expected results

User should be able to understand the table headers as well as the table content https://www.w3.org/TR/WCAG22/#info-and-relationships

If it's not feasible to use tags for headers, then we can use aria-label in the cells with the appropriate column header info or aria-labelledby with the header id.

Actual results

Screen reader reads the table content but not any of the headers

Screenshots

Environment

(please complete the following information):

• browser type and version:
• superset version: master
• python version: python --version
• node.js version: node -v
• any feature flags active:

Checklist

Make sure to follow these steps before submitting your issue - thank you!

• [ ] I have checked the superset logs for python stacktraces and included it here as text if there are any.
• [x] I have reproduced the issue with at least the latest released version of superset.
• [x] I have checked the issue tracker for the same issue and I haven't found one similar.

Additional context

Currently, when a Table Chart is created, the table headers are added to a

element, and the rows are added to another element. Using a single HTML element to display the Table chart content should help address this issue

nicocarlier commented 8 months ago

@yousoph @eschutho I can take this one if it's available.

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[nicocarlier]

@yousoph @eschutho I can take this one if it's available.