Integrate handleHomeEnd

src/accessibility/RovingTabIndex.js

@@ -23,6 +23,7 @@ import React, {
     useRef,
     useReducer,
 } from "react";
+import PropTypes from "prop-types";
 import {Key} from "../Keyboard";
 
 /**
@@ -128,7 +129,7 @@ const reducer = (state, action) => {
     }
 };
 
-export const RovingTabIndexProvider = ({children}) => {
+export const RovingTabIndexProvider = ({children, handleHomeEnd}) => {
     const [state, dispatch] = useReducer(reducer, {
         activeRef: null,
         refs: [],
@@ -136,13 +137,24 @@ export const RovingTabIndexProvider = ({children}) => {
 
     const context = useMemo(() => ({state, dispatch}), [state]);
 
+    if (handleHomeEnd) {
+        return <RovingTabIndexContext.Provider value={context}>
+            <HomeEndHelper>
+                { children }
+            </HomeEndHelper>
+        </RovingTabIndexContext.Provider>
+    }
+
     return <RovingTabIndexContext.Provider value={context}>
-        {children}
+        { children }
     </RovingTabIndexContext.Provider>;
 };
+RovingTabIndexProvider.propTypes = {
+    handleHomeEnd: PropTypes.bool,
+};
 
 // Helper to handle Home/End to jump to first/last roving-tab-index for widgets such as treeview
-export const RovingTabIndexHomeEndHelper = ({children}) => {
+export const HomeEndHelper = ({children}) => {
     const context = useContext(RovingTabIndexContext);
 
     const onKeyDown = useCallback((ev) => {

src/components/views/rooms/RoomList.js

@@ -39,7 +39,7 @@ import * as sdk from "../../../index";
 import * as Receipt from "../../../utils/Receipt";
 import {Resizer} from '../../../resizer';
 import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
-import {RovingTabIndexProvider, RovingTabIndexHomeEndHelper} from "../../../accessibility/RovingTabIndex";
+import {RovingTabIndexProvider} from "../../../accessibility/RovingTabIndex";
 
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
@@ -788,10 +788,8 @@ export default createReactClass({
                 onMouseMove={this.onMouseMove}
                 onMouseLeave={this.onMouseLeave}
             >
-                <RovingTabIndexProvider>
-                    <RovingTabIndexHomeEndHelper>
-                        { subListComponents }
-                    </RovingTabIndexHomeEndHelper>
+                <RovingTabIndexProvider handleHomeEnd={true}>
+                    { subListComponents }
                 </RovingTabIndexProvider>
             </div>
         );