Add aria-label prop for listbox element

README.md

@@ -174,6 +174,7 @@ 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.                                                                                                                                                        |
+| [`ariaLabel`](#aria-label-prop)                                        | String   |                                                  | Use it if you need to set an aria-label to select box. |
 | [`id`](#id-prop)                                                       | String   |                                                  | Use it only if you have multiple Autosuggest components on a page.                                                                                                                                    |
 
 <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)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-autosuggest",
-  "version": "10.0.1",
+  "version": "10.0.2",
   "description": "WAI-ARIA compliant React autosuggest component",
   "main": "dist/index.js",
   "repository": {

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];
 
@@ -522,7 +523,8 @@ export default class Autosuggest extends Component {
       theme,
       getSuggestionValue,
       alwaysRenderSuggestions,
-      highlightFirstSuggestion,
+      ariaLabel,
+      highlightFirstSuggestion
     } = this.props;
     const {
       isFocused,
@@ -762,6 +764,7 @@ export default class Autosuggest extends Component {
         itemProps={this.itemProps}
         theme={mapToAutowhateverTheme(theme)}
         id={id}
+        ariaLabel={ariaLabel}
         ref={this.storeAutowhateverRef}
       />
     );

src/Autowhatever.js

@@ -40,6 +40,7 @@ export default class Autowhatever extends Component {
     getSectionItems: PropTypes.func, // This function gets a section and returns its items, which will be passed into `renderItem` for rendering.
     containerProps: PropTypes.object, // Arbitrary container props
     inputProps: PropTypes.object, // Arbitrary input props
+    ariaLabel: PropTypes.string, // value for `aria-label` on ItemList
     itemProps: PropTypes.oneOfType([
       // Arbitrary item props
       PropTypes.object,
@@ -195,6 +196,7 @@ export default class Autowhatever extends Component {
       highlightedSectionIndex,
       highlightedItemIndex,
       itemProps,
+      ariaLabel,
     } = this.props;
 
     return items.map((section, sectionIndex) => {
@@ -234,6 +236,7 @@ export default class Autowhatever extends Component {
             theme={theme}
             keyPrefix={keyPrefix}
             ref={this.storeItemsListReference}
+            ariaLabel={ariaLabel}
           />
         </div>
       );
@@ -256,6 +259,7 @@ export default class Autowhatever extends Component {
       highlightedSectionIndex,
       highlightedItemIndex,
       itemProps,
+      ariaLabel
     } = this.props;
 
     return (
@@ -271,6 +275,7 @@ export default class Autowhatever extends Component {
         getItemId={this.getItemId}
         theme={theme}
         keyPrefix={`react-autowhatever-${id}-`}
+        ariaLabel={ariaLabel}
       />
     );
   }

src/ItemList.js

@@ -15,6 +15,7 @@ export default class ItemsList extends Component {
     getItemId: PropTypes.func.isRequired,
     theme: PropTypes.func.isRequired,
     keyPrefix: PropTypes.string.isRequired,
+    ariaLabel: PropTypes.string,
   };
 
   static defaultProps = {
@@ -42,6 +43,7 @@ export default class ItemsList extends Component {
       getItemId,
       theme,
       keyPrefix,
+      ariaLabel,
     } = this.props;
     const sectionPrefix =
       sectionIndex === null
@@ -50,7 +52,7 @@ export default class ItemsList extends Component {
     const isItemPropsFunction = typeof itemProps === 'function';
 
     return (
-      <ul role="listbox" {...theme(`${sectionPrefix}items-list`, 'itemsList')}>
+      <ul role="listbox" aria-label={ariaLabel} {...theme(`${sectionPrefix}items-list`, 'itemsList')}>
         {items.map((item, itemIndex) => {
           const isFirst = itemIndex === 0;
           const isHighlighted = itemIndex === highlightedItemIndex;