From aaf14aacd23478bdc414329b72ac0ebbda91a322 Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Tue, 4 Jan 2022 09:46:21 +0100
Subject: [PATCH] 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                               |  1 -
 src/autocomplete/Components.tsx            | 21 +++++++++++++++++++--
 src/components/views/elements/Dropdown.tsx |  7 +++++--
 3 files changed, 24 insertions(+), 5 deletions(-)

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<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 }
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<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 }