feat(searchbox): add customisable aria-label

This depends on algolia/instantsearch-specs#104 being accepted.

src/components/SearchBox/SearchBox.js

@@ -31,6 +31,7 @@ class SearchBox extends Component {
     searchAsYouType: PropTypes.bool,
     isSearchStalled: PropTypes.bool,
     disabled: PropTypes.bool,
+    inputLabel: PropTypes.string,
     onChange: PropTypes.func,
     onSubmit: PropTypes.func,
     onReset: PropTypes.func,
@@ -136,6 +137,7 @@ class SearchBox extends Component {
       showLoadingIndicator,
       templates,
       isSearchStalled,
+      inputLabel,
     } = this.props;
 
     return (
@@ -161,6 +163,7 @@ class SearchBox extends Component {
             autoCapitalize="off"
             spellCheck={false}
             maxLength={512}
+            aria-label={inputLabel}
             onInput={this.onInput}
             onBlur={this.onBlur}
             onFocus={this.onFocus}

src/components/SearchBox/__tests__/SearchBox-test.js

@@ -70,6 +70,18 @@ describe('SearchBox', () => {
       });
     });
 
+    describe('inputLabel', () => {
+      test('sets inputLabel', () => {
+        const props = {
+          ...defaultProps,
+          inputLabel: 'Rech.',
+        };
+        const wrapper = mount(<SearchBox {...props} />);
+
+        expect(wrapper.find('input').props()['aria-label']).toBe('Rech.');
+      });
+    });
+
     describe('showSubmit', () => {
       test('show the submit button by default', () => {
         const props = {

src/widgets/search-box/__tests__/__snapshots__/search-box-test.js.snap

@@ -15,6 +15,7 @@ Object {
     "submitIcon": "ais-SearchBox-submitIcon",
   },
   "disabled": false,
+  "inputLabel": "Search",
   "isSearchStalled": false,
   "onChange": [Function],
   "onReset": [Function],
@@ -75,6 +76,7 @@ Object {
     "submitIcon": "ais-SearchBox-submitIcon",
   },
   "disabled": false,
+  "inputLabel": "Search",
   "isSearchStalled": false,
   "onChange": [Function],
   "onReset": [Function],
@@ -135,6 +137,7 @@ Object {
     "submitIcon": "ais-SearchBox-submitIcon",
   },
   "disabled": false,
+  "inputLabel": "Search",
   "isSearchStalled": false,
   "onChange": [Function],
   "onReset": [Function],

src/widgets/search-box/search-box.js

@@ -24,6 +24,7 @@ const renderer = ({
   showReset,
   showSubmit,
   showLoadingIndicator,
+  inputLabel,
 }) => ({ refine, query, isSearchStalled }) => {
   render(
     <SearchBox
@@ -37,6 +38,7 @@ const renderer = ({
       showReset={showReset}
       showLoadingIndicator={showLoadingIndicator}
       isSearchStalled={isSearchStalled}
+      inputLabel={inputLabel}
       cssClasses={cssClasses}
     />,
     containerNode
@@ -74,6 +76,7 @@ const renderer = ({
  * @property {boolean} [showSubmit=true] Whether to show the submit button
  * @property {boolean} [showLoadingIndicator=true] Whether to show the loading indicator (replaces the submit if
  * the search is stalled)
+ * @property {string} [inputLabel=Search] ARIA-label to add to the actual search input.
  * @property {SearchBoxCSSClasses} [cssClasses] CSS classes to add
  * @property {SearchBoxTemplates} [templates] Templates used for customizing the rendering of the searchbox
  * @property {function} [queryHook] A function that is called every time a new search is done. You
@@ -110,6 +113,7 @@ export default function searchBox({
   showReset = true,
   showSubmit = true,
   showLoadingIndicator = true,
+  inputLabel = 'Search',
   queryHook,
   templates,
 } = {}) {
@@ -153,6 +157,7 @@ export default function searchBox({
     showReset,
     showSubmit,
     showLoadingIndicator,
+    inputLabel,
   });
 
   const makeWidget = connectSearchBox(specializedRenderer, () =>