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

[orion-cengage]

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

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>...

[silvalaura]

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

[orion-cengage]

I have illustrated in Figma how the caption should appear both when the table has borders turned on and off.

Figma link

[olehnoskov-cengage]

Need to add a new prop or possibility, easily adding padding for the table.

[nikitaorliak-cengage]

Test links: https://next--upbeat-sinoussi-f675aa.netlify.app/ and https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app/?path=/story/accordion--default

Tested on: Mac OS Sequoia in Chrome, Firefox, and Safari Windows 10/11 in Chrome and Firefox

Bugs: Everything is working as expected. No bugs found.