diff --git a/README.md b/README.md index edfb30e5..5849146b 100644 --- a/README.md +++ b/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. | @@ -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/package-lock.json b/package-lock.json index be135cb9..a9cb40b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-autosuggest", - "version": "10.0.1", + "version": "10.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index ec55b56c..f6597100 100644 --- a/package.json +++ b/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": { diff --git a/src/Autosuggest.js b/src/Autosuggest.js index bc010aee..45dc9e2f 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]; @@ -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} /> ); diff --git a/src/Autowhatever.js b/src/Autowhatever.js index 18d28869..ecaebc69 100644 --- a/src/Autowhatever.js +++ b/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} /> ); @@ -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} /> ); } diff --git a/src/ItemList.js b/src/ItemList.js index b67af2df..f01fa2f1 100644 --- a/src/ItemList.js +++ b/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 ( -