Improve A11Y for Autocomplete Commands and DDG

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
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>
);
}
}

View File

@ -1740,8 +1740,10 @@
"Clear personal data": "Clear personal data",
"Warning: Your personal data (including encryption keys) is still stored on this device. Clear it if you're finished using this device, or want to sign in to another account.": "Warning: Your personal data (including encryption keys) is still stored on this device. Clear it if you're finished using this device, or want to sign in to another account.",
"Commands": "Commands",
"Command Autocomplete": "Command Autocomplete",
"Community Autocomplete": "Community Autocomplete",
"Results from DuckDuckGo": "Results from DuckDuckGo",
"DuckDuckGo Results": "DuckDuckGo Results",
"Emoji": "Emoji",
"Emoji Autocomplete": "Emoji Autocomplete",
"Notify the whole room": "Notify the whole room",