From 50344e3b14c22c886415c0e7d799aca778dc39ab Mon Sep 17 00:00:00 2001
From: Patrick Sullivan <potatrick@gmail.com>
Date: Thu, 16 Mar 2023 05:12:38 -0400
Subject: [PATCH] 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>
---
 examples/react-hooks/e-commerce/App.tsx       |  1 +
 .../__tests__/__snapshots__/App.test.js.snap  |  2 ++
 .../__tests__/__snapshots__/App.test.js.snap  |  2 ++
 .../tests/__snapshots__/index.test.js.snap    |  2 ++
 .../__tests__/__snapshots__/App.test.js.snap  |  2 ++
 .../__tests__/__snapshots__/App.test.js.snap  |  2 ++
 .../src/__snapshots__/App.test.js.snap        |  2 ++
 .../__tests__/refinement-list.test.tsx        |  6 ++++++
 .../search-box/__tests__/search-box.test.tsx  |  3 +++
 .../widgets/search-box/defaultTemplates.tsx   |  3 +++
 .../src/components/SearchBox.js               |  3 +++
 .../__tests__/__snapshots__/Menu.js.snap      |  6 ++++++
 .../__snapshots__/RefinementList.js.snap      |  6 ++++++
 .../__tests__/__snapshots__/SearchBox.js.snap | 20 +++++++++++++++++++
 .../src/ui/SearchBox.tsx                      |  3 +++
 .../src/ui/__tests__/RefinementList.test.tsx  |  3 +++
 .../src/ui/__tests__/SearchBox.test.tsx       |  9 +++++++++
 .../widgets/__tests__/RefinementList.test.tsx |  3 +++
 .../src/widgets/__tests__/SearchBox.test.tsx  |  3 +++
 .../src/components/SearchInput.vue            |  2 ++
 .../__snapshots__/RefinementList.js.snap      | 12 +++++++----
 .../__tests__/__snapshots__/SearchBox.js.snap |  6 ++++--
 specs/src/pages/widgets/menu.md               |  6 +++---
 specs/src/pages/widgets/refinement-list.md    |  6 +++---
 specs/src/pages/widgets/search-box.md         | 18 ++++++++---------
 25 files changed, 110 insertions(+), 21 deletions(-)

diff --git a/examples/react-hooks/e-commerce/App.tsx b/examples/react-hooks/e-commerce/App.tsx
index 786524bea7..d88f72faba 100644
--- 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
index 447d03e509..b0eb2790b3 100644
--- 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
index 95972bb801..df13ed610e 100644
--- 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
index 6b93cf0c78..cbc46c8f73 100644
--- 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
index f42bc46c34..f8c748c6ca 100644
--- 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
index f42bc46c34..f8c748c6ca 100644
--- 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
index 6fbca82972..eaee2542aa 100644
--- 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
index 6db58cfbb2..6790d1e0a6 100644
--- 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
index d4ed8164ed..9a49f3d0a2 100644
--- 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
index d86f76313d..1856fe19a8 100644
--- 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
index e4aed41e7b..a874343b27 100644
--- 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
index f3be209fb4..6e8ca2cf36 100644
--- 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/packages/react-instantsearch-dom/src/components/__tests__/__snapshots__/RefinementList.js.snap b/packages/react-instantsearch-dom/src/components/__tests__/__snapshots__/RefinementList.js.snap
index 0c1d650518..b3fa1eaef4 100644
--- a/packages/react-instantsearch-dom/src/components/__tests__/__snapshots__/RefinementList.js.snap
+++ b/packages/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"
diff --git a/packages/react-instantsearch-dom/src/components/__tests__/__snapshots__/SearchBox.js.snap b/packages/react-instantsearch-dom/src/components/__tests__/__snapshots__/SearchBox.js.snap
index 0975e2a8d7..2b7935ce80 100644
--- a/packages/react-instantsearch-dom/src/components/__tests__/__snapshots__/SearchBox.js.snap
+++ b/packages/react-instantsearch-dom/src/components/__tests__/__snapshots__/SearchBox.js.snap
@@ -32,6 +32,7 @@ exports[`SearchBox applies its default props 1`] = `
       type="submit"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-submitIcon"
         height="10"
         viewBox="0 0 40 40"
@@ -50,6 +51,7 @@ exports[`SearchBox applies its default props 1`] = `
       type="reset"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-resetIcon"
         height="10"
         viewBox="0 0 20 20"
