mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-25 02:35:48 +03:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats 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,
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) => {

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 {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>
);