react-native-a11y-order 1.0.0-alpha.0 → 1.0.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 CHANGED
@@ -1,4 +1,4 @@
1
- [![react-native-a11y-order, Artur Kalach — LinkedIn articles](/.github/images/react_native_a11y_order.png)](https://www.linkedin.com/in/artur-kalach-99477b138/recent-activity/articles/)
1
+ ![react-native-a11y-order](/.github/images/react_native_a11y_order.png)
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
- disabled?: boolean;
19
+ /**
20
+ * Called when the user taps the card.
21
+ */
8
22
  onPress?: () => void;
9
- onLongPress?: () => void;
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;AAItB,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAC;AAEnD,MAAM,WAAW,aAAa;IAG5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAG3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAIrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAOzB,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAI3C,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
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
- * Defaults to `'default'` (the index view itself).
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 container type (list, table, landmark…).
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 — controls the wrapping view's `shouldGroupAccessibilityChildren`.
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` group descendants; VoiceOver focuses the wrapper as a single
61
- * element with a combined label built from its children.
62
- * - `false` force descendants to remain individually focusable even when
63
- * iOS would otherwise group them.
64
- * - omitted defer to the wrapping view's default behavior.
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
- /** When `true`, requests screen reader focus on this element immediately after mount. */
78
+ /**
79
+ * When `true`, requests screen reader focus on this element immediately after mount.
80
+ */
68
81
  autoFocus?: boolean;
69
- /** Called when the screen reader focuses this element directly. */
82
+ /**
83
+ * Called when the screen reader focuses this element directly (not a descendant).
84
+ */
70
85
  onScreenReaderFocused?: () => void;
71
86
  /**
72
- * Called whenever screen reader focus enters or leaves any descendant.
73
- * `isFocused` is `true` on enter, `false` on leave.
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
- /** Called when screen reader focus enters any descendant. */
91
+ /**
92
+ * Called when screen reader focus enters any descendant.
93
+ */
77
94
  onScreenReaderSubViewFocused?: () => void;
78
- /** Called when screen reader focus leaves any descendant. */
95
+ /**
96
+ * Called when screen reader focus leaves any descendant.
97
+ */
79
98
  onScreenReaderSubViewBlurred?: () => void;
80
- /** Called with the native event when screen reader focus changes on any descendant. */
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;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAC;IAEtC;;;;;;;;;;OAUG;IACH,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAE3C,yFAAyF;IACzF,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,mEAAmE;IACnE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEnC;;;OAGG;IACH,gCAAgC,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhE,6DAA6D;IAC7D,4BAA4B,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1C,6DAA6D;IAC7D,4BAA4B,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1C,uFAAuF;IACvF,oCAAoC,CAAC,EAAE,CACrC,CAAC,EAAE,uCAAuC,KACvC,IAAI,CAAC;CACX,CAAC"}
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 the screen reader can navigate freely
9
- * outside this container. Defaults to `false`.
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 trapped immediately on mount rather than waiting for
14
- * the next accessibility navigation gesture. Use for programmatically-opened modals.
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;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;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"}
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
- /** The title announced to the screen reader when this component mounts. */
15
+ /**
16
+ * The title announced to the screen reader when this component mounts.
17
+ */
16
18
  title?: string;
17
- /** A message announced when this component unmounts, e.g. `"Drawer closed"`. */
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 type. Defaults to `'pane'`.
25
+ * Controls the native announcement mechanism. Defaults to `'pane'`.
21
26
  *
22
- * - `'pane'` — layout-changed notification with a title
23
- * - `'activity'` — screen-change notification for full-screen transitions
24
- * - `'announce'` — plain announcement, no focus shift
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` (default), VoiceOver / TalkBack restores focus to the previously
29
- * focused element when this component unmounts.
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 the subtree.
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,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC"}
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-a11y-order",
3
- "version": "1.0.0-alpha.0",
3
+ "version": "1.0.0-rc",
4
4
  "description": "ReactNative library for managing screen reader focus ordering",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",
@@ -5,34 +5,45 @@ import type {
5
5
  PressableProps,
6
6
  } from 'react-native';
7
7
 
8
- // All screen-reader-facing props, typed directly from ViewProps so they
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
- // Props for the outer container (<Card> on iOS, <View> on Android).
14
- // Use for margins, flex, and layout positioning in the parent.
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
- // Visual style of the inner Pressable (background, border, shadow, etc.).
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
- disabled?: boolean;
28
+
29
+ /**
30
+ * Called when the user taps the card.
31
+ */
21
32
  onPress?: () => void;
22
- // Note: onLongPress fires for sighted users. For VoiceOver users add a
23
- // custom action via accessibility.accessibilityActions — VoiceOver activates
24
- // via double-tap (onPress), not long-press.
25
- onLongPress?: () => void;
26
-
27
- // What the screen reader announces and interacts with.
28
- // On iOS applied to the overlay (first in accessibilityElements).
29
- // On Android applied to the Pressable directly.
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
- // Escape hatch for Pressable props not covered above (hitSlop, android_ripple, etc.).
35
- // Conflicting keys are stripped to prevent accidental overrides.
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
- * Defaults to `'default'` (the index view itself).
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 container type (list, table, landmark…).
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 — controls the wrapping view's `shouldGroupAccessibilityChildren`.
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` group descendants; VoiceOver focuses the wrapper as a single
73
- * element with a combined label built from its children.
74
- * - `false` force descendants to remain individually focusable even when
75
- * iOS would otherwise group them.
76
- * - omitted defer to the wrapping view's default behavior.
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
- /** When `true`, requests screen reader focus on this element immediately after mount. */
91
+ /**
92
+ * When `true`, requests screen reader focus on this element immediately after mount.
93
+ */
81
94
  autoFocus?: boolean;
82
95
 
83
- /** Called when the screen reader focuses this element directly. */
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 whenever screen reader focus enters or leaves any descendant.
88
- * `isFocused` is `true` on enter, `false` on leave.
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
- /** Called when screen reader focus enters any descendant. */
107
+ /**
108
+ * Called when screen reader focus enters any descendant.
109
+ */
93
110
  onScreenReaderSubViewFocused?: () => void;
94
111
 
95
- /** Called when screen reader focus leaves any descendant. */
112
+ /**
113
+ * Called when screen reader focus leaves any descendant.
114
+ */
96
115
  onScreenReaderSubViewBlurred?: () => void;
97
116
 
98
- /** Called with the native event when screen reader focus changes on any descendant. */
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 the screen reader can navigate freely
10
- * outside this container. Defaults to `false`.
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 trapped immediately on mount rather than waiting for
16
- * the next accessibility navigation gesture. Use for programmatically-opened modals.
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
- /** The title announced to the screen reader when this component mounts. */
17
+ /**
18
+ * The title announced to the screen reader when this component mounts.
19
+ */
18
20
  title?: string;
19
21
 
20
- /** A message announced when this component unmounts, e.g. `"Drawer closed"`. */
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 type. Defaults to `'pane'`.
29
+ * Controls the native announcement mechanism. Defaults to `'pane'`.
25
30
  *
26
- * - `'pane'` — layout-changed notification with a title
27
- * - `'activity'` — screen-change notification for full-screen transitions
28
- * - `'announce'` — plain announcement, no focus shift
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` (default), VoiceOver / TalkBack restores focus to the previously
34
- * focused element when this component unmounts.
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 the subtree.
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
  }>;