feat(SearchBox): add role=search to the form (#2046)

This helps for screenreaders, and is valid html5 since december 2015. Before then it was working, but not valid. see also w3c/html-aria#18
algolia · Mar 15, 2017 · d1e90f3 · d1e90f3
1 parent e267ab6
commit d1e90f3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git a/packages/react-instantsearch/src/components/SearchBox.js b/packages/react-instantsearch/src/components/SearchBox.js
@@ -189,6 +189,7 @@ class SearchBox extends Component {
         onReset={this.onReset}
         {...cx('root')}
         action=""
+        role="search"
       >
         <svg xmlns="http://www.w3.org/2000/svg" style={{display: 'none'}}>
           <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-13" viewBox="0 0 40 40">

diff --git a/packages/react-instantsearch/src/components/__snapshots__/Menu.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/Menu.test.js.snap
@@ -13,6 +13,7 @@ exports[`Menu Menu with search inside items but no search results 1`] = `
       noValidate={true}
       onReset={[Function]}
       onSubmit={[Function]}
+      role="search"
     >
       <svg
         style={
@@ -173,6 +174,7 @@ exports[`Menu Menu with search inside items with search results 1`] = `
       noValidate={true}
       onReset={[Function]}
       onSubmit={[Function]}
+      role="search"
     >
       <svg
         style={
@@ -289,6 +291,7 @@ exports[`Menu applies translations 1`] = `
       noValidate={true}
       onReset={[Function]}
       onSubmit={[Function]}
+      role="search"
     >
       <svg
         style={

diff --git a/packages/react-instantsearch/src/components/__snapshots__/RefinementList.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/RefinementList.test.js.snap
@@ -14,6 +14,7 @@ exports[`RefinementList applies translations 1`] = `
         noValidate={true}
         onReset={[Function]}
         onSubmit={[Function]}
+        role="search"
       >
         <svg
           style={
@@ -263,6 +264,7 @@ exports[`RefinementList refinement list with search inside items but no search r
         noValidate={true}
         onReset={[Function]}
         onSubmit={[Function]}
+        role="search"
       >
         <svg
           style={
@@ -440,6 +442,7 @@ exports[`RefinementList refinement list with search inside items with search res
         noValidate={true}
         onReset={[Function]}
         onSubmit={[Function]}
+        role="search"
       >
         <svg
           style={

diff --git a/packages/react-instantsearch/src/components/__snapshots__/SearchBox.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/SearchBox.test.js.snap
@@ -7,6 +7,7 @@ exports[`SearchBox applies its default props 1`] = `
   noValidate={true}
   onReset={[Function]}
   onSubmit={[Function]}
+  role="search"
 >
   <svg
     style={
@@ -92,6 +93,7 @@ exports[`SearchBox lets you customize its theme 1`] = `
   noValidate={true}
   onReset={[Function]}
   onSubmit={[Function]}
+  role="search"
 >
   <svg
     style={
@@ -177,6 +179,7 @@ exports[`SearchBox lets you customize its translations 1`] = `
   noValidate={true}
   onReset={[Function]}
   onSubmit={[Function]}
+  role="search"
 >
   <svg
     style={
@@ -262,6 +265,7 @@ exports[`SearchBox lets you give custom components for reset and submit 1`] = `
   noValidate={true}
   onReset={[Function]}
   onSubmit={[Function]}
+  role="search"
 >
   <svg
     style={
@@ -343,6 +347,7 @@ exports[`SearchBox transfers the autoFocus prop to the underlying input element
   noValidate={true}
   onReset={[Function]}
   onSubmit={[Function]}
+  role="search"
 >
   <svg
     style={
@@ -428,6 +433,7 @@ exports[`SearchBox treats its query prop as its input value 1`] = `
   noValidate={true}
   onReset={[Function]}
   onSubmit={[Function]}
+  role="search"
 >
   <svg
     style={
@@ -513,6 +519,7 @@ exports[`SearchBox treats its query prop as its input value 2`] = `
   noValidate={true}
   onReset={[Function]}
   onSubmit={[Function]}
+  role="search"
 >
   <svg
     style={