react-native-a11y-order 0.11.0-alpha.0 → 0.11.0-rc
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -1
- package/lib/typescript/src/components/A11yCard/A11yCard.types.d.ts +26 -2
- package/lib/typescript/src/components/A11yCard/A11yCard.types.d.ts.map +1 -1
- package/lib/typescript/src/components/A11yIndex/A11yIndex.types.d.ts +39 -17
- package/lib/typescript/src/components/A11yIndex/A11yIndex.types.d.ts.map +1 -1
- package/lib/typescript/src/components/A11yLock/A11yLock.types.d.ts +8 -4
- package/lib/typescript/src/components/A11yLock/A11yLock.types.d.ts.map +1 -1
- package/lib/typescript/src/components/A11yPaneTitle/A11yPaneTitle.types.d.ts +18 -9
- package/lib/typescript/src/components/A11yPaneTitle/A11yPaneTitle.types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/A11yCard/A11yCard.types.ts +29 -18
- package/src/components/A11yIndex/A11yIndex.types.ts +39 -17
- package/src/components/A11yLock/A11yLock.types.ts +8 -4
- package/src/components/A11yPaneTitle/A11yPaneTitle.types.ts +18 -9
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+

|
|
2
2
|
|
|
3
3
|
# React Native A11y Order
|
|
4
4
|
|
|
@@ -31,6 +31,13 @@ cd ios && pod install
|
|
|
31
31
|
|
|
32
32
|
Get started with the [getting started guide](./docs/getting-started/getting-started.md) or jump straight to the [component overview](./docs/guides/overview.md).
|
|
33
33
|
|
|
34
|
+
## React Native compatibility
|
|
35
|
+
|
|
36
|
+
| Library version | React Native |
|
|
37
|
+
| :-- | :-- |
|
|
38
|
+
| `1.0.0` | ≥ 0.80 |
|
|
39
|
+
| `0.11.0` | ≤ 0.79 |
|
|
40
|
+
|
|
34
41
|
## What's available
|
|
35
42
|
|
|
36
43
|
| Export | Purpose |
|
|
@@ -57,6 +64,23 @@ Get started with the [getting started guide](./docs/getting-started/getting-star
|
|
|
57
64
|
|
|
58
65
|
---
|
|
59
66
|
|
|
67
|
+
## Roadmap
|
|
68
|
+
|
|
69
|
+
All planned features are implemented and released. No new functionality or API changes are planned.
|
|
70
|
+
|
|
71
|
+
Future work is limited to:
|
|
72
|
+
- React Native version support (new releases)
|
|
73
|
+
- Bug fixes and issue resolution
|
|
74
|
+
|
|
75
|
+
Both active versions receive fixes:
|
|
76
|
+
|
|
77
|
+
| Version | React Native | Status |
|
|
78
|
+
| :-- | :-- | :-- |
|
|
79
|
+
| `1.0.0` | ≥ 0.80 | Active — bug fixes and new RN support |
|
|
80
|
+
| `0.11.0` | ≤ 0.79 | Active — bug fixes only |
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
60
84
|
## Contributing
|
|
61
85
|
|
|
62
86
|
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
|
|
@@ -1,13 +1,37 @@
|
|
|
1
1
|
import type { ViewStyle, StyleProp, ViewProps, PressableProps } from 'react-native';
|
|
2
|
+
/** Accessibility props forwarded to the focusable overlay (iOS) or the Pressable (Android). */
|
|
2
3
|
export type A11yCardAccessibilityProps = ViewProps;
|
|
3
4
|
export interface A11yCardProps {
|
|
5
|
+
/**
|
|
6
|
+
* Props applied to the container View wrapping the card.
|
|
7
|
+
* Use this for layout-level concerns: position, margins, flex, etc.
|
|
8
|
+
*/
|
|
4
9
|
containerProps?: ViewProps;
|
|
10
|
+
/**
|
|
11
|
+
* Style for the card surface (the inner Pressable).
|
|
12
|
+
* Use this for visual appearance: background color, border radius, padding, etc.
|
|
13
|
+
*/
|
|
5
14
|
style?: StyleProp<ViewStyle>;
|
|
15
|
+
/**
|
|
16
|
+
* Used to locate this view in end-to-end tests.
|
|
17
|
+
*/
|
|
6
18
|
testID?: string;
|
|
7
|
-
|
|
19
|
+
/**
|
|
20
|
+
* Called when the user taps the card.
|
|
21
|
+
*/
|
|
8
22
|
onPress?: () => void;
|
|
9
|
-
|
|
23
|
+
/**
|
|
24
|
+
* View/Accessibility props for the card action — `accessibilityLabel`, `accessibilityHint`,
|
|
25
|
+
* `accessibilityRole`, `accessibilityState`, etc.
|
|
26
|
+
*
|
|
27
|
+
* On iOS these are forwarded to a full-cover overlay that VoiceOver focuses.
|
|
28
|
+
* On Android they are applied directly to the Pressable.
|
|
29
|
+
*/
|
|
10
30
|
accessibility?: A11yCardAccessibilityProps;
|
|
31
|
+
/**
|
|
32
|
+
* Props passed directly to the underlying `Pressable`.
|
|
33
|
+
* Use this for `hitSlop`, `android_ripple`, `onLongPress`, etc.
|
|
34
|
+
*/
|
|
11
35
|
pressableProps?: PressableProps;
|
|
12
36
|
children?: React.ReactNode;
|
|
13
37
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"A11yCard.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/A11yCard/A11yCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACf,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"A11yCard.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/A11yCard/A11yCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACf,MAAM,cAAc,CAAC;AAEtB,+FAA+F;AAC/F,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAC;AAEnD,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAE3C;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
|
|
@@ -43,41 +43,63 @@ export type A11yIndexProps = ViewProps & {
|
|
|
43
43
|
*/
|
|
44
44
|
index?: number;
|
|
45
45
|
/**
|
|
46
|
-
* Controls which element VoiceOver / TalkBack actually focuses.
|
|
47
|
-
*
|
|
46
|
+
* Controls which element VoiceOver / TalkBack actually focuses for this slot.
|
|
47
|
+
*
|
|
48
|
+
* - `'default'` — the `A11y.Index` view itself receives focus
|
|
49
|
+
* - `'child'` — the first accessible descendant receives focus (useful when
|
|
50
|
+
* the index wrapper has no visual presence of its own)
|
|
51
|
+
* - `'subview'` — focuses the first direct child view rather than the first accessible descendant
|
|
52
|
+
*
|
|
53
|
+
* Defaults to `'default'`.
|
|
48
54
|
*/
|
|
49
55
|
orderType?: A11yOrderType;
|
|
50
56
|
/**
|
|
51
|
-
* iOS only — sets `UIAccessibilityContainerType
|
|
52
|
-
* Helps VoiceOver understand the semantic
|
|
57
|
+
* iOS only — sets `UIAccessibilityContainerType` on the wrapping view.
|
|
58
|
+
* Helps VoiceOver understand the semantic role of the container:
|
|
59
|
+
* `'list'`, `'table'`, `'landmark'`, etc.
|
|
60
|
+
*
|
|
61
|
+
* @platform ios
|
|
53
62
|
*/
|
|
54
63
|
a11yUIContainer?: A11yUIContainerType;
|
|
55
64
|
/**
|
|
56
|
-
* iOS only —
|
|
65
|
+
* iOS only — maps to `shouldGroupAccessibilityChildren` on the native view.
|
|
57
66
|
* Determines whether VoiceOver treats descendants as one grouped unit
|
|
58
67
|
* or navigates them individually.
|
|
59
68
|
*
|
|
60
|
-
* - `true`
|
|
61
|
-
*
|
|
62
|
-
* - `false`
|
|
63
|
-
*
|
|
64
|
-
* - omitted
|
|
69
|
+
* - `true` — VoiceOver focuses the wrapper as a single element and builds
|
|
70
|
+
* a combined label from its children.
|
|
71
|
+
* - `false` — descendants stay individually focusable even when iOS would
|
|
72
|
+
* otherwise collapse them.
|
|
73
|
+
* - omitted — defers to the platform default.
|
|
74
|
+
*
|
|
75
|
+
* @platform ios
|
|
65
76
|
*/
|
|
66
77
|
shouldGroupAccessibilityChildren?: boolean;
|
|
67
|
-
/**
|
|
78
|
+
/**
|
|
79
|
+
* When `true`, requests screen reader focus on this element immediately after mount.
|
|
80
|
+
*/
|
|
68
81
|
autoFocus?: boolean;
|
|
69
|
-
/**
|
|
82
|
+
/**
|
|
83
|
+
* Called when the screen reader focuses this element directly (not a descendant).
|
|
84
|
+
*/
|
|
70
85
|
onScreenReaderFocused?: () => void;
|
|
71
86
|
/**
|
|
72
|
-
* Called
|
|
73
|
-
*
|
|
87
|
+
* Called when screen reader focus enters or leaves any descendant.
|
|
88
|
+
* Receives `true` on enter and `false` on leave.
|
|
74
89
|
*/
|
|
75
90
|
onScreenReaderSubViewFocusChange?: (isFocused: boolean) => void;
|
|
76
|
-
/**
|
|
91
|
+
/**
|
|
92
|
+
* Called when screen reader focus enters any descendant.
|
|
93
|
+
*/
|
|
77
94
|
onScreenReaderSubViewFocused?: () => void;
|
|
78
|
-
/**
|
|
95
|
+
/**
|
|
96
|
+
* Called when screen reader focus leaves any descendant.
|
|
97
|
+
*/
|
|
79
98
|
onScreenReaderSubViewBlurred?: () => void;
|
|
80
|
-
/**
|
|
99
|
+
/**
|
|
100
|
+
* Called with the full native event when screen reader focus changes on any descendant.
|
|
101
|
+
* Use this when you need the `nativeId` of the focused element.
|
|
102
|
+
*/
|
|
81
103
|
onScreenReaderDescendantFocusChanged?: (e: ScreenReaderDescendantFocusChangedEvent) => void;
|
|
82
104
|
};
|
|
83
105
|
//# sourceMappingURL=A11yIndex.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"A11yIndex.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/A11yIndex/A11yIndex.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,KAAK,EAAE,kCAAkC,EAAE,MAAM,4CAA4C,CAAC;AAErG,0GAA0G;AAC1G,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG;IAC3E,iDAAiD;IACjD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,oGAAoG;AACpG,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX,wEAAwE;AACxE,eAAO,MAAM,qBAAqB;;;;;;CAMxB,CAAC;AAEX;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,qBAAqB,CAAC;AAErE;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE3D,kFAAkF;AAClF,MAAM,MAAM,uCAAuC,GACjD,oBAAoB,CAAC,kCAAkC,CAAC,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf
|
|
1
|
+
{"version":3,"file":"A11yIndex.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/A11yIndex/A11yIndex.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,KAAK,EAAE,kCAAkC,EAAE,MAAM,4CAA4C,CAAC;AAErG,0GAA0G;AAC1G,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG;IAC3E,iDAAiD;IACjD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,oGAAoG;AACpG,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX,wEAAwE;AACxE,eAAO,MAAM,qBAAqB;;;;;;CAMxB,CAAC;AAEX;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,qBAAqB,CAAC;AAErE;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE3D,kFAAkF;AAClF,MAAM,MAAM,uCAAuC,GACjD,oBAAoB,CAAC,kCAAkC,CAAC,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAC;IAEtC;;;;;;;;;;;;OAYG;IACH,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAE3C;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEnC;;;OAGG;IACH,gCAAgC,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,4BAA4B,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1C;;OAEG;IACH,4BAA4B,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1C;;;OAGG;IACH,oCAAoC,CAAC,EAAE,CACrC,CAAC,EAAE,uCAAuC,KACvC,IAAI,CAAC;CACX,CAAC"}
|
|
@@ -5,13 +5,17 @@ import type { ViewProps } from 'react-native';
|
|
|
5
5
|
*/
|
|
6
6
|
export type A11yFocusTrapProps = ViewProps & {
|
|
7
7
|
/**
|
|
8
|
-
* When `true`, the focus trap is inactive
|
|
9
|
-
* outside this container.
|
|
8
|
+
* When `true`, the focus trap is inactive and the screen reader can navigate
|
|
9
|
+
* freely outside this container.
|
|
10
|
+
*
|
|
11
|
+
* Defaults to `false`.
|
|
10
12
|
*/
|
|
11
13
|
lockDisabled?: boolean;
|
|
12
14
|
/**
|
|
13
|
-
* When `true`, focus is
|
|
14
|
-
* the next accessibility navigation gesture.
|
|
15
|
+
* When `true`, focus is moved inside the trap immediately on mount rather than
|
|
16
|
+
* waiting for the next accessibility navigation gesture.
|
|
17
|
+
* Use this for programmatically-opened modals and sheets.
|
|
18
|
+
*
|
|
15
19
|
* Defaults to `false`.
|
|
16
20
|
*/
|
|
17
21
|
forceLock?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"A11yLock.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/A11yLock/A11yLock.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG;IAC3C
|
|
1
|
+
{"version":3,"file":"A11yLock.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/A11yLock/A11yLock.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG;IAC3C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,SAAS,CAAC;AAE5C,8FAA8F;AAC9F,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}
|
|
@@ -12,26 +12,35 @@ export type A11yPaneType = 'activity' | 'pane' | 'announce';
|
|
|
12
12
|
* VoiceOver / TalkBack and optionally restores focus when the view unmounts.
|
|
13
13
|
*/
|
|
14
14
|
export type A11yPaneTitleProps = React.PropsWithChildren<{
|
|
15
|
-
/**
|
|
15
|
+
/**
|
|
16
|
+
* The title announced to the screen reader when this component mounts.
|
|
17
|
+
*/
|
|
16
18
|
title?: string;
|
|
17
|
-
/**
|
|
19
|
+
/**
|
|
20
|
+
* A message announced to the screen reader when this component unmounts.
|
|
21
|
+
* Use to signal the end of a flow, e.g. `"Modal closed"` or `"Drawer closed"`.
|
|
22
|
+
*/
|
|
18
23
|
detachMessage?: string;
|
|
19
24
|
/**
|
|
20
|
-
* Controls the native announcement
|
|
25
|
+
* Controls the native announcement mechanism. Defaults to `'pane'`.
|
|
21
26
|
*
|
|
22
|
-
* - `'pane'` — layout-changed notification with a title
|
|
23
|
-
* - `'activity'` — screen-change notification
|
|
24
|
-
* - `'announce'` — plain announcement
|
|
27
|
+
* - `'pane'` — layout-changed notification with a title (panels, sheets)
|
|
28
|
+
* - `'activity'` — screen-change notification (full-screen navigation)
|
|
29
|
+
* - `'announce'` — plain announcement with no focus shift (status updates)
|
|
25
30
|
*/
|
|
26
31
|
type?: A11yPaneType;
|
|
27
32
|
/**
|
|
28
|
-
* When `true
|
|
29
|
-
*
|
|
33
|
+
* When `true`, VoiceOver / TalkBack restores focus to the previously focused
|
|
34
|
+
* element when this component unmounts.
|
|
35
|
+
*
|
|
36
|
+
* Defaults to `true`.
|
|
30
37
|
*/
|
|
31
38
|
withFocusRestore?: boolean;
|
|
32
39
|
/**
|
|
33
40
|
* When `false`, the component renders nothing and posts no announcement.
|
|
34
|
-
* Use to conditionally suppress the view without unmounting
|
|
41
|
+
* Use this to conditionally suppress the view without unmounting its subtree.
|
|
42
|
+
*
|
|
43
|
+
* Defaults to `true`.
|
|
35
44
|
*/
|
|
36
45
|
displayed?: boolean;
|
|
37
46
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"A11yPaneTitle.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/A11yPaneTitle/A11yPaneTitle.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AAE5D;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACvD
|
|
1
|
+
{"version":3,"file":"A11yPaneTitle.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/A11yPaneTitle/A11yPaneTitle.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AAE5D;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -5,34 +5,45 @@ import type {
|
|
|
5
5
|
PressableProps,
|
|
6
6
|
} from 'react-native';
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
// stay in sync with RN without a separate custom interface.
|
|
8
|
+
/** Accessibility props forwarded to the focusable overlay (iOS) or the Pressable (Android). */
|
|
10
9
|
export type A11yCardAccessibilityProps = ViewProps;
|
|
11
10
|
|
|
12
11
|
export interface A11yCardProps {
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
/**
|
|
13
|
+
* Props applied to the container View wrapping the card.
|
|
14
|
+
* Use this for layout-level concerns: position, margins, flex, etc.
|
|
15
|
+
*/
|
|
15
16
|
containerProps?: ViewProps;
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
/**
|
|
19
|
+
* Style for the card surface (the inner Pressable).
|
|
20
|
+
* Use this for visual appearance: background color, border radius, padding, etc.
|
|
21
|
+
*/
|
|
18
22
|
style?: StyleProp<ViewStyle>;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Used to locate this view in end-to-end tests.
|
|
26
|
+
*/
|
|
19
27
|
testID?: string;
|
|
20
|
-
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Called when the user taps the card.
|
|
31
|
+
*/
|
|
21
32
|
onPress?: () => void;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
// disabled auto-merges into accessibility.accessibilityState.disabled so
|
|
31
|
-
// you only need to set disabled once.
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* View/Accessibility props for the card action — `accessibilityLabel`, `accessibilityHint`,
|
|
36
|
+
* `accessibilityRole`, `accessibilityState`, etc.
|
|
37
|
+
*
|
|
38
|
+
* On iOS these are forwarded to a full-cover overlay that VoiceOver focuses.
|
|
39
|
+
* On Android they are applied directly to the Pressable.
|
|
40
|
+
*/
|
|
32
41
|
accessibility?: A11yCardAccessibilityProps;
|
|
33
42
|
|
|
34
|
-
|
|
35
|
-
|
|
43
|
+
/**
|
|
44
|
+
* Props passed directly to the underlying `Pressable`.
|
|
45
|
+
* Use this for `hitSlop`, `android_ripple`, `onLongPress`, etc.
|
|
46
|
+
*/
|
|
36
47
|
pressableProps?: PressableProps;
|
|
37
48
|
|
|
38
49
|
children?: React.ReactNode;
|
|
@@ -53,49 +53,71 @@ export type A11yIndexProps = ViewProps & {
|
|
|
53
53
|
index?: number;
|
|
54
54
|
|
|
55
55
|
/**
|
|
56
|
-
* Controls which element VoiceOver / TalkBack actually focuses.
|
|
57
|
-
*
|
|
56
|
+
* Controls which element VoiceOver / TalkBack actually focuses for this slot.
|
|
57
|
+
*
|
|
58
|
+
* - `'default'` — the `A11y.Index` view itself receives focus
|
|
59
|
+
* - `'child'` — the first accessible descendant receives focus (useful when
|
|
60
|
+
* the index wrapper has no visual presence of its own)
|
|
61
|
+
* - `'subview'` — focuses the first direct child view rather than the first accessible descendant
|
|
62
|
+
*
|
|
63
|
+
* Defaults to `'default'`.
|
|
58
64
|
*/
|
|
59
65
|
orderType?: A11yOrderType;
|
|
60
66
|
|
|
61
67
|
/**
|
|
62
|
-
* iOS only — sets `UIAccessibilityContainerType
|
|
63
|
-
* Helps VoiceOver understand the semantic
|
|
68
|
+
* iOS only — sets `UIAccessibilityContainerType` on the wrapping view.
|
|
69
|
+
* Helps VoiceOver understand the semantic role of the container:
|
|
70
|
+
* `'list'`, `'table'`, `'landmark'`, etc.
|
|
71
|
+
*
|
|
72
|
+
* @platform ios
|
|
64
73
|
*/
|
|
65
74
|
a11yUIContainer?: A11yUIContainerType;
|
|
66
75
|
|
|
67
76
|
/**
|
|
68
|
-
* iOS only —
|
|
77
|
+
* iOS only — maps to `shouldGroupAccessibilityChildren` on the native view.
|
|
69
78
|
* Determines whether VoiceOver treats descendants as one grouped unit
|
|
70
79
|
* or navigates them individually.
|
|
71
80
|
*
|
|
72
|
-
* - `true`
|
|
73
|
-
*
|
|
74
|
-
* - `false`
|
|
75
|
-
*
|
|
76
|
-
* - omitted
|
|
81
|
+
* - `true` — VoiceOver focuses the wrapper as a single element and builds
|
|
82
|
+
* a combined label from its children.
|
|
83
|
+
* - `false` — descendants stay individually focusable even when iOS would
|
|
84
|
+
* otherwise collapse them.
|
|
85
|
+
* - omitted — defers to the platform default.
|
|
86
|
+
*
|
|
87
|
+
* @platform ios
|
|
77
88
|
*/
|
|
78
89
|
shouldGroupAccessibilityChildren?: boolean;
|
|
79
90
|
|
|
80
|
-
/**
|
|
91
|
+
/**
|
|
92
|
+
* When `true`, requests screen reader focus on this element immediately after mount.
|
|
93
|
+
*/
|
|
81
94
|
autoFocus?: boolean;
|
|
82
95
|
|
|
83
|
-
/**
|
|
96
|
+
/**
|
|
97
|
+
* Called when the screen reader focuses this element directly (not a descendant).
|
|
98
|
+
*/
|
|
84
99
|
onScreenReaderFocused?: () => void;
|
|
85
100
|
|
|
86
101
|
/**
|
|
87
|
-
* Called
|
|
88
|
-
*
|
|
102
|
+
* Called when screen reader focus enters or leaves any descendant.
|
|
103
|
+
* Receives `true` on enter and `false` on leave.
|
|
89
104
|
*/
|
|
90
105
|
onScreenReaderSubViewFocusChange?: (isFocused: boolean) => void;
|
|
91
106
|
|
|
92
|
-
/**
|
|
107
|
+
/**
|
|
108
|
+
* Called when screen reader focus enters any descendant.
|
|
109
|
+
*/
|
|
93
110
|
onScreenReaderSubViewFocused?: () => void;
|
|
94
111
|
|
|
95
|
-
/**
|
|
112
|
+
/**
|
|
113
|
+
* Called when screen reader focus leaves any descendant.
|
|
114
|
+
*/
|
|
96
115
|
onScreenReaderSubViewBlurred?: () => void;
|
|
97
116
|
|
|
98
|
-
/**
|
|
117
|
+
/**
|
|
118
|
+
* Called with the full native event when screen reader focus changes on any descendant.
|
|
119
|
+
* Use this when you need the `nativeId` of the focused element.
|
|
120
|
+
*/
|
|
99
121
|
onScreenReaderDescendantFocusChanged?: (
|
|
100
122
|
e: ScreenReaderDescendantFocusChangedEvent
|
|
101
123
|
) => void;
|
|
@@ -6,14 +6,18 @@ import type { ViewProps } from 'react-native';
|
|
|
6
6
|
*/
|
|
7
7
|
export type A11yFocusTrapProps = ViewProps & {
|
|
8
8
|
/**
|
|
9
|
-
* When `true`, the focus trap is inactive
|
|
10
|
-
* outside this container.
|
|
9
|
+
* When `true`, the focus trap is inactive and the screen reader can navigate
|
|
10
|
+
* freely outside this container.
|
|
11
|
+
*
|
|
12
|
+
* Defaults to `false`.
|
|
11
13
|
*/
|
|
12
14
|
lockDisabled?: boolean;
|
|
13
15
|
|
|
14
16
|
/**
|
|
15
|
-
* When `true`, focus is
|
|
16
|
-
* the next accessibility navigation gesture.
|
|
17
|
+
* When `true`, focus is moved inside the trap immediately on mount rather than
|
|
18
|
+
* waiting for the next accessibility navigation gesture.
|
|
19
|
+
* Use this for programmatically-opened modals and sheets.
|
|
20
|
+
*
|
|
17
21
|
* Defaults to `false`.
|
|
18
22
|
*/
|
|
19
23
|
forceLock?: boolean;
|
|
@@ -14,30 +14,39 @@ export type A11yPaneType = 'activity' | 'pane' | 'announce';
|
|
|
14
14
|
* VoiceOver / TalkBack and optionally restores focus when the view unmounts.
|
|
15
15
|
*/
|
|
16
16
|
export type A11yPaneTitleProps = React.PropsWithChildren<{
|
|
17
|
-
/**
|
|
17
|
+
/**
|
|
18
|
+
* The title announced to the screen reader when this component mounts.
|
|
19
|
+
*/
|
|
18
20
|
title?: string;
|
|
19
21
|
|
|
20
|
-
/**
|
|
22
|
+
/**
|
|
23
|
+
* A message announced to the screen reader when this component unmounts.
|
|
24
|
+
* Use to signal the end of a flow, e.g. `"Modal closed"` or `"Drawer closed"`.
|
|
25
|
+
*/
|
|
21
26
|
detachMessage?: string;
|
|
22
27
|
|
|
23
28
|
/**
|
|
24
|
-
* Controls the native announcement
|
|
29
|
+
* Controls the native announcement mechanism. Defaults to `'pane'`.
|
|
25
30
|
*
|
|
26
|
-
* - `'pane'` — layout-changed notification with a title
|
|
27
|
-
* - `'activity'` — screen-change notification
|
|
28
|
-
* - `'announce'` — plain announcement
|
|
31
|
+
* - `'pane'` — layout-changed notification with a title (panels, sheets)
|
|
32
|
+
* - `'activity'` — screen-change notification (full-screen navigation)
|
|
33
|
+
* - `'announce'` — plain announcement with no focus shift (status updates)
|
|
29
34
|
*/
|
|
30
35
|
type?: A11yPaneType;
|
|
31
36
|
|
|
32
37
|
/**
|
|
33
|
-
* When `true
|
|
34
|
-
*
|
|
38
|
+
* When `true`, VoiceOver / TalkBack restores focus to the previously focused
|
|
39
|
+
* element when this component unmounts.
|
|
40
|
+
*
|
|
41
|
+
* Defaults to `true`.
|
|
35
42
|
*/
|
|
36
43
|
withFocusRestore?: boolean;
|
|
37
44
|
|
|
38
45
|
/**
|
|
39
46
|
* When `false`, the component renders nothing and posts no announcement.
|
|
40
|
-
* Use to conditionally suppress the view without unmounting
|
|
47
|
+
* Use this to conditionally suppress the view without unmounting its subtree.
|
|
48
|
+
*
|
|
49
|
+
* Defaults to `true`.
|
|
41
50
|
*/
|
|
42
51
|
displayed?: boolean;
|
|
43
52
|
}>;
|