A11y fix role-has-required-aria-props (#7455)

* remove jsx a11y direct use in eslintrc

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove debug

Signed-off-by: Kerry Archibald <kerrya@element.io>

* split aria-selected out from restProps in Autocomplete

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update Dropdown to aria 1.1 aria-owns -> aria-controls

Signed-off-by: Kerry Archibald <kerrya@element.io>

* unignore jsx-a11y/role-has-required-aria-props rule

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove debug

Signed-off-by: Kerry Archibald <kerrya@element.io>

.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",
     },

src/autocomplete/Components.tsx

@@ -31,11 +31,19 @@ interface ITextualCompletionProps {
 }
 
 export const TextualCompletion = forwardRef<ITextualCompletionProps, any>((props, ref) => {
-    const { title, subtitle, description, className, ...restProps } = props;
+    const {
+        title,
+        subtitle,
+        description,
+        className,
+        'aria-selected': ariaSelectedAttribute,
+        ...restProps
+    } = props;
     return (
         <div {...restProps}
             className={classNames('mx_Autocomplete_Completion_block', className)}
             role="option"
+            aria-selected={ariaSelectedAttribute}
             ref={ref}
         >
             <span className="mx_Autocomplete_Completion_title">{ title }</span>
@@ -50,11 +58,20 @@ interface IPillCompletionProps extends ITextualCompletionProps {
 }
 
 export const PillCompletion = forwardRef<IPillCompletionProps, any>((props, ref) => {
-    const { title, subtitle, description, className, children, ...restProps } = props;
+    const {
+        title,
+        subtitle,
+        description,
+        className,
+        children,
+        'aria-selected': ariaSelectedAttribute,
+        ...restProps
+    } = props;
     return (
         <div {...restProps}
             className={classNames('mx_Autocomplete_Completion_pill', className)}
             role="option"
+            aria-selected={ariaSelectedAttribute}
             ref={ref}
         >
             { children }

src/components/views/elements/Dropdown.tsx

@@ -313,7 +313,7 @@ export default class Dropdown extends React.Component<IProps, IState> {
             );
         });
         if (options.length === 0) {
-            return [<div key="0" className="mx_Dropdown_option" role="option">
+            return [<div key="0" className="mx_Dropdown_option" role="option" aria-selected={false}>
                 { _t("No results") }
             </div>];
         }
@@ -331,6 +331,7 @@ export default class Dropdown extends React.Component<IProps, IState> {
             if (this.props.searchEnabled) {
                 currentValue = (
                     <input
+                        id={`${this.props.id}_input`}
                         type="text"
                         autoFocus={true}
                         className="mx_Dropdown_option"
@@ -339,7 +340,8 @@ export default class Dropdown extends React.Component<IProps, IState> {
                         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<IProps, IState> {
                 inputRef={this.buttonRef}
                 aria-label={this.props.label}
                 aria-describedby={`${this.props.id}_value`}
+                aria-owns={`${this.props.id}_input`}
                 onKeyDown={this.onKeyDown}
             >
                 { currentValue }