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.

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

Cannot add 'aria-label' attribute to TableToolbarSearch.js component #5289

Closed
1 task done
clarebyrne opened this issue Feb 6, 2020 · 8 comments · Fixed by #5330
Closed
1 task done

Cannot add 'aria-label' attribute to TableToolbarSearch.js component #5289

clarebyrne opened this issue Feb 6, 2020 · 8 comments · Fixed by #5330

Comments

@clarebyrne
Copy link

clarebyrne commented Feb 6, 2020

What package(s) are you using?

  • carbon-components-react

Detailed description

Describe in detail the issue you're having.
The 'search' region in the TableToolbarSearch.js region does not have an 'aria-label' attribute, and it is not possible to add one.

Is this issue related to a specific component?
TableToolbarSearch.js

Steps to reproduce the issue

See the role="search" region on Carbon storybook:
https://react.carbondesignsystem.com/?path=/story/datatable--with-toolbar

Screenshot shows the storybook with the relevant div highlighted:
Screenshot 2020-02-06 at 16 42 32

Screenshot shows 'role="search"' region in TableToolbarSearch in carbon-design-system/carbon:
Screenshot 2020-02-06 at 16 43 08

  • Notes
@tw15egan
Copy link
Collaborator

tw15egan commented Feb 6, 2020

Related: #4665

@dakahn does an item with role="search" need an aria-label as well? Or does Search need to take in an aria-label

I'm not getting any DAP issues, @clarebyrne what errors are you seeing?

@dakahn
Copy link
Contributor

dakahn commented Feb 7, 2020

@clarebyrne can you tell us a little about what you're trying to achieve or accomplish here and why? Right now the table toolbar search element has the label "Filter Table" seen here:
2020-02-07 16_43_36-Storybook

@dakahn dakahn self-assigned this Feb 7, 2020
@clarebyrne
Copy link
Author

Thanks @dakahn, i'm trying to put an aria-label within the role="search" div, not the role="searchbox" div. But aria-label or aria-labelledby aren't defined in div section of the component.

Screenshot 2020-02-10 at 16 06 11

This is the accessibility rule I was given:
https://aat.w3ibm.mybluemix.net/token/a80a8d09-7f5a-480a-adcc-7e22f77482b0/c19cc7e4-e2e6-4475-89d7-533c2bc34979/archives/2019NovDeploy//doc/w3/help/en-US/idhi_accessibility_check_g1097.html

@dakahn
Copy link
Contributor

dakahn commented Feb 10, 2020

i'm not currently seeing a DAP error for our table toolbar -- who is reporting this error?

@clarebyrne
Copy link
Author

I can only reproduce the DAP error only when there are at least two search bars with the same role=search tag, on the same page.
Screenshot 2020-02-11 at 10 09 44

@clarebyrne
Copy link
Author

Screenshot 2020-02-11 at 12 52 23

@dakahn I'm getting the DAP warning on this page too: https://www.carbondesignsystem.com/components/search/code/

@clarebyrne
Copy link
Author

Hi @abbeyhrt will this fix be included in the upcoming v10.10.0 release?

@abbeyhrt
Copy link
Contributor

abbeyhrt commented Feb 21, 2020

It will! We are currently planning on releasing 10.10 by the end of next week!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants