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

Merge pull request #3499 from matrix-org/t3chguy/accessibility2

Browse source 
Accessibility fixes to the LeftPanel
This commit is contained in:
Michael Telatynski 2019-10-01 12:21:45 +01:00 • committed by GitHub
commit 891eb7af3f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 45 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/elements/AccessibleButton.js
View file

@ -68,7 +68,7 @@ export default function AccessibleButton(props) {
delete restProps.inputRef;
restProps.tabIndex = restProps.tabIndex || "0";
restProps.role = "button";
restProps.role = restProps.role || "button";
restProps.className = (restProps.className ? restProps.className + " " : "") + "mx_AccessibleButton";
if (kind) {

2
src/components/views/rooms/RoomList.js
View file

@ -805,7 +805,7 @@ module.exports = createReactClass({
const subListComponents = this._mapSubListProps(subLists);
return (
<div ref={this._collectResizeContainer} className="mx_RoomList"
<div ref={this._collectResizeContainer} className="mx_RoomList" role="listbox" aria-label={_t("Rooms")}
onMouseMove={this.onMouseMove} onMouseLeave={this.onMouseLeave}>
{ subListComponents }
</div>

15
src/components/views/rooms/RoomTile.js
View file

@ -33,6 +33,7 @@ import AccessibleButton from '../elements/AccessibleButton';
import ActiveRoomObserver from '../../../ActiveRoomObserver';
import RoomViewStore from '../../../stores/RoomViewStore';
import SettingsStore from "../../../settings/SettingsStore";
import {_t} from "../../../languageHandler";
module.exports = createReactClass({
displayName: 'RoomTile',
@ -368,6 +369,8 @@ module.exports = createReactClass({
const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
let ariaLabel = name;
let dmIndicator;
if (this._isDirectMessageRoom(this.props.room.roomId)) {
dmIndicator = <img
@ -379,12 +382,24 @@ module.exports = createReactClass({
/>;
}
if (notifBadges && mentionBadges && !isInvite) {
ariaLabel += " " + _t("It has %(count)s unread messages including mentions.", {
count: notificationCount,
});
} else if (notifBadges) {
ariaLabel += " " + _t("It has %(count)s unread messages.", { count: notificationCount });
} else if (mentionBadges && !isInvite) {
ariaLabel += " " + _t("It has unread mentions.");
}
return <AccessibleButton tabIndex="0"
className={classes}
onClick={this.onClick}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
onContextMenu={this.onContextMenu}
aria-label={ariaLabel}
role="option"
>
<div className={avatarClasses}>
<div className="mx_RoomTile_avatar_container">