PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
* 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>
This commit is contained in:
Kerry 2022-01-04 09:46:21 +01:00 committed by GitHub
parent 846fbfa2a0
commit aaf14aacd2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintrc.js
View file

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

21
src/autocomplete/Components.tsx
View file

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

7
src/components/views/elements/Dropdown.tsx
View file

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