mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 19:56:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3555 from matrix-org/t3chguy/a11y3

Browse source 
Accessibility fixes to autocomplete and tabpanels
This commit is contained in:
Michael Telatynski 2019-10-18 17:09:44 +01:00 committed by GitHub
commit 4494e3b61b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 38 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/autocomplete/CommandProvider.js
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">
return (
<div className="mx_Autocomplete_Completion_container_block" role="listbox" aria-label={_t("Command Autocomplete")}>
{ completions }
</div>;
</div>
);
}
}

2
src/autocomplete/Components.js
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>

10
src/autocomplete/DuckDuckGoProvider.js
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">
return (
<div
className="mx_Autocomplete_Completion_container_block"
role="listbox"
aria-label={_t("DuckDuckGo Results")}
>
{ completions }
</div>;
</div>
);
}
}

4
src/components/structures/FilePanel.js
View file

@ -117,8 +117,8 @@ const FilePanel = createReactClass({
// console.log("rendering TimelinePanel for timelineSet " + this.state.timelineSet.room.roomId + " " +
// "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId);
return (
<div className="mx_FilePanel" role="tabpanel">
<TimelinePanel key={"filepanel_" + this.props.roomId}
className="mx_FilePanel"
manageReadReceipts={false}
manageReadMarkers={false}
timelineSet={this.state.timelineSet}
@ -126,8 +126,8 @@ const FilePanel = createReactClass({
tileShape="file_grid"
resizeNotifier={this.props.resizeNotifier}
empty={_t('There are no visible files in this room')}
role="tabpanel"
/>
</div>
);
} else {
return (

4
src/components/structures/NotificationPanel.js
View file

@ -38,16 +38,16 @@ const NotificationPanel = createReactClass({
const timelineSet = MatrixClientPeg.get().getNotifTimelineSet();
if (timelineSet) {
return (
<div className="mx_NotificationPanel" role="tabpanel">
<TimelinePanel key={"NotificationPanel_" + this.props.roomId}
className="mx_NotificationPanel"
manageReadReceipts={false}
manageReadMarkers={false}
timelineSet={timelineSet}
showUrlPreview={false}
tileShape="notif"
empty={_t('You have no visible notifications')}
role="tabpanel"
/>
</div>
);
} else {
console.error("No notifTimelineSet available!");

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

@ -1745,8 +1745,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",