[react-interactions] Refine a11y component flow types (#17032)
Dominic Gannaway committed
Oct 7, 2019 at 16:36 UTC
55731fd8ce7d36a482a50a120cd4da0584ce49de
5 files changed
+34
-40
packages/react-interactions/accessibility/src/FocusContain.js
+4
-4
@@ -30,12 +30,12 @@ export default function FocusContain({
30
children,
31
disabled,
32
tabScope: TabScope,
33
-}: FocusContainProps) {
33
+}: FocusContainProps): React.Node {
34
const scopeRef = useRef(null);
35
// This ensures tabbing works through the React tree (including Portals and Suspense nodes)
36
const keyboard = useKeyboard({
37
onKeyDown(event: KeyboardEvent): void {
38
- if (disabled || event.key !== 'Tab') {
38
+ if (disabled === true || event.key !== 'Tab') {
39
event.continuePropagation();
40
return;
41
}
@@ -51,7 +51,7 @@ export default function FocusContain({
51
});
52
const focusWithin = useFocusWithin({
53
onBlurWithin: function(event) {
54
- if (disabled) {
54
+ if (disabled === true) {
55
event.continuePropagation();
56
return;
57
}
@@ -66,7 +66,7 @@ export default function FocusContain({
66
useLayoutEffect(
67
() => {
68
const scope = scopeRef.current;
69
- if (scope && !disabled) {
69
+ if (scope !== null && disabled !== true) {
70
const elems = scope.getScopedNodes();
71
if (elems && elems.indexOf(document.activeElement) === -1) {
72
elems[0].focus();
packages/react-interactions/accessibility/src/FocusGroup.js
+5
-3
@@ -90,7 +90,9 @@ function hasModifierKey(event: KeyboardEvent): boolean {
90
);
91
}
92
93
-export function createFocusGroup(scope: ReactScope): Array<React.Component> {
93
+export function createFocusGroup(
94
+ scope: ReactScope,
95
+): [(FocusGroupProps) => React.Node, (FocusItemProps) => React.Node] {
96
const TableScope = React.unstable_createScope(scope.fn);
97
98
function Group({
@@ -99,7 +101,7 @@ export function createFocusGroup(scope: ReactScope): Array<React.Component> {
101
wrap,
102
tabScope: TabScope,
103
allowModifiers,
102
- }): FocusGroupProps {
104
+ }: FocusGroupProps): React.Node {
105
const tabScopeRef = useRef(null);
106
return (
107
<TableScope
@@ -117,7 +119,7 @@ export function createFocusGroup(scope: ReactScope): Array<React.Component> {
119
);
120
}
121
120
- function Item({children, onKeyDown}): FocusItemProps {
122
+ function Item({children, onKeyDown}: FocusItemProps): React.Node {
123
const scopeRef = useRef(null);
124
const keyboard = useKeyboard({
125
onKeyDown(event: KeyboardEvent): void {
packages/react-interactions/accessibility/src/FocusManager.js
+6
-6
@@ -41,7 +41,7 @@ export function focusNext(
41
event.continuePropagation();
42
}
43
} else if (focusedElement === lastTabbableElem) {
44
- if (contain) {
44
+ if (contain === true) {
45
focusElem(firstTabbableElem);
46
if (event) {
47
event.preventDefault();
@@ -49,8 +49,8 @@ export function focusNext(
49
} else if (event) {
50
event.continuePropagation();
51
}
52
- } else {
53
- focusElem((tabbableNodes: any)[currentIndex + 1]);
52
+ } else if (tabbableNodes) {
53
+ focusElem(tabbableNodes[currentIndex + 1]);
54
if (event) {
55
event.preventDefault();
56
}
@@ -75,7 +75,7 @@ export function focusPrevious(
75
event.continuePropagation();
76
}
77
} else if (focusedElement === firstTabbableElem) {
78
- if (contain) {
78
+ if (contain === true) {
79
focusElem(lastTabbableElem);
80
if (event) {
81
event.preventDefault();
@@ -83,8 +83,8 @@ export function focusPrevious(
83
} else if (event) {
84
event.continuePropagation();
85
}
86
- } else {
87
- focusElem((tabbableNodes: any)[currentIndex - 1]);
86
+ } else if (tabbableNodes) {
87
+ focusElem(tabbableNodes[currentIndex - 1]);
88
if (event) {
89
event.preventDefault();
90
}
packages/react-interactions/accessibility/src/FocusTable.js
+10
-26
@@ -38,28 +38,6 @@ type FocusTableProps = {|
38
39
const {useRef} = React;
40
41
-export function focusFirstCellOnTable(table: ReactScopeMethods): void {
42
- const rows = table.getChildren();
43
- if (rows !== null) {
44
- const firstRow = rows[0];
45
- if (firstRow !== null) {
46
- const cells = firstRow.getChildren();
47
- if (cells !== null) {
48
- const firstCell = cells[0];
49
- if (firstCell !== null) {
50
- const tabbableNodes = firstCell.getScopedNodes();
51
- if (tabbableNodes !== null) {
52
- const firstElem = tabbableNodes[0];
53
- if (firstElem !== null) {
54
- firstElem.focus();
55
- }
56
- }
57
- }
58
- }
59
- }
60
- }
61
-}
62
-
41
function focusScope(cell: ReactScopeMethods, event?: KeyboardEvent): void {
42
const tabbableNodes = cell.getScopedNodes();
43
if (tabbableNodes !== null && tabbableNodes.length > 0) {
@@ -178,7 +156,13 @@ function hasModifierKey(event: KeyboardEvent): boolean {
156
);
157
}
158
181
-export function createFocusTable(scope: ReactScope): Array<React.Component> {
159
+export function createFocusTable(
160
+ scope: ReactScope,
161
+): [
162
+ (FocusTableProps) => React.Node,
163
+ (FocusRowProps) => React.Node,
164
+ (FocusCellProps) => React.Node,
165
+] {
166
const TableScope = React.unstable_createScope(scope.fn);
167
168
function Table({
@@ -188,7 +172,7 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
172
wrapY,
173
tabScope: TabScope,
174
allowModifiers,
191
- }): FocusTableProps {
175
+ }: FocusTableProps): React.Node {
176
const tabScopeRef = useRef(null);
177
return (
178
<TableScope
@@ -207,11 +191,11 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
191
);
192
}
193
210
- function Row({children}): FocusRowProps {
194
+ function Row({children}: FocusRowProps): React.Node {
195
return <TableScope type="row">{children}</TableScope>;
196
}
197
214
- function Cell({children, onKeyDown, colSpan}): FocusCellProps {
198
+ function Cell({children, onKeyDown, colSpan}: FocusCellProps): React.Node {
199
const scopeRef = useRef(null);
200
const keyboard = useKeyboard({
201
onKeyDown(event: KeyboardEvent): void {
packages/react-interactions/accessibility/src/shared/getTabbableNodes.js
+9
-1
@@ -9,7 +9,15 @@
9
10
import type {ReactScopeMethods} from 'shared/ReactTypes';
11
12
-export default function getTabbableNodes(scope: ReactScopeMethods) {
12
+export default function getTabbableNodes(
13
+ scope: ReactScopeMethods,
14
+): [
15
+ null | Array<HTMLElement>,
16
+ null | HTMLElement,
17
+ null | HTMLElement,
18
+ number,
19
+ null | HTMLElement,
20
+] {
21
const tabbableNodes = scope.getScopedNodes();
22
if (tabbableNodes === null || tabbableNodes.length === 0) {
23
return [null, null, null, 0, null];