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

Make breadcrumbs more accessible

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2019-10-23 12:11:37 +01:00
parent 744fc5ca6a
commit 4dd0f6d902
1 changed files with 19 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/views/rooms/RoomBreadcrumbs.js
View file

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