imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Integrate handleHomeEnd

Browse source
This commit is contained in:
Michael Telatynski 2020-01-20 20:31:36 +00:00
parent 4504d9b790
commit 0bcfe5819f
2 changed files with 18 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/accessibility/RovingTabIndex.js
View file

@ -23,6 +23,7 @@ import React, {
useRef, useRef,
useReducer, useReducer,
} from "react"; } from "react";
import PropTypes from "prop-types";
import {Key} from "../Keyboard"; 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, { const [state, dispatch] = useReducer(reducer, {
activeRef: null, activeRef: null,
refs: [], refs: [],
@ -136,13 +137,24 @@ export const RovingTabIndexProvider = ({children}) => {
const context = useMemo(() => ({state, dispatch}), [state]); const context = useMemo(() => ({state, dispatch}), [state]);
if (handleHomeEnd) {
return <RovingTabIndexContext.Provider value={context}>
<HomeEndHelper>
{ children }
</HomeEndHelper>
</RovingTabIndexContext.Provider>
}
return <RovingTabIndexContext.Provider value={context}> return <RovingTabIndexContext.Provider value={context}>
{children} { children }
</RovingTabIndexContext.Provider>; </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 // 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 context = useContext(RovingTabIndexContext);
const onKeyDown = useCallback((ev) => { const onKeyDown = useCallback((ev) => {

8
src/components/views/rooms/RoomList.js
View file

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