@@ -97,6 +99,7 @@ exports[`SearchBox applies its default props with custom className 1`] = `
       type="submit"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-submitIcon"
         height="10"
         viewBox="0 0 40 40"
@@ -115,6 +118,7 @@ exports[`SearchBox applies its default props with custom className 1`] = `
       type="reset"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-resetIcon"
         height="10"
         viewBox="0 0 20 20"
@@ -162,6 +166,7 @@ exports[`SearchBox lets you customize its theme 1`] = `
       type="submit"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-submitIcon"
         height="10"
         viewBox="0 0 40 40"
@@ -180,6 +185,7 @@ exports[`SearchBox lets you customize its theme 1`] = `
       type="reset"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-resetIcon"
         height="10"
         viewBox="0 0 20 20"
@@ -227,6 +233,7 @@ exports[`SearchBox lets you customize its translations 1`] = `
       type="submit"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-submitIcon"
         height="10"
         viewBox="0 0 40 40"
@@ -245,6 +252,7 @@ exports[`SearchBox lets you customize its translations 1`] = `
       type="reset"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-resetIcon"
         height="10"
         viewBox="0 0 20 20"
@@ -345,6 +353,7 @@ exports[`SearchBox should render the loader if showLoadingIndicator is true 1`]
       type="submit"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-submitIcon"
         height="10"
         viewBox="0 0 40 40"
@@ -363,6 +372,7 @@ exports[`SearchBox should render the loader if showLoadingIndicator is true 1`]
       type="reset"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-resetIcon"
         height="10"
         viewBox="0 0 20 20"
@@ -379,6 +389,7 @@ exports[`SearchBox should render the loader if showLoadingIndicator is true 1`]
       hidden={true}
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-loadingIcon"
         height="18"
         stroke="#444"
@@ -452,6 +463,7 @@ exports[`SearchBox should render the loader if showLoadingIndicator is true 2`]
       type="submit"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-submitIcon"
         height="10"
         viewBox="0 0 40 40"
@@ -470,6 +482,7 @@ exports[`SearchBox should render the loader if showLoadingIndicator is true 2`]
       type="reset"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-resetIcon"
         height="10"
         viewBox="0 0 20 20"
@@ -486,6 +499,7 @@ exports[`SearchBox should render the loader if showLoadingIndicator is true 2`]
       hidden={false}
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-loadingIcon"
         height="18"
         stroke="#444"
