imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make Autocomplete more accessible to screen reader users

Browse source 
Use ARIA to:
 + notate that the composer has an autocomplete
 + notate the open/closed state of the autocomplete
 + notate the name of the open autocomplete options
 + notate the ID of the highlighted autocomplete option
 + improve naming of emoji autocomplete options for screen readers

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2019-09-30 14:04:39 +01:00
parent ca0130db02
commit f160a308b4
9 changed files with 63 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/autocomplete/CommunityProvider.js
View file

@ -105,8 +105,14 @@ export default class CommunityProvider extends AutocompleteProvider {
}
renderCompletions(completions: [React.Component]): ?React.Component {
return <div className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate">
{ completions }
</div>;
return (
<div
className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"
role="listbox"
aria-label={_t("Community Autocomplete")}
>
{ completions }
</div>
);
}
}