Improve A11Y for Autocomplete Commands and DDG

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2019-10-14 10:37:10 +01:00
parent 385e83fdbc
commit c882b7f332
4 changed files with 17 additions and 7 deletions

View file

@ -78,8 +78,10 @@ export default class CommandProvider extends AutocompleteProvider {
}
renderCompletions(completions: [React.Component]): ?React.Component {
return <div className="mx_Autocomplete_Completion_container_block">
{ completions }
</div>;
return (
<div className="mx_Autocomplete_Completion_container_block" role="listbox" aria-label={_t("Command Autocomplete")}>
{ completions }
</div>
);
}
}

View file

@ -34,7 +34,7 @@ export class TextualCompletion extends React.Component {
...restProps
} = this.props;
return (
<div className={classNames('mx_Autocomplete_Completion_block', className)} {...restProps}>
<div className={classNames('mx_Autocomplete_Completion_block', className)} role="option" {...restProps}>
<span className="mx_Autocomplete_Completion_title">{ title }</span>
<span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span>
<span className="mx_Autocomplete_Completion_description">{ description }</span>

View file

@ -97,8 +97,14 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
}
renderCompletions(completions: [React.Component]): ?React.Component {
return <div className="mx_Autocomplete_Completion_container_block">
{ completions }
</div>;
return (
<div
className="mx_Autocomplete_Completion_container_block"
role="listbox"
aria-label={_t("DuckDuckGo Results")}
>
{ completions }
</div>
);
}
}