Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-17 05:55:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve A11Y for Autocomplete Commands and DDG

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/autocomplete/CommandProvider.js
View File

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

2
src/autocomplete/Components.js
View File

@ -34,7 +34,7 @@ export class TextualCompletion extends React.Component {
...restProps ...restProps
} = this.props; } = this.props;
return ( 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_title">{ title }</span>
<span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span> <span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span>
<span className="mx_Autocomplete_Completion_description">{ description }</span> <span className="mx_Autocomplete_Completion_description">{ description }</span>

12
src/autocomplete/DuckDuckGoProvider.js
View File

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

2
src/i18n/strings/en_EN.json
View File

@ -1740,8 +1740,10 @@
"Clear personal data": "Clear personal data", "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.", "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", "Commands": "Commands",
"Command Autocomplete": "Command Autocomplete",
"Community Autocomplete": "Community Autocomplete", "Community Autocomplete": "Community Autocomplete",
"Results from DuckDuckGo": "Results from DuckDuckGo", "Results from DuckDuckGo": "Results from DuckDuckGo",
"DuckDuckGo Results": "DuckDuckGo Results",
"Emoji": "Emoji", "Emoji": "Emoji",
"Emoji Autocomplete": "Emoji Autocomplete", "Emoji Autocomplete": "Emoji Autocomplete",
"Notify the whole room": "Notify the whole room", "Notify the whole room": "Notify the whole room",