fix(searchbox): add aria-hidden to svg icons (#5547)

* fix: add aria-hidden=true to all instances of ais-SearchBox-submitIcon * fix: add aria-hidden=true to all instances of ais-SearchBox-loadingIcon * fix: add aria-hidden=true to all instances of ais-SearchBox-resetIcon * fix: add remaining svg aria-hidden labels to components and IS search-box widget * chore: move aria-hidden attrs to top for a-z order * feat(current-refinements): provide indexId of refinements in transformItems (#5546) * chore: more aria-hidden attrs to top for a-z order --------- Co-authored-by: Dhaya <154633+dhayab@users.noreply.github.com>
algolia · Mar 16, 2023 · 50344e3 · 50344e3
1 parent dcc1111
commit 50344e3
Show file tree

Hide file tree

Showing 25 changed files with 110 additions and 21 deletions.
diff --git a/examples/react-hooks/e-commerce/App.tsx b/examples/react-hooks/e-commerce/App.tsx
@@ -249,6 +249,7 @@ function SubmitIcon() {
       width="16"
       height="16"
       viewBox="0 0 18 18"
+      aria-hidden="true"
     >
       <g
         fill="none"

diff --git a/examples/react/geo-search/src/__tests__/__snapshots__/App.test.js.snap b/examples/react/geo-search/src/__tests__/__snapshots__/App.test.js.snap
@@ -34,6 +34,7 @@ Array [
         type="submit"
       >
         <svg
+          aria-hidden="true"
           className="ais-SearchBox-submitIcon"
           height="10"
           viewBox="0 0 40 40"
@@ -52,6 +53,7 @@ Array [
         type="reset"
       >
         <svg
+          aria-hidden="true"
           className="ais-SearchBox-resetIcon"
           height="10"
           viewBox="0 0 20 20"

diff --git a/examples/react/multi-index/src/__tests__/__snapshots__/App.test.js.snap b/examples/react/multi-index/src/__tests__/__snapshots__/App.test.js.snap
@@ -33,6 +33,7 @@ Array [
         type="submit"
       >
         <svg
+          aria-hidden="true"
           className="ais-SearchBox-submitIcon"
           height="10"
           viewBox="0 0 40 40"
@@ -51,6 +52,7 @@ Array [
         type="reset"
       >
         <svg
+          aria-hidden="true"
           className="ais-SearchBox-resetIcon"
           height="10"
           viewBox="0 0 20 20"

diff --git a/examples/react/next/tests/__snapshots__/index.test.js.snap b/examples/react/next/tests/__snapshots__/index.test.js.snap
@@ -37,6 +37,7 @@ exports[`Next app recipes App renders without crashing 1`] = `
           type="submit"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-submitIcon"
             height="10"
             viewBox="0 0 40 40"
@@ -55,6 +56,7 @@ exports[`Next app recipes App renders without crashing 1`] = `
           type="reset"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-resetIcon"
             height="10"
             viewBox="0 0 20 20"

diff --git a/examples/react/react-router-v3/src/__tests__/__snapshots__/App.test.js.snap b/examples/react/react-router-v3/src/__tests__/__snapshots__/App.test.js.snap
@@ -44,6 +44,7 @@ exports[`react-router recipe App renders without crashing 1`] = `
           type="submit"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-submitIcon"
             height="10"
             viewBox="0 0 40 40"
@@ -62,6 +63,7 @@ exports[`react-router recipe App renders without crashing 1`] = `
           type="reset"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-resetIcon"
             height="10"
             viewBox="0 0 20 20"

diff --git a/examples/react/react-router/src/__tests__/__snapshots__/App.test.js.snap b/examples/react/react-router/src/__tests__/__snapshots__/App.test.js.snap
@@ -44,6 +44,7 @@ exports[`react-router recipe App renders without crashing 1`] = `
           type="submit"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-submitIcon"
             height="10"
             viewBox="0 0 40 40"
@@ -62,6 +63,7 @@ exports[`react-router recipe App renders without crashing 1`] = `
           type="reset"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-resetIcon"
             height="10"
             viewBox="0 0 20 20"

diff --git a/examples/react/server-side-rendering/src/__snapshots__/App.test.js.snap b/examples/react/server-side-rendering/src/__snapshots__/App.test.js.snap
@@ -33,6 +33,7 @@ Array [
         type="submit"
       >
         <svg
+          aria-hidden="true"
           className="ais-SearchBox-submitIcon"
           height="10"
           viewBox="0 0 40 40"
@@ -51,6 +52,7 @@ Array [
         type="reset"
       >
         <svg
+          aria-hidden="true"
           className="ais-SearchBox-resetIcon"
           height="10"
           viewBox="0 0 20 20"

diff --git a/packages/instantsearch.js/src/widgets/refinement-list/__tests__/refinement-list.test.tsx b/packages/instantsearch.js/src/widgets/refinement-list/__tests__/refinement-list.test.tsx
@@ -91,6 +91,7 @@ describe('refinementList', () => {
             type="submit"
           >
             <svg
+              aria-hidden="true"
               class="ais-SearchBox-submitIcon"
               height="10"
               viewBox="0 0 40 40"
@@ -108,6 +109,7 @@ describe('refinementList', () => {
             type="reset"
           >
             <svg
+              aria-hidden="true"
               class="ais-SearchBox-resetIcon"
               height="10"
               viewBox="0 0 20 20"
@@ -123,6 +125,7 @@ describe('refinementList', () => {
             hidden=""
           >
             <svg
+              aria-hidden="true"
               class="ais-SearchBox-loadingIcon"
               height="16"
               stroke="#444"
@@ -273,6 +276,7 @@ describe('refinementList', () => {
             type="submit"
           >
             <svg
+              aria-hidden="true"
               class="ais-SearchBox-submitIcon"
               height="10"
               viewBox="0 0 40 40"
@@ -289,6 +293,7 @@ describe('refinementList', () => {
             type="reset"
           >
             <svg
+              aria-hidden="true"
               class="ais-SearchBox-resetIcon"
               height="10"
               viewBox="0 0 20 20"
@@ -304,6 +309,7 @@ describe('refinementList', () => {
             hidden=""
           >
             <svg
+              aria-hidden="true"
               class="ais-SearchBox-loadingIcon"
               height="16"
               stroke="#444"

diff --git a/packages/instantsearch.js/src/widgets/search-box/__tests__/search-box.test.tsx b/packages/instantsearch.js/src/widgets/search-box/__tests__/search-box.test.tsx
@@ -61,6 +61,7 @@ describe('searchBox', () => {
         type="submit"
       >
         <svg
+          aria-hidden="true"
           class="ais-SearchBox-submitIcon"
           height="10"
           viewBox="0 0 40 40"
@@ -78,6 +79,7 @@ describe('searchBox', () => {
         type="reset"
       >
         <svg
+          aria-hidden="true"
           class="ais-SearchBox-resetIcon"
           height="10"
           viewBox="0 0 20 20"
@@ -93,6 +95,7 @@ describe('searchBox', () => {
         hidden=""
       >
         <svg
+          aria-hidden="true"
           class="ais-SearchBox-loadingIcon"
           height="16"
           stroke="#444"

diff --git a/packages/instantsearch.js/src/widgets/search-box/defaultTemplates.tsx b/packages/instantsearch.js/src/widgets/search-box/defaultTemplates.tsx
@@ -11,6 +11,7 @@ const defaultTemplate: SearchBoxComponentTemplates = {
         viewBox="0 0 20 20"
         width="10"
         height="10"
+        aria-hidden="true"
       >
         <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z" />
       </svg>
@@ -23,6 +24,7 @@ const defaultTemplate: SearchBoxComponentTemplates = {
         width="10"
         height="10"
         viewBox="0 0 40 40"
+        aria-hidden="true"
       >
         <path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z" />
       </svg>
@@ -36,6 +38,7 @@ const defaultTemplate: SearchBoxComponentTemplates = {
         height="16"
         viewBox="0 0 38 38"
         stroke="#444"
+        aria-hidden="true"
       >
         <g fill="none" fillRule="evenodd">
           <g transform="translate(1 1)" strokeWidth="2">

diff --git a/packages/react-instantsearch-dom/src/components/SearchBox.js b/packages/react-instantsearch-dom/src/components/SearchBox.js
@@ -14,6 +14,7 @@ const defaultLoadingIndicator = (
     xmlns="http://www.w3.org/2000/svg"
     stroke="#444"
     className={cx('loadingIcon')}
+    aria-hidden="true"
   >
     <g fill="none" fillRule="evenodd">
       <g transform="translate(1 1)" strokeWidth="2">
@@ -40,6 +41,7 @@ const defaultReset = (
     viewBox="0 0 20 20"
     width="10"
     height="10"
+    aria-hidden="true"
   >
     <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z" />
   </svg>
@@ -52,6 +54,7 @@ const defaultSubmit = (
     width="10"
     height="10"
     viewBox="0 0 40 40"
+    aria-hidden="true"
   >
     <path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z" />
   </svg>

diff --git a/packages/react-instantsearch-dom/src/components/__tests__/__snapshots__/Menu.js.snap b/packages/react-instantsearch-dom/src/components/__tests__/__snapshots__/Menu.js.snap
@@ -38,6 +38,7 @@ exports[`Menu Menu with search inside items but no search results 1`] = `
           type="submit"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-submitIcon"
             height="10"
             viewBox="0 0 40 40"
@@ -56,6 +57,7 @@ exports[`Menu Menu with search inside items but no search results 1`] = `
           type="reset"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-resetIcon"
             height="10"
             viewBox="0 0 20 20"
@@ -178,6 +180,7 @@ exports[`Menu Menu with search inside items with search results 1`] = `
           type="submit"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-submitIcon"
             height="10"
             viewBox="0 0 40 40"
@@ -196,6 +199,7 @@ exports[`Menu Menu with search inside items with search results 1`] = `
           type="reset"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-resetIcon"
             height="10"
             viewBox="0 0 20 20"
@@ -274,6 +278,7 @@ exports[`Menu applies translations 1`] = `
           type="submit"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-submitIcon"
             height="10"
             viewBox="0 0 40 40"
@@ -292,6 +297,7 @@ exports[`Menu applies translations 1`] = `
           type="reset"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-resetIcon"
             height="10"
             viewBox="0 0 20 20"

diff --git a/...ges/react-instantsearch-dom/src/components/__tests__/__snapshots__/RefinementList.js.snap b/...ges/react-instantsearch-dom/src/components/__tests__/__snapshots__/RefinementList.js.snap
@@ -38,6 +38,7 @@ exports[`RefinementList applies translations 1`] = `
           type="submit"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-submitIcon"
             height="10"
             viewBox="0 0 40 40"
@@ -56,6 +57,7 @@ exports[`RefinementList applies translations 1`] = `
           type="reset"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-resetIcon"
             height="10"
             viewBox="0 0 20 20"
@@ -394,6 +396,7 @@ exports[`RefinementList refinement list with search inside items but no search r
           type="submit"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-submitIcon"
             height="10"
             viewBox="0 0 40 40"
@@ -412,6 +415,7 @@ exports[`RefinementList refinement list with search inside items but no search r
           type="reset"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-resetIcon"
             height="10"
             viewBox="0 0 20 20"
@@ -546,6 +550,7 @@ exports[`RefinementList refinement list with search inside items with search res
           type="submit"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-submitIcon"
             height="10"
             viewBox="0 0 40 40"
@@ -564,6 +569,7 @@ exports[`RefinementList refinement list with search inside items with search res
           type="reset"
         >
           <svg
+            aria-hidden="true"
             className="ais-SearchBox-resetIcon"
             height="10"
             viewBox="0 0 20 20"