Make breadcrumbs more accessible

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2019-10-23 12:11:37 +01:00
parent 744fc5ca6a
commit 4dd0f6d902
1 changed files with 19 additions and 6 deletions

View File

@ -346,8 +346,15 @@ export default class RoomBreadcrumbs extends React.Component {
}
return (
<AccessibleButton className={classes} key={r.room.roomId} onClick={() => this._viewRoom(r.room, i)}
onMouseEnter={() => this._onMouseEnter(r.room)} onMouseLeave={() => this._onMouseLeave(r.room)}>
<AccessibleButton
className={classes}
key={r.room.roomId}
onClick={() => this._viewRoom(r.room, i)}
onMouseEnter={() => this._onMouseEnter(r.room)}
onMouseLeave={() => this._onMouseLeave(r.room)}
aria-label={_t("Room %(name)s", {name: r.room.name})}
role="listitem"
>
<RoomAvatar room={r.room} width={32} height={32} />
{badge}
{dmIndicator}
@ -356,10 +363,16 @@ export default class RoomBreadcrumbs extends React.Component {
);
});
return (
<IndicatorScrollbar ref="scroller" className="mx_RoomBreadcrumbs"
trackHorizontalOverflow={true} verticalScrollsHorizontally={true}>
{ avatars }
</IndicatorScrollbar>
<div role="list" aria-orientation="horizontal" aria-roledescription={_t("Recent rooms.")}>
<IndicatorScrollbar
ref="scroller"
className="mx_RoomBreadcrumbs"
trackHorizontalOverflow={true}
verticalScrollsHorizontally={true}
>
{ avatars }
</IndicatorScrollbar>
</div>
);
}
}