Add aria-label for accessibility

README.md

@@ -174,7 +174,8 @@ class Example extends React.Component {
 | [`renderInputComponent`](#render-input-component-prop)                 | Function |                                                  | Use it only if you need to customize the rendering of the input.                                                                                                                                      |
 | [`renderSuggestionsContainer`](#render-suggestions-container-prop)     | Function |                                                  | Use it if you want to customize things inside the suggestions container beyond rendering the suggestions themselves.                                                                                  |
 | [`theme`](#theme-prop)                                                 | Object   |                                                  | Use your imagination to style the Autosuggest.                                                                                                                                                        |
-| [`id`](#id-prop)                                                       | String   |                                                  | Use it only if you have multiple Autosuggest components on a page.                                                                                                                                    |
+| [`id`](#id-prop)                                                       | String   |                                                  | Use it only if you have multiple Autosuggest components on a page.  
+| [`ariaLabel`](#aria-label-prop)                                        | String   |                                                  | Use it if you need to set an aria-label to select box. 
 
 <a name="suggestions-prop"></a>
 
@@ -631,6 +632,11 @@ The following picture illustrates how `theme` keys correspond to Autosuggest DOM
 
 ![DOM structure](dom-structure.png)
 
+<a name="aria-label-prop"></a>
+#### ariaLabel (optional)
+
+Aria-label can be added to props, so that the input field of AutoSuggest is accessible. By default it is set to `search`.
+
 <a name="id-prop"></a>
 
 #### id (required when multiple Autosuggest components are rendered on a page)

src/Autosuggest.js

@@ -54,6 +54,7 @@ export default class Autosuggest extends Component {
     shouldRenderSuggestions: PropTypes.func,
     alwaysRenderSuggestions: PropTypes.bool,
     multiSection: PropTypes.bool,
+    ariaLabel: PropTypes.string,
     renderSectionTitle: (props, propName) => {
       const renderSectionTitle = props[propName];
 
@@ -92,7 +93,8 @@ export default class Autosuggest extends Component {
     focusInputOnSuggestionClick: true,
     highlightFirstSuggestion: false,
     theme: defaultTheme,
-    id: '1',
+    ariaLabel: 'search',
+    id: '1'
   };
 
   constructor({ alwaysRenderSuggestions }) {
@@ -522,7 +524,8 @@ export default class Autosuggest extends Component {
       theme,
       getSuggestionValue,
       alwaysRenderSuggestions,
-      highlightFirstSuggestion,
+      ariaLabel,
+      highlightFirstSuggestion
     } = this.props;
     const {
       isFocused,
@@ -762,6 +765,7 @@ export default class Autosuggest extends Component {
         itemProps={this.itemProps}
         theme={mapToAutowhateverTheme(theme)}
         id={id}
+        ariaLabel={ariaLabel}
         ref={this.storeAutowhateverRef}
       />
     );