diff --git a/README.md b/README.md index edfb30e5..7b2dce3c 100644 --- a/README.md +++ b/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. @@ -631,6 +632,11 @@ The following picture illustrates how `theme` keys correspond to Autosuggest DOM ![DOM structure](dom-structure.png) + +#### 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`. + #### id (required when multiple Autosuggest components are rendered on a page) diff --git a/src/Autosuggest.js b/src/Autosuggest.js index bc010aee..1a1db27b 100644 --- a/src/Autosuggest.js +++ b/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} /> );