-
Notifications
You must be signed in to change notification settings - Fork 530
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
Conversation
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:
|
There was a problem hiding this 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
packages/instantsearch.js/src/widgets/search-box/__tests__/search-box.test.tsx
Outdated
Show resolved
Hide resolved
@@ -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" |
There was a problem hiding this comment.
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)
There was a problem hiding this comment.
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
…/instantsearch into fix/add-aria-hidden-to-svg-icons
There was a problem hiding this 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
Summary
Added
aria-hidden="true"
attributes to the following SVG icons used in the repo: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.