From 4dd0f6d902d7f1b6790730c750b011675c38f35b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 23 Oct 2019 12:11:37 +0100
Subject: [PATCH] Make breadcrumbs more accessible

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/RoomBreadcrumbs.js | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js
index 2cbdc31464..d1d407ea00 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.js
+++ b/src/components/views/rooms/RoomBreadcrumbs.js
@@ -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>
         );
     }
 }