From d91e4b5282217387461db947992fdaea318cbf40 Mon Sep 17 00:00:00 2001 From: Ivditi Gabeskiria Date: Thu, 6 Jun 2019 19:47:39 -0400 Subject: [PATCH 1/5] added aria label --- src/Autosuggest.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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} /> ); From 215e5fcb0a785ff99f03daa6c4ae9aa482f85b2a Mon Sep 17 00:00:00 2001 From: Ivditi Gabeskiria Date: Thu, 6 Jun 2019 19:58:23 -0400 Subject: [PATCH 2/5] updated README to include an example --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index edfb30e5..52f8c6bc 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) + +#### theme (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) From d81c52f9731515b4e9f1884830211931d9d94304 Mon Sep 17 00:00:00 2001 From: Ivditi Gabeskiria Date: Thu, 6 Jun 2019 20:00:39 -0400 Subject: [PATCH 3/5] fix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 52f8c6bc..5849146b 100644 --- a/README.md +++ b/README.md @@ -633,7 +633,7 @@ The following picture illustrates how `theme` keys correspond to Autosuggest DOM ![DOM structure](dom-structure.png) -#### theme (optional) +#### 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`. From c239926a001987359d24f48705e9d7d27dfb6e11 Mon Sep 17 00:00:00 2001 From: Sam Beam Date: Mon, 5 Oct 2020 14:53:26 -0400 Subject: [PATCH 4/5] pass ariaLabel down to listbox element --- src/Autowhatever.js | 5 +++++ src/ItemList.js | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) 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 ( -
    +
      {items.map((item, itemIndex) => { const isFirst = itemIndex === 0; const isHighlighted = itemIndex === highlightedItemIndex; From f89051dca9ae8d67363794eb5629dedcd177df4f Mon Sep 17 00:00:00 2001 From: Sam Beam Date: Tue, 6 Oct 2020 11:05:07 -0400 Subject: [PATCH 5/5] bump version 10.0.2 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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": {