fix(SearchBox): use hidden over style to hide loader (#714)

* fix(SearchBox): use hidden over style to hide loader This way the browser is better able to report the state of the component for accessibility. * chore: update snapshot
algolia · Dec 12, 2017 · ed5eb77 · ed5eb77
1 parent 280b3c7
commit ed5eb77
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 94 deletions.
diff --git a/packages/react-instantsearch/src/components/SearchBox.js b/packages/react-instantsearch/src/components/SearchBox.js
@@ -277,21 +277,14 @@ class SearchBox extends Component {
             {...cx('input')}
           />
           {this.props.showLoadingIndicator && (
-            <div
-              style={{
-                display: isSearchStalled ? 'block' : 'none',
-              }}
-              {...cx('loading-indicator')}
-            >
+            <div hidden={!isSearchStalled} {...cx('loading-indicator')}>
               {loadingIndicatorComponent}
             </div>
           )}
           <button
             type="submit"
             title={translate('submitTitle')}
-            style={{
-              display: isSearchStalled ? 'none' : 'block',
-            }}
+            hidden={isSearchStalled}
             {...cx('submit')}
           >
             {submitComponent}

diff --git a/packages/react-instantsearch/src/components/__snapshots__/Menu.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/Menu.test.js.snap
@@ -64,11 +64,7 @@ exports[`Menu Menu with search inside items but no search results 1`] = `
         />
         <button
           className="ais-SearchBox__submit"
-          style={
-            Object {
-              "display": "block",
-            }
-          }
+          hidden={false}
           title="Submit your search query."
           type="submit"
         >
@@ -235,11 +231,7 @@ exports[`Menu Menu with search inside items with search results 1`] = `
         />
         <button
           className="ais-SearchBox__submit"
-          style={
-            Object {
-              "display": "block",
-            }
-          }
+          hidden={false}
           title="Submit your search query."
           type="submit"
         >
@@ -362,11 +354,7 @@ exports[`Menu applies translations 1`] = `
         />
         <button
           className="ais-SearchBox__submit"
-          style={
-            Object {
-              "display": "block",
-            }
-          }
+          hidden={false}
           title="Submit your search query."
           type="submit"
         >

diff --git a/packages/react-instantsearch/src/components/__snapshots__/RefinementList.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/RefinementList.test.js.snap
@@ -65,11 +65,7 @@ exports[`RefinementList applies translations 1`] = `
           />
           <button
             className="ais-SearchBox__submit"
-            style={
-              Object {
-                "display": "block",
-              }
-            }
+            hidden={false}
             title="Submit your search query."
             type="submit"
           >
@@ -325,11 +321,7 @@ exports[`RefinementList refinement list with search inside items but no search r
           />
           <button
             className="ais-SearchBox__submit"
-            style={
-              Object {
-                "display": "block",
-              }
-            }
+            hidden={false}
             title="Submit your search query."
             type="submit"
           >
@@ -513,11 +505,7 @@ exports[`RefinementList refinement list with search inside items with search res
           />
           <button
             className="ais-SearchBox__submit"
-            style={
-              Object {
-                "display": "block",
-              }
-            }
+            hidden={false}
             title="Submit your search query."
             type="submit"
           >

diff --git a/packages/react-instantsearch/src/components/__snapshots__/SearchBox.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/SearchBox.test.js.snap
@@ -58,11 +58,7 @@ exports[`SearchBox applies its default props 1`] = `
     />
     <button
       className="ais-SearchBox__submit"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
+      hidden={false}
       title="Submit your search query."
       type="submit"
     >
@@ -154,11 +150,7 @@ exports[`SearchBox lets you customize its theme 1`] = `
     />
     <button
       className="ais-SearchBox__submit"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
+      hidden={false}
       title="Submit your search query."
       type="submit"
     >
@@ -250,11 +242,7 @@ exports[`SearchBox lets you customize its translations 1`] = `
     />
     <button
       className="ais-SearchBox__submit"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
+      hidden={false}
       title="Submit your search query."
       type="submit"
     >
@@ -346,11 +334,7 @@ exports[`SearchBox lets you give custom components for reset and submit 1`] = `
     />
     <button
       className="ais-SearchBox__submit"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
+      hidden={false}
       title="Submit your search query."
       type="submit"
     >
@@ -434,11 +418,7 @@ exports[`SearchBox should render the loader if showLoadingIndicator is true 1`]
     />
     <div
       className="ais-SearchBox__loading-indicator"
-      style={
-        Object {
-          "display": "none",
-        }
-      }
+      hidden={true}
     >
       <svg
         height="18"
@@ -479,11 +459,7 @@ exports[`SearchBox should render the loader if showLoadingIndicator is true 1`]
     </div>
     <button
       className="ais-SearchBox__submit"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
+      hidden={false}
       title="Submit your search query."
       type="submit"
     >
@@ -575,11 +551,7 @@ exports[`SearchBox should render the loader if showLoadingIndicator is true 2`]
     />
     <div
       className="ais-SearchBox__loading-indicator"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
+      hidden={false}
     >
       <svg
         height="18"
@@ -620,11 +592,7 @@ exports[`SearchBox should render the loader if showLoadingIndicator is true 2`]
     </div>
     <button
       className="ais-SearchBox__submit"
-      style={
-        Object {
-          "display": "none",
-        }
-      }
+      hidden={true}
       title="Submit your search query."
       type="submit"
     >
@@ -716,11 +684,7 @@ exports[`SearchBox transfers the autoFocus prop to the underlying input element
     />
     <button
       className="ais-SearchBox__submit"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
+      hidden={false}
       title="Submit your search query."
       type="submit"
     >
@@ -812,11 +776,7 @@ exports[`SearchBox treats its query prop as its input value 1`] = `
     />
     <button
       className="ais-SearchBox__submit"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
+      hidden={false}
       title="Submit your search query."
       type="submit"
     >
@@ -908,11 +868,7 @@ exports[`SearchBox treats its query prop as its input value 2`] = `
     />
     <button
       className="ais-SearchBox__submit"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
+      hidden={false}
       title="Submit your search query."
       type="submit"
     >