Merge pull request #5017 from matrix-org/t3chguy/fix/14596

Fix Breadcrumbs2 ending up with 2 tabIndexes on Firefox

src/components/structures/AutoHideScrollbar.js

@@ -38,12 +38,13 @@ export default class AutoHideScrollbar extends React.Component {
 
     render() {
         return (<div
-                    ref={this._collectContainerRef}
+            ref={this._collectContainerRef}
-                    style={this.props.style}
+            style={this.props.style}
-                    className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
+            className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
-                    onScroll={this.props.onScroll}
+            onScroll={this.props.onScroll}
-                    onWheel={this.props.onWheel}
+            onWheel={this.props.onWheel}
-                >
+            tabIndex={this.props.tabIndex}
+        >
             { this.props.children }
         </div>);
     }

src/components/structures/IndicatorScrollbar.js

@@ -192,7 +192,7 @@ export default class IndicatorScrollbar extends React.Component {
             ref={this._collectScrollerComponent}
             wrappedRef={this._collectScroller}
             onWheel={this.onMouseWheel}
-            {... this.props}
+            {...this.props}
         >
             { leftOverflowIndicator }
             { this.props.children }

src/components/structures/LeftPanel.tsx

@@ -324,6 +324,9 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 <IndicatorScrollbar
                     className="mx_LeftPanel_breadcrumbsContainer mx_AutoHideScrollbar"
                     verticalScrollsHorizontally={true}
+                    // Firefox sometimes makes this element focusable due to
+                    // overflow:scroll;, so force it out of tab order.
+                    tabIndex={-1}
                 >
                     <RoomBreadcrumbs />
                 </IndicatorScrollbar>