diff --git a/README.md b/README.md
index 80adda87..aa6b5e0e 100644
--- a/README.md
+++ b/README.md
@@ -163,6 +163,7 @@ class Example extends React.Component {
| [`getSuggestionValue`](#get-suggestion-value-prop) | Function | ✓ | Implement it to teach Autosuggest what should be the input value when suggestion is clicked. |
| [`renderSuggestion`](#render-suggestion-prop) | Function | ✓ | Use your imagination to define how suggestions are rendered. |
| [`inputProps`](#input-props-prop) | Object | ✓ | Pass through arbitrary props to the input. It must contain at least `value` and `onChange`. |
+| [`containerProps`](#container-props-prop) | Object | | Pass through arbitrary props to the container. Useful if you need to override the default props set by Autowhatever, for example, for accessibility. |
| [`onSuggestionSelected`](#on-suggestion-selected-prop) | Function | | Will be called every time suggestion is selected via mouse or keyboard. |
| [`onSuggestionHighlighted`](#on-suggestion-highlighted-prop) | Function | | Will be called every time the highlighted suggestion changes. |
| [`shouldRenderSuggestions`](#should-render-suggestions-prop) | Function | | When the input is focused, Autosuggest will consult this function when to render suggestions. Use it, for example, if you want to display suggestions when input value is at least 2 characters long. |
@@ -367,6 +368,19 @@ where:
- `highlightedSuggestion` - the suggestion that was highlighted just before the input lost focus, or `null` if there was no highlighted suggestion.
+
+
+#### containerProps
+
+Provides arbitrary properties to the outer `div` container of Autosuggest. Allows the override of accessibility properties.
+
+```js
+const containerProps = {
+ dataId: 'my-data-id'
+ // ... any other properties
+};
+```
+
#### onSuggestionSelected (optional)
diff --git a/src/Autosuggest.js b/src/Autosuggest.js
index 433e43c9..6f3269da 100644
--- a/src/Autosuggest.js
+++ b/src/Autosuggest.js
@@ -95,6 +95,7 @@ export default class Autosuggest extends Component {
highlightFirstSuggestion: PropTypes.bool,
theme: PropTypes.object,
id: PropTypes.string,
+ containerProps: PropTypes.object, // Arbitrary container props
};
static defaultProps = {
@@ -107,6 +108,7 @@ export default class Autosuggest extends Component {
highlightFirstSuggestion: false,
theme: defaultTheme,
id: '1',
+ containerProps: {},
};
constructor({ alwaysRenderSuggestions }) {
@@ -558,6 +560,7 @@ export default class Autosuggest extends Component {
getSuggestionValue,
alwaysRenderSuggestions,
highlightFirstSuggestion,
+ containerProps,
} = this.props;
const {
isFocused,
@@ -806,6 +809,7 @@ export default class Autosuggest extends Component {
getSectionItems={getSectionSuggestions}
highlightedSectionIndex={highlightedSectionIndex}
highlightedItemIndex={highlightedSuggestionIndex}
+ containerProps={containerProps}
inputProps={autowhateverInputProps}
itemProps={this.itemProps}
theme={mapToAutowhateverTheme(theme)}