@@ -559,6 +573,7 @@ exports[`SearchBox transfers the autoFocus prop to the underlying input element
       type="submit"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-submitIcon"
         height="10"
         viewBox="0 0 40 40"
@@ -577,6 +592,7 @@ exports[`SearchBox transfers the autoFocus prop to the underlying input element
       type="reset"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-resetIcon"
         height="10"
         viewBox="0 0 20 20"
@@ -624,6 +640,7 @@ exports[`SearchBox treats its query prop as its input value 1`] = `
       type="submit"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-submitIcon"
         height="10"
         viewBox="0 0 40 40"
@@ -642,6 +659,7 @@ exports[`SearchBox treats its query prop as its input value 1`] = `
       type="reset"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-resetIcon"
         height="10"
         viewBox="0 0 20 20"
@@ -689,6 +707,7 @@ exports[`SearchBox treats its query prop as its input value 2`] = `
       type="submit"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-submitIcon"
         height="10"
         viewBox="0 0 40 40"
@@ -707,6 +726,7 @@ exports[`SearchBox treats its query prop as its input value 2`] = `
       type="reset"
     >
       <svg
+        aria-hidden="true"
         className="ais-SearchBox-resetIcon"
         height="10"
         viewBox="0 0 20 20"
diff --git a/packages/react-instantsearch-hooks-web/src/ui/SearchBox.tsx b/packages/react-instantsearch-hooks-web/src/ui/SearchBox.tsx
index 1b1128dfa1..dc7105526d 100644
--- a/packages/react-instantsearch-hooks-web/src/ui/SearchBox.tsx
+++ b/packages/react-instantsearch-hooks-web/src/ui/SearchBox.tsx
@@ -84,6 +84,7 @@ function DefaultSubmitIcon({ classNames }: IconProps) {
       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"></path>
     </svg>
@@ -97,6 +98,7 @@ function DefaultResetIcon({ classNames }: IconProps) {
       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"></path>
     </svg>
@@ -111,6 +113,7 @@ function DefaultLoadingIcon({ classNames }: IconProps) {
       viewBox="0 0 38 38"
       stroke="#444"
       className={cx('ais-SearchBox-loadingIcon', classNames.loadingIcon)}
+      aria-hidden="true"
     >
       <g fill="none" fillRule="evenodd">
         <g transform="translate(1 1)" strokeWidth="2">
diff --git a/packages/react-instantsearch-hooks-web/src/ui/__tests__/RefinementList.test.tsx b/packages/react-instantsearch-hooks-web/src/ui/__tests__/RefinementList.test.tsx
index e733859bc5..04a1dc5064 100644
--- a/packages/react-instantsearch-hooks-web/src/ui/__tests__/RefinementList.test.tsx
+++ b/packages/react-instantsearch-hooks-web/src/ui/__tests__/RefinementList.test.tsx
@@ -267,6 +267,7 @@ describe('RefinementList', () => {
                   type="submit"
                 >
                   <svg
+                    aria-hidden="true"
                     class="ais-SearchBox-submitIcon"
                     height="10"
                     viewBox="0 0 40 40"
@@ -284,6 +285,7 @@ describe('RefinementList', () => {
                   type="reset"
                 >
                   <svg
+                    aria-hidden="true"
                     class="ais-SearchBox-resetIcon"
                     height="10"
                     viewBox="0 0 20 20"
@@ -299,6 +301,7 @@ describe('RefinementList', () => {
                   hidden=""
                 >
                   <svg
+                    aria-hidden="true"
                     class="ais-SearchBox-loadingIcon"
                     height="16"
                     stroke="#444"
diff --git a/packages/react-instantsearch-hooks-web/src/ui/__tests__/SearchBox.test.tsx b/packages/react-instantsearch-hooks-web/src/ui/__tests__/SearchBox.test.tsx
index 434cfc6d3e..1fa8846cf2 100644
--- a/packages/react-instantsearch-hooks-web/src/ui/__tests__/SearchBox.test.tsx
+++ b/packages/react-instantsearch-hooks-web/src/ui/__tests__/SearchBox.test.tsx
@@ -66,6 +66,7 @@ describe('SearchBox', () => {
               type="submit"
             >
               <svg
+                aria-hidden="true"
                 class="ais-SearchBox-submitIcon"
                 height="10"
                 viewBox="0 0 40 40"
@@ -83,6 +84,7 @@ describe('SearchBox', () => {
               type="reset"
             >
               <svg
+                aria-hidden="true"
                 class="ais-SearchBox-resetIcon"
                 height="10"
                 viewBox="0 0 20 20"
@@ -98,6 +100,7 @@ describe('SearchBox', () => {
               hidden=""
             >
               <svg
+                aria-hidden="true"
                 class="ais-SearchBox-loadingIcon"
                 height="16"
                 stroke="#444"
@@ -178,6 +181,7 @@ describe('SearchBox', () => {
               type="submit"
             >
               <svg
+                aria-hidden="true"
                 class="ais-SearchBox-submitIcon"
                 height="10"
                 viewBox="0 0 40 40"
@@ -195,6 +199,7 @@ describe('SearchBox', () => {
               type="reset"
             >
               <svg
+                aria-hidden="true"
                 class="ais-SearchBox-resetIcon"
                 height="10"
                 viewBox="0 0 20 20"
@@ -210,6 +215,7 @@ describe('SearchBox', () => {
               hidden=""
             >
               <svg
+                aria-hidden="true"
                 class="ais-SearchBox-loadingIcon"
                 height="16"
                 stroke="#444"
@@ -523,6 +529,7 @@ describe('SearchBox', () => {
               type="submit"
             >
               <svg
+                aria-hidden="true"
                 class="ais-SearchBox-submitIcon SUBMITICON"
                 height="10"
                 viewBox="0 0 40 40"
@@ -540,6 +547,7 @@ describe('SearchBox', () => {
               type="reset"
             >
               <svg
+                aria-hidden="true"
                 class="ais-SearchBox-resetIcon RESETICON"
                 height="10"
                 viewBox="0 0 20 20"
@@ -555,6 +563,7 @@ describe('SearchBox', () => {
               hidden=""
             >
               <svg
+                aria-hidden="true"
                 class="ais-SearchBox-loadingIcon LOADINGICON"
                 height="16"
                 stroke="#444"
diff --git a/packages/react-instantsearch-hooks-web/src/widgets/__tests__/RefinementList.test.tsx b/packages/react-instantsearch-hooks-web/src/widgets/__tests__/RefinementList.test.tsx
index 02557147f5..98dc06f5be 100644
--- a/packages/react-instantsearch-hooks-web/src/widgets/__tests__/RefinementList.test.tsx
+++ b/packages/react-instantsearch-hooks-web/src/widgets/__tests__/RefinementList.test.tsx
@@ -939,6 +939,7 @@ describe('RefinementList', () => {
                     type="submit"
                   >
                     <svg
+                      aria-hidden="true"
                       class="ais-SearchBox-submitIcon"
                       height="10"
                       viewBox="0 0 40 40"
@@ -955,6 +956,7 @@ describe('RefinementList', () => {
                     type="reset"
                   >
                     <svg
+                      aria-hidden="true"
                       class="ais-SearchBox-resetIcon"
                       height="10"
                       viewBox="0 0 20 20"
@@ -970,6 +972,7 @@ describe('RefinementList', () => {
                     hidden=""
                   >
                     <svg
+                      aria-hidden="true"
                       class="ais-SearchBox-loadingIcon"
                       height="16"
                       stroke="#444"
diff --git a/packages/react-instantsearch-hooks-web/src/widgets/__tests__/SearchBox.test.tsx b/packages/react-instantsearch-hooks-web/src/widgets/__tests__/SearchBox.test.tsx
index c05ce858be..9c845cd302 100644
--- a/packages/react-instantsearch-hooks-web/src/widgets/__tests__/SearchBox.test.tsx
+++ b/packages/react-instantsearch-hooks-web/src/widgets/__tests__/SearchBox.test.tsx
@@ -45,6 +45,7 @@ describe('SearchBox', () => {
               type="submit"
             >
               <svg
+                aria-hidden="true"
                 class="ais-SearchBox-submitIcon"
                 height="10"
                 viewBox="0 0 40 40"
@@ -62,6 +63,7 @@ describe('SearchBox', () => {
               type="reset"
             >
               <svg
+                aria-hidden="true"
                 class="ais-SearchBox-resetIcon"
                 height="10"
                 viewBox="0 0 20 20"
@@ -77,6 +79,7 @@ describe('SearchBox', () => {
               hidden=""
             >
               <svg
+                aria-hidden="true"
                 class="ais-SearchBox-loadingIcon"
                 height="16"
                 stroke="#444"
diff --git a/packages/vue-instantsearch/src/components/SearchInput.vue b/packages/vue-instantsearch/src/components/SearchInput.vue
index b24381445e..69cb5f17b3 100644
--- a/packages/vue-instantsearch/src/components/SearchInput.vue
+++ b/packages/vue-instantsearch/src/components/SearchInput.vue
@@ -38,6 +38,7 @@
     >
       <slot name="submit-icon">
         <svg
+          aria-hidden="true"
           role="img"
           xmlns="http://www.w3.org/2000/svg"
           width="10"
@@ -64,6 +65,7 @@
     >
       <slot name="reset-icon">
         <svg
+          aria-hidden="true"
           role="img"
           xmlns="http://www.w3.org/2000/svg"
           width="1em"
diff --git a/packages/vue-instantsearch/src/components/__tests__/__snapshots__/RefinementList.js.snap b/packages/vue-instantsearch/src/components/__tests__/__snapshots__/RefinementList.js.snap
index 4da0bfae9f..cd64e458e5 100644
--- a/packages/vue-instantsearch/src/components/__tests__/__snapshots__/RefinementList.js.snap
+++ b/packages/vue-instantsearch/src/components/__tests__/__snapshots__/RefinementList.js.snap
@@ -23,7 +23,8 @@ exports[`allows search bar classes override when it's searchable 1`] = `
               title="Search"
               type="submit"
       >
-        <svg class="ais-SearchBox-submitIcon"
+        <svg aria-hidden="true"
+             class="ais-SearchBox-submitIcon"
              height="10"
              role="img"
              viewbox="0 0 40 40"
@@ -41,7 +42,8 @@ exports[`allows search bar classes override when it's searchable 1`] = `
               title="Clear"
               type="reset"
       >
-        <svg class="ais-SearchBox-resetIcon"
+        <svg aria-hidden="true"
+             class="ais-SearchBox-resetIcon"
              height="1em"
              role="img"
              viewbox="0 0 20 20"
@@ -281,7 +283,8 @@ exports[`renders correctly when it's searchable 1`] = `
               title="Search"
               type="submit"
       >
-        <svg class="ais-SearchBox-submitIcon"
+        <svg aria-hidden="true"
+             class="ais-SearchBox-submitIcon"
              height="10"
              role="img"
              viewbox="0 0 40 40"
@@ -299,7 +302,8 @@ exports[`renders correctly when it's searchable 1`] = `
               title="Clear"
               type="reset"
       >
-        <svg class="ais-SearchBox-resetIcon"
+        <svg aria-hidden="true"
+             class="ais-SearchBox-resetIcon"
              height="1em"
              role="img"
              viewbox="0 0 20 20"
diff --git a/packages/vue-instantsearch/src/components/__tests__/__snapshots__/SearchBox.js.snap b/packages/vue-instantsearch/src/components/__tests__/__snapshots__/SearchBox.js.snap
index 813c0b1143..6ac400de2a 100644
--- a/packages/vue-instantsearch/src/components/__tests__/__snapshots__/SearchBox.js.snap
+++ b/packages/vue-instantsearch/src/components/__tests__/__snapshots__/SearchBox.js.snap
@@ -22,7 +22,8 @@ exports[`renders HTML correctly 1`] = `
             title="Search"
             type="submit"
     >
-      <svg class="ais-SearchBox-submitIcon"
+      <svg aria-hidden="true"
+           class="ais-SearchBox-submitIcon"
            height="10"
            role="img"
            viewbox="0 0 40 40"
@@ -40,7 +41,8 @@ exports[`renders HTML correctly 1`] = `
             title="Clear"
             type="reset"
     >
-      <svg class="ais-SearchBox-resetIcon"
+      <svg aria-hidden="true"
+           class="ais-SearchBox-resetIcon"
            height="1em"
            role="img"
            viewbox="0 0 20 20"
diff --git a/specs/src/pages/widgets/menu.md b/specs/src/pages/widgets/menu.md
index 7c352035ef..e5e8850ff3 100644
--- a/specs/src/pages/widgets/menu.md
+++ b/specs/src/pages/widgets/menu.md
@@ -53,17 +53,17 @@ althtml2: |
         <form class="ais-SearchBox-form" novalidate>
           <input class="ais-SearchBox-input" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search for products" spellcheck="false" maxlength="512" type="search" value="" />
           <button class="ais-SearchBox-submit" type="submit" title="Submit the search query.">
-            <svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40">
+            <svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" 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"></path>
             </svg>
           </button>
           <button class="ais-SearchBox-reset" type="reset" title="Clear the search query." hidden>
-            <svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="10" height="10">
+            <svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" 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"></path>
             </svg>
           </button>
           <span class="ais-SearchBox-loadingIndicator" hidden>
-            <svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon">
+            <svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon" aria-hidden="true">
               <g fill="none" fillRule="evenodd">
                 <g transform="translate(1 1)" strokeWidth="2">
                   <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
diff --git a/specs/src/pages/widgets/refinement-list.md b/specs/src/pages/widgets/refinement-list.md
index 4bbac93926..84d1400087 100644
--- a/specs/src/pages/widgets/refinement-list.md
+++ b/specs/src/pages/widgets/refinement-list.md
@@ -57,17 +57,17 @@ althtml2: |
         <form class="ais-SearchBox-form" novalidate>
           <input class="ais-SearchBox-input" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search for products" spellcheck="false" maxlength="512" type="search" value="" />
           <button class="ais-SearchBox-submit" type="submit" title="Submit the search query.">
-            <svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40">
+            <svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" 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"></path>
             </svg>
           </button>
           <button class="ais-SearchBox-reset" type="reset" title="Clear the search query." hidden>
-            <svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="10" height="10">
+            <svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" 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"></path>
             </svg>
           </button>
           <span class="ais-SearchBox-loadingIndicator" hidden>
-            <svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon">
+            <svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon" aria-hidden="true">
               <g fill="none" fillRule="evenodd">
                 <g transform="translate(1 1)" strokeWidth="2">
                   <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
diff --git a/specs/src/pages/widgets/search-box.md b/specs/src/pages/widgets/search-box.md
index b195cbed77..b59f1ed7e9 100644
--- a/specs/src/pages/widgets/search-box.md
+++ b/specs/src/pages/widgets/search-box.md
@@ -7,17 +7,17 @@ html: |
     <form class="ais-SearchBox-form" novalidate>
       <input class="ais-SearchBox-input" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search for products" spellcheck="false" maxlength="512" type="search" value="" />
       <button class="ais-SearchBox-submit" type="submit" title="Submit the search query.">
-        <svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40">
+        <svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" 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"></path>
         </svg>
       </button>
       <button class="ais-SearchBox-reset" type="reset" title="Clear the search query." hidden>
-        <svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="10" height="10">
+        <svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" 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"></path>
         </svg>
       </button>
       <span class="ais-SearchBox-loadingIndicator" hidden>
-        <svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon">
+        <svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon" aria-hidden="true">
           <g fill="none" fillRule="evenodd">
             <g transform="translate(1 1)" strokeWidth="2">
               <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
@@ -43,17 +43,17 @@ althtml1: |
     <form class="ais-SearchBox-form" novalidate>
       <input class="ais-SearchBox-input" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search for products" spellcheck="false" maxlength="512" type="search" value="Typing text..." />
       <button class="ais-SearchBox-submit" type="submit" title="Submit the search query.">
-        <svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40">
+        <svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" 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"></path>
         </svg>
       </button>
       <button class="ais-SearchBox-reset" type="reset" title="Clear the search query.">
-        <svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="10" height="10">
+        <svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" 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"></path>
         </svg>
       </button>
       <span class="ais-SearchBox-loadingIndicator" hidden>
-        <svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon">
+        <svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon" aria-hidden="true">
           <g fill="none" fillRule="evenodd">
             <g transform="translate(1 1)" strokeWidth="2">
               <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
@@ -79,17 +79,17 @@ althtml2: |
     <form class="ais-SearchBox-form" novalidate>
       <input class="ais-SearchBox-input" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search for products" spellcheck="false" maxlength="512" type="search" value="Typing text..." />
       <button class="ais-SearchBox-submit" type="submit" title="Submit the search query.">
-        <svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40">
+        <svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" 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"></path>
         </svg>
       </button>
       <button class="ais-SearchBox-reset" type="reset" title="Clear the search query." hidden>
-        <svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="10" height="10">
+        <svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" 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"></path>
         </svg>
       </button>
       <span class="ais-SearchBox-loadingIndicator">
-        <svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon">
+        <svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon" aria-hidden="true">
           <g fill="none" fillRule="evenodd">
             <g transform="translate(1 1)" strokeWidth="2">
               <circle strokeOpacity=".5" cx="18" cy="18" r="18" />