fix(chart table in dashboard): improve screen reading of table

[ncar285]

SUMMARY

Enhancing Accessibility with Unified Table Structure and Sticky Header

This PR addresses accessibility concerns by merging the header and body of our tables into a single unified structure. This change significantly improves screen reader compatibility, ensuring a more inclusive user experience. Previously, the header and body of a chart were seperate tables. Visually this worked but caused issues with screen reader functionality.

Key Change:

• The table now consists of a single, unified structure, as opposed to separate elements for the header and body. This enhances accessibility, particularly for screen reader users.
• The header is made sticky using CSS, allowing it to remain visible while the table body is scrollable.

Technical Challenge:
A notable challenge was maintaining a scrollable body while keeping the header fixed. Setting overflow directly on tbody proved unfeasible. Wrapping tbody in a div with an overflow disrupted the column grouping, as the table would then interpret the entire tbody as a single column. The implemented solution achieves the desired layout without compromising the table's integrity or accessibility.

TESTING INSTRUCTIONS

1. Navigate to a page featuring the modified table structure.
2. Use a screen reader to ensure that the table content is read correctly and in a logical order and doesn't read end of table early.
3. Scroll through the table to check that the header remains fixed while the body is scrollable.
4. Visually inspect the table across different browsers for consistent rendering.

ADDITIONAL INFORMATION

• Has associated issue: Accessibility: Table headers are difficult to navigate using screen readers  #26177
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[github-actions]

Congrats on making your first PR and thank you for contributing to Superset! 🎉 ❤️

We hope to see you in our Slack community too! Not signed up? Use our Slack App to self-register.

[eschutho]

@ncar285 looks like there are some linting errors that are causing the tests to fail. I can comment on some in the PR, but you can also run npm run lint-fix from superset-frontend folder and that will catch some of the indentation ones.

[eschutho]

Thanks @ncar285! Looks really good. Just some small suggestions for linting and cleanup.

[codecov]

Codecov Report

Attention: 1 lines in your changes are missing coverage. Please review.

Comparison is base (46e6778) 69.18% compared to head (8d11cc1) 69.16%.
Report is 219 commits behind head on master.

Files	Patch %	Lines
...ugin-chart-table/src/DataTable/hooks/useSticky.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #26453      +/-   ##
==========================================
- Coverage   69.18%   69.16%   -0.03%     
==========================================
  Files        1945     1948       +3     
  Lines       75948    76037      +89     
  Branches     8460     8493      +33     
==========================================
+ Hits        52546    52591      +45     
- Misses      21217    21266      +49     
+ Partials     2185     2180       -5     

Flag	Coverage Δ
javascript	56.50% <0.00%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[yousoph]

/testenv up

[github-actions]

@yousoph Ephemeral environment spinning up at http://54.184.85.44:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[eschutho]

This looks great @ncar285. I'll leave the PR open for testing, and then we'll merge. Thank you!

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[kgabryje]

@ncar285 @eschutho I think after this PR the Totals are not sticky anymore 🙁

Screen.Recording.2024-01-31.at.17.01.57.mov

[eschutho]

Thanks for catching @kgabryje! We'll take a look. 🙏

[ncar285]

Yes thanks for pointing that out!

…

On Fri, 2 Feb 2024 at 10:29, Elizabeth Thompson ***@***.***> wrote: Thanks for catching @kgabryje <https://github.com/kgabryje>! We'll take a look. 🙏 — Reply to this email directly, view it on GitHub <#26453 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A73OXZ2RN2FQA4OHHWRBPGTYRQCKLAVCNFSM6AAAAABBVVZRRKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRSGI3TQMJRGI> . You are receiving this because you were mentioned.Message ID: ***@***.***>