Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

A11y Fail: Table + Data grid - Need to use Caption as title of table #1395

Open
orion-cengage opened this issue Aug 21, 2024 · 1 comment · May be fixed by #1541
Open

A11y Fail: Table + Data grid - Need to use Caption as title of table #1395

orion-cengage opened this issue Aug 21, 2024 · 1 comment · May be fixed by #1541
Assignees
@chris-cedrone-cengage
Labels
a11y Issues related to accessibility blocked Blocked by another issue bug Something isn't working react-magma-docs Improvements or additions to documentation react-magma-dom Tasks related to react-magma-dom

Comments

@orion-cengage
Copy link
Contributor

orion-cengage commented Aug 21, 2024 •
edited by silvalaura
Loading

CENG_1953

https://react-magma.cengage.com/version/4.5.0/api/datagrid/

https://react-magma.cengage.com/version/4.5.0/api/table/

Issue:

It is a best practice to ensure that all <table> elements have a <caption> element. A caption functions like a heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it’s about and decide if they want to read it. If the user uses “Tables Mode”, captions are the primary mechanism to identify tables.

Suggestion:

We need to document and make it easy for devs to use "caption" attribute to title tables and data grids. Additionally, we need to let them know if they want the caption to also be a heading within the structure of the page, they can do both at the same time.

<table><caption><h2>This is the title of the table</h2></caption>...
@orion-cengage orion-cengage added bug Something isn't working react-magma-dom Tasks related to react-magma-dom react-magma-docs Improvements or additions to documentation a11y Issues related to accessibility labels Aug 21, 2024
@silvalaura
Copy link
Collaborator

silvalaura commented Aug 21, 2024 •
edited
Loading

We should add a new prop tableTitle to Table and DataGrid to accept a heading node that will appear above the table. We should provide default styling, but we should support any heading type.

We need to update every example in our docs site to use the heading, and they should each be unique: Basic Usage Table, Vertical Borders Table, etc.

Acceptance Criteria

  • New prop exists for Table and DataGrid
  • Docs have been updated with unique headings

@chris-cedrone-cengage chris-cedrone-cengage self-assigned this Nov 8, 2024
@chris-cedrone-cengage chris-cedrone-cengage moved this from To Do to In Progress in React Magma Nov 8, 2024
@chris-cedrone-cengage chris-cedrone-cengage linked a pull request Nov 8, 2024 that will close this issue
Open
5 tasks
@silvalaura silvalaura linked a pull request Nov 8, 2024 that will close this issue
feat(Table, Datagrid): Added new tableTitle prop #1541
Open
5 tasks
@silvalaura silvalaura added the blocked Blocked by another issue label Dec 9, 2024
@silvalaura silvalaura moved this from In Progress to Blocked in React Magma Dec 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@chris-cedrone-cengage chris-cedrone-cengage

Labels
a11y Issues related to accessibility blocked Blocked by another issue bug Something isn't working react-magma-docs Improvements or additions to documentation react-magma-dom Tasks related to react-magma-dom
Projects
React Magma
Status: Blocked
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(Table, Datagrid): Added new tableTitle prop cengage/react-magma
3 participants
@orion-cengage @chris-cedrone-cengage @silvalaura