diff --git a/src/accessibility/RovingTabIndex.js b/src/accessibility/RovingTabIndex.js index 85aa133aa4..2445a47e35 100644 --- a/src/accessibility/RovingTabIndex.js +++ b/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 + + { children } + + + } + return - {children} + { children } ; }; +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) => { diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index a137a36c60..bd563b2f28 100644 --- a/src/components/views/rooms/RoomList.js +++ b/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} > - - - { subListComponents } - + + { subListComponents } );