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

fix(tabletoolbar): add aria-label to search input #3635

Closed
wants to merge 5 commits into from

Conversation

erzhan-temir-mamyrov
Copy link
Collaborator

@erzhan-temir-mamyrov erzhan-temir-mamyrov commented Nov 7, 2022

Closes #3400

Summary

  • Add aria label to search input in table toolbar

Change List (commits, features, bugs, etc)

  • Add aria-label="search" to search input
  • Update storyshots

Acceptance Test (how to verify the PR)

  • Go to this story
  • Inspect search input in the browser tool
  • Verify that aria-label is set for the input field

Regression Test (how to make sure this PR doesn't break old functionality)

  • tests here

Things to look for during review

  • Make sure all references to iot or bx class prefix is using the prefix variable
  • (React) All major areas have a data-testid attribute. New test ids should have test written to ensure they are not changed or removed.
  • UI should be checked in RTL mode to ensure the proper handling of layout and text.
  • All strings should be translatable.
  • The code should pass a11y scans (The storybook a11y knob should show no violations). New components should have a11y test written.
  • Unit test should be written and should have a coverage of 90% or higher in all areas.
  • All components should be passing visual regression test. For new styles or components either a visual regression test should be written for all permutations or the base image updated.
  • Changes or new components should either write new or update existing documentation.
  • PR should link and close out an existing issue

@netlify
Copy link

netlify bot commented Nov 7, 2022

Deploy Preview for carbon-addons-iot-react ready!

Name Link
🔨 Latest commit d768936
🔍 Latest deploy log https://app.netlify.com/sites/carbon-addons-iot-react/deploys/636a5af501dccc00096fe5f0
😎 Deploy Preview https://deploy-preview-3635--carbon-addons-iot-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Nov 7, 2022

Deploy Preview for ai-apps-pal-angular ready!

Name Link
🔨 Latest commit d768936
🔍 Latest deploy log https://app.netlify.com/sites/ai-apps-pal-angular/deploys/636a5af5e4366100085e825f
😎 Deploy Preview https://deploy-preview-3635--ai-apps-pal-angular.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Copy link
Collaborator

@davidicus davidicus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small change with translated string.

@@ -433,6 +433,7 @@ const TableToolbar = ({
{hasSearch ? (
<TableToolbarSearch
{...search}
aria-label="search"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this will be read by screen readers we should be using the translated string here.

@davidicus
Copy link
Collaborator

Hey @erzhan-temir-mamyrov I have looked into this and I think this may be a false positive for Graphite's axe scans. There is a known bug that was fixed. If you look at the scans in our Storybook you will notice we do not have an a11y issue. Our version is ahead of graphite but quite a bit. 4.2.0 to Graphite's 3.5.6

If you look at the spec, Carbon is following the recommendations of providing a visibly hidden label.

So, I think this one can be closed out with no need of changes on our end.

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

Successfully merging this pull request may close these issues.

[Table] Accessibility violation
2 participants