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(searchbox): add aria-hidden to svg icons #5547

Merged
merged 9 commits into from Mar 16, 2023

Conversation

pat-sullivan
Copy link
Contributor

Summary
Added aria-hidden="true" attributes to the following SVG icons used in the repo:

  • ais-SearchBox-resetIcon
  • ais-SearchBox-loadingIcon
  • ais-SearchBox-submitIcon

This is in response to a Shopify customer support ticket saying these icons were flagged (for missing title attributes) during an accessibility audit. Since these icons are nested below buttons with title attributes, an aria-hidden attribute seemed the better option.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 15, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ee46988:

Sandbox Source
InstantSearch.js Configuration
react-instantsearch-app Configuration
example-react-instantsearch-hooks-default-theme Configuration
example-vue-instantsearch-default-theme Configuration

Copy link
Contributor

@Haroenv Haroenv left a comment

Choose a reason for hiding this comment

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

Thanks @pat-sullivan, this looks like a great start! we should indeed have these images aria-hidden, as they are purely visual and have a parent with a title

@@ -46,6 +47,7 @@ exports[`allows search bar classes override when it's searchable 1`] = `
role="img"
viewbox="0 0 20 20"
width="1em"
aria-hidden="true"
Copy link
Contributor

Choose a reason for hiding this comment

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

these Vue snapshots need aria-hidden as the first property (it's alphabetically sorted)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@Haroenv Thanks for pointing that out! I've made the necessary adjustments. However I can't seem to get past that flaky unit test on packages/react-instantsearch-hooks-server/src/__tests__/modules-none.test.tsx

Copy link
Contributor

@Haroenv Haroenv left a comment

Choose a reason for hiding this comment

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

thanks! This looks good to me

@Haroenv Haroenv changed the title fix: add aria-hidden to searchbox svg icons fix(searchbox): add aria-hidden to svg icons Mar 16, 2023
@Haroenv Haroenv enabled auto-merge (squash) March 16, 2023 09:09
@Haroenv Haroenv merged commit 50344e3 into master Mar 16, 2023
13 checks passed
@Haroenv Haroenv deleted the fix/add-aria-hidden-to-svg-icons branch March 16, 2023 09:12
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.

None yet

3 participants