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>
2022-01-04 08:46:21 +00:00
parent 846fbfa2a0
commit aaf14aacd2
3 changed files with 24 additions and 5 deletions
@@ -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 }