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

DataTable TableContainer title/description cannot be referenced to label/describe Table (via aria-labelledby/aria-describedby) #3805

Closed
justindm234 opened this issue Aug 23, 2019 · 0 comments · Fixed by #11761
Closed

DataTable TableContainer title/description cannot be referenced to label/describe Table (via aria-labelledby/aria-describedby) #3805

justindm234 opened this issue Aug 23, 2019 · 0 comments · Fixed by #11761
Assignees
@joshblack
Labels
component: data-table severity: 1 https://ibm.biz/carbon-severity type: a11y ♿

Comments

@justindm234
Copy link

justindm234 commented Aug 23, 2019 •
edited
Loading

TableContainer does not define IDs for its title and description nodes so that they can be used to label/describe the Table (via aria-labelledby/aria-describedby).

Because of this, tables must either be labeled by title + description using a single ID on the TableContainer:
image

Or tables must use aria-label for labeling (which is not recommended by ARIA - "If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. " -https://www.w3.org/TR/wai-aria-1.1/#aria-label). This also makes it impossible to provide the screen reader a description for the table.

Without an aria-label or aria-labelledby attribute, JAWS uses the table's rows to label it:
image

Environment

Firefox ESR 60.8.0esr
JAWS Version 2019.1906.10 ILM

Detailed description

[email protected]
[email protected]

Steps to reproduce the issue

https://codesandbox.io/s/cannot-connect-tablecontainer-titledescription-to-table-b19fm

Additional information

  • Screenshots or code
  • Notes
@justindm234 justindm234 changed the title DataTable TableContainer title/description cannot be referenced to label/describe Table via aria-labelledby/aria-describedby) DataTable TableContainer title/description cannot be referenced to label/describe Table (via aria-labelledby/aria-describedby) Aug 23, 2019
@dakahn dakahn added this to the DataTable - A11y Project Team milestone Sep 30, 2019
@dakahn dakahn added priority: high severity: 1 https://ibm.biz/carbon-severity labels Sep 30, 2019
@dakahn dakahn modified the milestones: DataTable - A11y Project Team, Carbon WCAG Compliance Nov 21, 2019
@dakahn dakahn mentioned this issue Nov 22, 2019
Closed
asudoh added a commit to asudoh/carbon-components that referenced this issue Dec 3, 2019
@asudoh
fix(TableContainer): support id-ref for the header
8399c7f 
This change adds a capability to specify the element ID of the `<h4>`
in `<TableContainer>`. This allows application to set up our data table
so VoiceOver announces the content in such `<h4>` when it announces
"You are currently in a table" for `<table>`.

Fixes carbon-design-system#3805.
@asudoh asudoh mentioned this issue Dec 3, 2019
Closed
asudoh added a commit to asudoh/carbon-components that referenced this issue Dec 3, 2019
@asudoh
feat(TableContainer): support id-ref for the header
2678511 
This change adds a capability to specify the element ID of the `<h4>`
in `<TableContainer>`. This allows application to set up our data table
so VoiceOver announces the content in such `<h4>` when it announces
"You are currently in a table" for `<table>`.

Fixes carbon-design-system#3805.
@mattrosno mattrosno removed this from the ♿Carbon WCAG Compliance♿ milestone Dec 13, 2019
@joshblack joshblack mentioned this issue Mar 4, 2020
Closed
82 tasks
@tay1orjones tay1orjones moved this to 🕵️‍♀️ Triage in Design System Dec 10, 2021
@tay1orjones tay1orjones moved this from 🕵️‍♀️ Triage to ⏱ Backlog in Design System Jul 1, 2022
@joshblack joshblack mentioned this issue Jul 6, 2022
Merged
@joshblack joshblack moved this from ⏱ Backlog to 🏗 In Progress in Design System Jul 6, 2022
@kodiakhq kodiakhq bot closed this as completed in #11761 Jul 12, 2022
Repository owner moved this from 🏗 In Progress to ✅ Done in Design System Jul 12, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@joshblack joshblack

Labels
component: data-table severity: 1 https://ibm.biz/carbon-severity type: a11y ♿
Projects
Design System
Archived in project
Milestone
No milestone
6 participants
@asudoh @mattrosno @alisonjoseph @joshblack @justindm234 @dakahn