Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[react-interactions] Refine a11y component flow types #17032

Merged
merged 1 commit into from
Oct 7, 2019
Merged

[react-interactions] Refine a11y component flow types #17032

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/react-interactions/accessibility/src/FocusContain.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@ export default function FocusContain({
children,
disabled,
tabScope: TabScope,
}: FocusContainProps) {
}: FocusContainProps): React.Node {
const scopeRef = useRef(null);
// This ensures tabbing works through the React tree (including Portals and Suspense nodes)
const keyboard = useKeyboard({
onKeyDown(event: KeyboardEvent): void {
if (disabled || event.key !== 'Tab') {
if (disabled === true || event.key !== 'Tab') {
event.continuePropagation();
return;
}
Expand All @@ -51,7 +51,7 @@ export default function FocusContain({
});
const focusWithin = useFocusWithin({
onBlurWithin: function(event) {
if (disabled) {
if (disabled === true) {
event.continuePropagation();
return;
}
Expand All @@ -66,7 +66,7 @@ export default function FocusContain({
useLayoutEffect(
() => {
const scope = scopeRef.current;
if (scope && !disabled) {
if (scope !== null && disabled !== true) {
const elems = scope.getScopedNodes();
if (elems && elems.indexOf(document.activeElement) === -1) {
elems[0].focus();
Expand Down
8 changes: 5 additions & 3 deletions packages/react-interactions/accessibility/src/FocusGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,9 @@ function hasModifierKey(event: KeyboardEvent): boolean {
);
}

export function createFocusGroup(scope: ReactScope): Array<React.Component> {
export function createFocusGroup(
scope: ReactScope,
): [(FocusGroupProps) => React.Node, (FocusItemProps) => React.Node] {
const TableScope = React.unstable_createScope(scope.fn);

function Group({
Expand All @@ -99,7 +101,7 @@ export function createFocusGroup(scope: ReactScope): Array<React.Component> {
wrap,
tabScope: TabScope,
allowModifiers,
}): FocusGroupProps {
}: FocusGroupProps): React.Node {
const tabScopeRef = useRef(null);
return (
<TableScope
Expand All @@ -117,7 +119,7 @@ export function createFocusGroup(scope: ReactScope): Array<React.Component> {
);
}

function Item({children, onKeyDown}): FocusItemProps {
function Item({children, onKeyDown}: FocusItemProps): React.Node {
const scopeRef = useRef(null);
const keyboard = useKeyboard({
onKeyDown(event: KeyboardEvent): void {
Expand Down
12 changes: 6 additions & 6 deletions packages/react-interactions/accessibility/src/FocusManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,16 @@ export function focusNext(
event.continuePropagation();
}
} else if (focusedElement === lastTabbableElem) {
if (contain) {
if (contain === true) {
focusElem(firstTabbableElem);
if (event) {
event.preventDefault();
}
} else if (event) {
event.continuePropagation();
}
} else {
focusElem((tabbableNodes: any)[currentIndex + 1]);
} else if (tabbableNodes) {
focusElem(tabbableNodes[currentIndex + 1]);
if (event) {
event.preventDefault();
}
Expand All @@ -75,16 +75,16 @@ export function focusPrevious(
event.continuePropagation();
}
} else if (focusedElement === firstTabbableElem) {
if (contain) {
if (contain === true) {
focusElem(lastTabbableElem);
if (event) {
event.preventDefault();
}
} else if (event) {
event.continuePropagation();
}
} else {
focusElem((tabbableNodes: any)[currentIndex - 1]);
} else if (tabbableNodes) {
focusElem(tabbableNodes[currentIndex - 1]);
if (event) {
event.preventDefault();
}
Expand Down
36 changes: 10 additions & 26 deletions packages/react-interactions/accessibility/src/FocusTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,28 +38,6 @@ type FocusTableProps = {|

const {useRef} = React;

export function focusFirstCellOnTable(table: ReactScopeMethods): void {
const rows = table.getChildren();
if (rows !== null) {
const firstRow = rows[0];
if (firstRow !== null) {
const cells = firstRow.getChildren();
if (cells !== null) {
const firstCell = cells[0];
if (firstCell !== null) {
const tabbableNodes = firstCell.getScopedNodes();
if (tabbableNodes !== null) {
const firstElem = tabbableNodes[0];
if (firstElem !== null) {
firstElem.focus();
}
}
}
}
}
}
}

function focusScope(cell: ReactScopeMethods, event?: KeyboardEvent): void {
const tabbableNodes = cell.getScopedNodes();
if (tabbableNodes !== null && tabbableNodes.length > 0) {
Expand Down Expand Up @@ -178,7 +156,13 @@ function hasModifierKey(event: KeyboardEvent): boolean {
);
}

export function createFocusTable(scope: ReactScope): Array<React.Component> {
export function createFocusTable(
scope: ReactScope,
): [
(FocusTableProps) => React.Node,
(FocusRowProps) => React.Node,
(FocusCellProps) => React.Node,
] {
const TableScope = React.unstable_createScope(scope.fn);

function Table({
Expand All @@ -188,7 +172,7 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
wrapY,
tabScope: TabScope,
allowModifiers,
}): FocusTableProps {
}: FocusTableProps): React.Node {
const tabScopeRef = useRef(null);
return (
<TableScope
Expand All @@ -207,11 +191,11 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
);
}

function Row({children}): FocusRowProps {
function Row({children}: FocusRowProps): React.Node {
return <TableScope type="row">{children}</TableScope>;
}

function Cell({children, onKeyDown, colSpan}): FocusCellProps {
function Cell({children, onKeyDown, colSpan}: FocusCellProps): React.Node {
const scopeRef = useRef(null);
const keyboard = useKeyboard({
onKeyDown(event: KeyboardEvent): void {
Expand Down
10 changes: 9 additions & 1 deletion packages/react-interactions/accessibility/src/shared/getTabbableNodes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,15 @@

import type {ReactScopeMethods} from 'shared/ReactTypes';

export default function getTabbableNodes(scope: ReactScopeMethods) {
export default function getTabbableNodes(
scope: ReactScopeMethods,
): [
null | Array<HTMLElement>,
null | HTMLElement,
null | HTMLElement,
number,
null | HTMLElement,
] {
const tabbableNodes = scope.getScopedNodes();
if (tabbableNodes === null || tabbableNodes.length === 0) {
return [null, null, null, 0, null];
Expand Down