matrix-react-sdk/lib/src/accessibility/RovingTabIndex.d.ts

SDK for matrix.org using React

import React, { Reducer, Dispatch, RefObject, ReactNode } from "react";
import { FocusHandler, Ref } from "./roving/types";
/**
 * Module to simplify implementing the Roving TabIndex accessibility technique
 *
 * Wrap the Widget in an RovingTabIndexContextProvider
 * and then for all buttons make use of useRovingTabIndex or RovingTabIndexWrapper.
 * The code will keep track of which tabIndex was most recently focused and expose that information as `isActive` which
 * can then be used to only set the tabIndex to 0 as expected by the roving tabindex technique.
 * When the active button gets unmounted the closest button will be chosen as expected.
 * Initially the first button to mount will be given active state.
 *
 * https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets#Technique_1_Roving_tabindex
 */
export declare function checkInputableElement(el: HTMLElement): boolean;
export interface IState {
    activeRef?: Ref;
    refs: Ref[];
}
export interface IContext {
    state: IState;
    dispatch: Dispatch<IAction>;
}
export declare const RovingTabIndexContext: React.Context<IContext>;
export declare enum Type {
    Register = "REGISTER",
    Unregister = "UNREGISTER",
    SetFocus = "SET_FOCUS",
    Update = "UPDATE"
}
export interface IAction {
    type: Exclude<Type, Type.Update>;
    payload: {
        ref: Ref;
    };
}
interface UpdateAction {
    type: Type.Update;
    payload?: undefined;
}
type Action = IAction | UpdateAction;
export declare const reducer: Reducer<IState, Action>;
interface IProps {
    handleLoop?: boolean;
    handleHomeEnd?: boolean;
    handleUpDown?: boolean;
    handleLeftRight?: boolean;
    handleInputFields?: boolean;
    scrollIntoView?: boolean | ScrollIntoViewOptions;
    children(renderProps: {
        onKeyDownHandler(ev: React.KeyboardEvent): void;
        onDragEndHandler(): void;
    }): ReactNode;
    onKeyDown?(ev: React.KeyboardEvent, state: IState, dispatch: Dispatch<IAction>): void;
}
export declare const findSiblingElement: (refs: RefObject<HTMLElement>[], startIndex: number, backwards?: boolean, loop?: boolean) => RefObject<HTMLElement> | undefined;
export declare const RovingTabIndexProvider: React.FC<IProps>;
export declare const useRovingTabIndex: <T extends HTMLElement>(inputRef?: RefObject<T>) => [FocusHandler, boolean, RefObject<T>];
export { RovingTabIndexWrapper } from "./roving/RovingTabIndexWrapper";
export { RovingAccessibleButton } from "./roving/RovingAccessibleButton";