diff --git a/.eslintrc.js b/.eslintrc.js index 3ba045803f..2090ef2220 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -56,7 +56,6 @@ module.exports = { "jsx-a11y/no-noninteractive-element-to-interactive-role": "off", "jsx-a11y/no-noninteractive-tabindex": "off", "jsx-a11y/no-static-element-interactions": "off", - "jsx-a11y/role-has-required-aria-props": "off", "jsx-a11y/role-supports-aria-props": "off", "jsx-a11y/tabindex-no-positive": "off", }, diff --git a/src/autocomplete/Components.tsx b/src/autocomplete/Components.tsx index 8f155f7f55..079e407c5e 100644 --- a/src/autocomplete/Components.tsx +++ b/src/autocomplete/Components.tsx @@ -31,11 +31,19 @@ interface ITextualCompletionProps { } export const TextualCompletion = forwardRef((props, ref) => { - const { title, subtitle, description, className, ...restProps } = props; + const { + title, + subtitle, + description, + className, + 'aria-selected': ariaSelectedAttribute, + ...restProps + } = props; return (
{ title } @@ -50,11 +58,20 @@ interface IPillCompletionProps extends ITextualCompletionProps { } export const PillCompletion = forwardRef((props, ref) => { - const { title, subtitle, description, className, children, ...restProps } = props; + const { + title, + subtitle, + description, + className, + children, + 'aria-selected': ariaSelectedAttribute, + ...restProps + } = props; return (
{ children } diff --git a/src/components/views/elements/Dropdown.tsx b/src/components/views/elements/Dropdown.tsx index 4a21898bed..5689b7666f 100644 --- a/src/components/views/elements/Dropdown.tsx +++ b/src/components/views/elements/Dropdown.tsx @@ -313,7 +313,7 @@ export default class Dropdown extends React.Component { ); }); if (options.length === 0) { - return [
+ return [
{ _t("No results") }
]; } @@ -331,6 +331,7 @@ export default class Dropdown extends React.Component { if (this.props.searchEnabled) { currentValue = ( { role="combobox" aria-autocomplete="list" aria-activedescendant={`${this.props.id}__${this.state.highlightedOption}`} - aria-owns={`${this.props.id}_listbox`} + aria-expanded={this.state.expanded} + aria-controls={`${this.props.id}_listbox`} aria-disabled={this.props.disabled} aria-label={this.props.label} onKeyDown={this.onKeyDown} @@ -382,6 +384,7 @@ export default class Dropdown extends React.Component { inputRef={this.buttonRef} aria-label={this.props.label} aria-describedby={`${this.props.id}_value`} + aria-owns={`${this.props.id}_input`} onKeyDown={this.onKeyDown} > { currentValue }