Implement roving tab index context based magic thing and demo on LeftPanel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/rooms/RoomList.js

@@ -41,6 +41,7 @@ import ResizeHandle from '../elements/ResizeHandle';
 
 import {Resizer} from '../../../resizer';
 import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
+import {RovingTabIndexContextWrapper} from "../../../contexts/RovingTabIndexContext";
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
 const HOVER_MOVE_TIMEOUT = 1000;
@@ -788,7 +789,9 @@ module.exports = createReactClass({
                 onMouseMove={this.onMouseMove}
                 onMouseLeave={this.onMouseLeave}
             >
-                { subListComponents }
+                <RovingTabIndexContextWrapper>
+                    { subListComponents }
+                </RovingTabIndexContextWrapper>
             </div>
         );
     },

src/components/views/rooms/RoomTile.js

@@ -32,6 +32,7 @@ import ActiveRoomObserver from '../../../ActiveRoomObserver';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import SettingsStore from "../../../settings/SettingsStore";
 import {_t} from "../../../languageHandler";
+import {RovingTabIndex} from "../../../contexts/RovingTabIndexContext";
 
 module.exports = createReactClass({
     displayName: 'RoomTile',
@@ -432,8 +433,9 @@ module.exports = createReactClass({
         }
 
         return <React.Fragment>
-            <AccessibleButton
-                tabIndex="0"
+            <RovingTabIndex
+                component={AccessibleButton}
+                useInputRef
                 className={classes}
                 onClick={this.onClick}
                 onMouseEnter={this.onMouseEnter}
@@ -461,7 +463,7 @@ module.exports = createReactClass({
                 </div>
                 { /* { incomingCallBox } */ }
                 { tooltip }
-            </AccessibleButton>
+            </RovingTabIndex>
 
             { contextMenu }
         </React.Fragment>;