From d1e90f3a12f52d88c72bc320aed83aa51ab36848 Mon Sep 17 00:00:00 2001
From: Haroen Viaene <fingebimus@me.com>
Date: Wed, 15 Mar 2017 15:40:35 +0100
Subject: [PATCH] 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 https://github.com/w3c/html-aria/issues/18
---
 packages/react-instantsearch/src/components/SearchBox.js   | 1 +
 .../src/components/__snapshots__/Menu.test.js.snap         | 3 +++
 .../components/__snapshots__/RefinementList.test.js.snap   | 3 +++
 .../src/components/__snapshots__/SearchBox.test.js.snap    | 7 +++++++
 4 files changed, 14 insertions(+)

diff --git a/packages/react-instantsearch/src/components/SearchBox.js b/packages/react-instantsearch/src/components/SearchBox.js
index cb2486df84..36104fd835 100644
--- 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
index 119fba0ae2..67829628b9 100644
--- 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
index 7eaf1677e0..7760efce1a 100644
--- 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
index b82e20e2d1..08dd9a895f 100644
--- 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={