@boostdev/design-system-react-native 0.2.5 → 0.3.0

package/dist/index.js

@@ -435,6 +435,7 @@ function Alert({
     error: { bg: colors2.colorRedSubtle, text: colors2.colorOnBg, border: colors2.colorError }
   };
   const { bg, text, border: borderColor } = variantColors[variant];
+  const resolvedChildren = typeof children === "function" ? children({ color: text }) : children;
   return /* @__PURE__ */ jsxs2(
     View5,
     {
@@ -445,7 +446,7 @@ function Alert({
         icon && /* @__PURE__ */ jsx9(View5, { style: styles7.icon, children: icon }),
         /* @__PURE__ */ jsxs2(View5, { style: styles7.content, children: [
           title && /* @__PURE__ */ jsx9(Text5, { style: [styles7.title, { color: text }], children: title }),
-          /* @__PURE__ */ jsx9(Text5, { style: [styles7.body, { color: text }], children })
+          typeof resolvedChildren === "string" || typeof resolvedChildren === "number" ? /* @__PURE__ */ jsx9(Text5, { style: [styles7.body, { color: text }], children: resolvedChildren }) : resolvedChildren
         ] }),
         onDismiss && /* @__PURE__ */ jsx9(
           Pressable,
@@ -474,8 +475,10 @@ var styles8 = StyleSheet8.create({
     paddingHorizontal: spacing.m,
     gap: spacing.xs
   },
+  body: {
+    flex: 1
+  },
   content: {
-    flex: 1,
     fontSize: font.size.bodyS,
     fontFamily: font.family.body,
     lineHeight: lineHeight.bodyS
@@ -501,6 +504,7 @@ function NotificationBanner({
     error: { bg: colors2.colorRedSubtle, text: colors2.colorOnBg, border: colors2.colorError }
   };
   const { bg, text, border: borderColor } = variantColors[variant];
+  const resolvedChildren = typeof children === "function" ? children({ color: text }) : children;
   return /* @__PURE__ */ jsxs3(
     View6,
     {
@@ -508,7 +512,7 @@ function NotificationBanner({
       accessibilityLiveRegion: isUrgent ? "assertive" : "polite",
       style: [styles8.banner, { backgroundColor: bg, borderBottomWidth: 3, borderBottomColor: borderColor }, style],
       children: [
-        /* @__PURE__ */ jsx10(Text6, { style: [styles8.content, { color: text }], children }),
+        /* @__PURE__ */ jsx10(View6, { style: styles8.body, children: typeof resolvedChildren === "string" || typeof resolvedChildren === "number" ? /* @__PURE__ */ jsx10(Text6, { style: [styles8.content, { color: text }], children: resolvedChildren }) : resolvedChildren }),
         action,
         onDismiss && /* @__PURE__ */ jsx10(
           Pressable2,
@@ -1059,7 +1063,12 @@ var styles15 = StyleSheet15.create({
     lineHeight: lineHeight.body
   },
   chevron: {
-    fontSize: font.size.body,
+    // Border-box chevron (no glyph font dependency): a small square with two
+    // adjacent borders, rotated to form a crisp "›" / "⌄" disclosure indicator.
+    width: 8,
+    height: 8,
+    borderRightWidth: 2,
+    borderBottomWidth: 2,
     marginStart: spacing.xs
   },
   content: {
@@ -1098,9 +1107,9 @@ function Collapsible({
     }
     onToggle?.(next);
   }, [isOpen, isControlled, onToggle, rotation]);
-  const rotateZ = rotation.interpolate({
+  const rotate = rotation.interpolate({
     inputRange: [0, 1],
-    outputRange: ["0deg", "90deg"]
+    outputRange: ["-45deg", "45deg"]
   });
   return /* @__PURE__ */ jsxs9(
     View12,
@@ -1119,12 +1128,12 @@ function Collapsible({
             children: [
               /* @__PURE__ */ jsx17(Text13, { style: [styles15.summaryText, { color: colors2.colorOnBg }], children: summary }),
               /* @__PURE__ */ jsx17(
-                Animated2.Text,
+                Animated2.View,
                 {
-                  style: [styles15.chevron, { color: colors2.colorOnBgSubtle, transform: [{ rotateZ }] }],
+                  testID: "bds-collapsible-chevron",
+                  style: [styles15.chevron, { borderColor: colors2.colorOnBgSubtle, transform: [{ rotate }] }],
                   importantForAccessibility: "no",
-                  accessibilityElementsHidden: true,
-                  children: "\u25B8"
+                  accessibilityElementsHidden: true
                 }
               )
             ]
@@ -3777,46 +3786,48 @@ function Dialog({
       transparent: true,
       animationType: "fade",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ jsx44(
-        Pressable22,
-        {
-          style: styles40.overlay,
-          onPress: onClose,
-          accessibilityRole: "button",
-          accessibilityLabel: "Close dialog",
-          children: /* @__PURE__ */ jsxs29(
-            Pressable22,
-            {
-              style: [styles40.panel, { backgroundColor: colors2.colorGreySubtle }, style],
-              onPress: () => {
-              },
-              accessibilityRole: "none",
-              children: [
-                /* @__PURE__ */ jsx44(
-                  Pressable22,
-                  {
-                    style: styles40.closeButton,
-                    onPress: onClose,
-                    accessibilityRole: "button",
-                    accessibilityLabel: "Close dialog",
-                    hitSlop: 8,
-                    children: /* @__PURE__ */ jsx44(
-                      Text32,
-                      {
-                        style: [styles40.closeText, { color: colors2.colorOnBgSubtle }],
-                        "aria-hidden": true,
-                        children: "\u2715"
-                      }
-                    )
-                  }
-                ),
-                !!title && /* @__PURE__ */ jsx44(View37, { style: styles40.header, children: /* @__PURE__ */ jsx44(Text32, { style: [styles40.title, { color: colors2.colorOnGreySubtle }], children: title }) }),
-                children
-              ]
-            }
-          )
-        }
-      )
+      children: /* @__PURE__ */ jsxs29(View37, { style: styles40.overlay, children: [
+        /* @__PURE__ */ jsx44(
+          Pressable22,
+          {
+            testID: "bds-dialog-backdrop",
+            style: StyleSheet40.absoluteFill,
+            onPress: onClose,
+            accessible: false,
+            importantForAccessibility: "no"
+          }
+        ),
+        /* @__PURE__ */ jsxs29(
+          View37,
+          {
+            style: [styles40.panel, { backgroundColor: colors2.colorGreySubtle }, style],
+            accessibilityViewIsModal: true,
+            onAccessibilityEscape: onClose,
+            children: [
+              /* @__PURE__ */ jsx44(
+                Pressable22,
+                {
+                  style: styles40.closeButton,
+                  onPress: onClose,
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Close dialog",
+                  hitSlop: 8,
+                  children: /* @__PURE__ */ jsx44(
+                    Text32,
+                    {
+                      style: [styles40.closeText, { color: colors2.colorOnBgSubtle }],
+                      "aria-hidden": true,
+                      children: "\u2715"
+                    }
+                  )
+                }
+              ),
+              !!title && /* @__PURE__ */ jsx44(View37, { style: styles40.header, children: /* @__PURE__ */ jsx44(Text32, { style: [styles40.title, { color: colors2.colorOnGreySubtle }], children: title }) }),
+              children
+            ]
+          }
+        )
+      ] })
     }
   );
 }
@@ -3942,8 +3953,9 @@ function SideSheet({
               {
                 style: StyleSheet41.absoluteFill,
                 onPress: onClose,
-                accessibilityRole: "button",
-                accessibilityLabel: "Close side sheet"
+                testID: "bds-sidesheet-backdrop",
+                accessible: false,
+                importantForAccessibility: "no"
               }
             )
           }
@@ -3959,7 +3971,8 @@ function SideSheet({
               },
               style
             ],
-            accessibilityRole: "none",
+            accessibilityViewIsModal: true,
+            onAccessibilityEscape: onClose,
             children: [
               /* @__PURE__ */ jsxs30(
                 View38,
@@ -4295,8 +4308,9 @@ function DropdownMenu({
                 {
                   style: StyleSheet43.absoluteFill,
                   onPress: () => setOpen(false),
-                  accessibilityRole: "button",
-                  accessibilityLabel: "Close menu"
+                  testID: "bds-dropdownmenu-backdrop",
+                  accessible: false,
+                  importantForAccessibility: "no"
                 }
               )
             }
@@ -4311,100 +4325,95 @@ function DropdownMenu({
                   transform: [{ translateY: slideAnim }]
                 }
               ],
-              children: /* @__PURE__ */ jsx47(
-                Pressable25,
-                {
-                  onPress: () => {
-                  },
-                  children: /* @__PURE__ */ jsxs32(SafeAreaView2, { children: [
-                    /* @__PURE__ */ jsxs32(
-                      View40,
-                      {
-                        style: [
-                          styles43.sheetHeader,
-                          { borderBottomColor: colors2.colorBgSubtle }
-                        ],
-                        children: [
-                          /* @__PURE__ */ jsx47(Text35, { style: [styles43.sheetTitle, { color: colors2.colorOnBg }], children: title }),
-                          /* @__PURE__ */ jsx47(
-                            Pressable25,
-                            {
-                              accessibilityRole: "button",
-                              accessibilityLabel: "Close",
-                              onPress: () => setOpen(false),
-                              hitSlop: 8,
-                              children: /* @__PURE__ */ jsx47(
-                                Text35,
-                                {
-                                  style: [
-                                    styles43.closeText,
-                                    { color: colors2.colorInteractive }
-                                  ],
-                                  children: "Done"
-                                }
-                              )
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx47(
-                      FlatList2,
-                      {
-                        data: items,
-                        keyExtractor: (item) => item.id,
-                        renderItem: ({ item }) => /* @__PURE__ */ jsxs32(Fragment2, { children: [
-                          item.separator && /* @__PURE__ */ jsx47(
-                            View40,
+              accessibilityViewIsModal: true,
+              onAccessibilityEscape: () => setOpen(false),
+              children: /* @__PURE__ */ jsxs32(SafeAreaView2, { children: [
+                /* @__PURE__ */ jsxs32(
+                  View40,
+                  {
+                    style: [
+                      styles43.sheetHeader,
+                      { borderBottomColor: colors2.colorBgSubtle }
+                    ],
+                    children: [
+                      /* @__PURE__ */ jsx47(Text35, { style: [styles43.sheetTitle, { color: colors2.colorOnBg }], children: title }),
+                      /* @__PURE__ */ jsx47(
+                        Pressable25,
+                        {
+                          accessibilityRole: "button",
+                          accessibilityLabel: "Close",
+                          onPress: () => setOpen(false),
+                          hitSlop: 8,
+                          children: /* @__PURE__ */ jsx47(
+                            Text35,
                             {
                               style: [
-                                styles43.separator,
-                                { backgroundColor: colors2.colorBgSubtle }
-                              ],
-                              accessibilityRole: "none"
-                            }
-                          ),
-                          /* @__PURE__ */ jsxs32(
-                            Pressable25,
-                            {
-                              accessibilityRole: "menuitem",
-                              accessibilityLabel: item.label,
-                              accessibilityState: { disabled: item.disabled },
-                              disabled: item.disabled,
-                              onPress: () => handleItemPress(item),
-                              style: ({ pressed }) => [
-                                styles43.item,
-                                pressed && { backgroundColor: colors2.colorBgSubtle },
-                                item.disabled && { opacity: 0.4 }
+                                styles43.closeText,
+                                { color: colors2.colorInteractive }
                               ],
-                              children: [
-                                !!item.icon && /* @__PURE__ */ jsx47(
-                                  View40,
-                                  {
-                                    importantForAccessibility: "no-hide-descendants",
-                                    accessibilityElementsHidden: true,
-                                    children: item.icon
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx47(
-                                  Text35,
-                                  {
-                                    style: [
-                                      styles43.itemText,
-                                      { color: colors2.colorOnBg }
-                                    ],
-                                    children: item.label
-                                  }
-                                )
-                              ]
+                              children: "Done"
                             }
                           )
-                        ] })
-                      }
-                    )
-                  ] })
-                }
-              )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx47(
+                  FlatList2,
+                  {
+                    data: items,
+                    keyExtractor: (item) => item.id,
+                    renderItem: ({ item }) => /* @__PURE__ */ jsxs32(Fragment2, { children: [
+                      item.separator && /* @__PURE__ */ jsx47(
+                        View40,
+                        {
+                          style: [
+                            styles43.separator,
+                            { backgroundColor: colors2.colorBgSubtle }
+                          ],
+                          accessibilityRole: "none"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs32(
+                        Pressable25,
+                        {
+                          accessibilityRole: "menuitem",
+                          accessibilityLabel: item.label,
+                          accessibilityState: { disabled: item.disabled },
+                          disabled: item.disabled,
+                          onPress: () => handleItemPress(item),
+                          style: ({ pressed }) => [
+                            styles43.item,
+                            pressed && { backgroundColor: colors2.colorBgSubtle },
+                            item.disabled && { opacity: 0.4 }
+                          ],
+                          children: [
+                            !!item.icon && /* @__PURE__ */ jsx47(
+                              View40,
+                              {
+                                importantForAccessibility: "no-hide-descendants",
+                                accessibilityElementsHidden: true,
+                                children: item.icon
+                              }
+                            ),
+                            /* @__PURE__ */ jsx47(
+                              Text35,
+                              {
+                                style: [
+                                  styles43.itemText,
+                                  { color: colors2.colorOnBg }
+                                ],
+                                children: item.label
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ] })
             }
           )
         ] })
@@ -4453,6 +4462,7 @@ function Popover({
 }) {
   const { colors: colors2 } = useTheme();
   const [isOpen, setIsOpen] = useState15(false);
+  const close = () => setIsOpen(false);
   return /* @__PURE__ */ jsxs33(View41, { style: [styles44.wrapper, style], children: [
     React2.cloneElement(children, {
       onPress: () => setIsOpen(true),
@@ -4465,27 +4475,28 @@ function Popover({
         visible: isOpen,
         transparent: true,
         animationType: "fade",
-        onRequestClose: () => setIsOpen(false),
-        children: /* @__PURE__ */ jsx48(
-          Pressable26,
-          {
-            style: styles44.overlay,
-            onPress: () => setIsOpen(false),
-            accessibilityRole: "button",
-            accessibilityLabel: "Close popover",
-            children: /* @__PURE__ */ jsx48(
-              Pressable26,
-              {
-                style: [styles44.panel, { backgroundColor: colors2.colorBg }],
-                onPress: () => {
-                },
-                accessibilityRole: "none",
-                accessibilityLabel,
-                children: content
-              }
-            )
-          }
-        )
+        onRequestClose: close,
+        children: /* @__PURE__ */ jsxs33(View41, { style: styles44.overlay, onAccessibilityEscape: close, children: [
+          /* @__PURE__ */ jsx48(
+            Pressable26,
+            {
+              testID: "bds-popover-backdrop",
+              style: StyleSheet44.absoluteFill,
+              onPress: close,
+              onAccessibilityTap: close,
+              accessibilityRole: "button",
+              accessibilityLabel: "Close popover"
+            }
+          ),
+          /* @__PURE__ */ jsx48(
+            View41,
+            {
+              style: [styles44.panel, { backgroundColor: colors2.colorBg }],
+              accessibilityLabel,
+              children: content
+            }
+          )
+        ] })
       }
     )
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-react-native",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "BoostDev React Native component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "react-native",

package/src/components/interaction/Dialog/Dialog.mdx

@@ -56,6 +56,7 @@ export default function App() {
 
 ## Accessibility
 
-- Backdrop press and close button both call `onClose`
-- Close button has `accessibilityLabel="Close dialog"`
+- The backdrop still closes on press, but is hidden from assistive tech (a leaf `Pressable` would otherwise group the whole dialog into one element on iOS); the close button, labelled `accessibilityLabel="Close dialog"`, is the accessible way to close
+- The title, the content and any controls inside are separately reachable by VoiceOver and XCUITest, not grouped into one element
+- VoiceOver's escape gesture also calls `onClose`
 - Android back button triggers `onRequestClose` which calls `onClose`

package/src/components/interaction/Dialog/Dialog.spec.tsx

@@ -40,34 +40,65 @@ describe('Dialog (native)', () => {
         <span>Body</span>
       </Dialog>,
     );
-    const closeButtons = screen.getAllByRole('button', { name: 'Close dialog' });
-    expect(closeButtons.length).toBeGreaterThanOrEqual(1);
+    expect(screen.getByRole('button', { name: 'Close dialog' })).toBeInTheDocument();
   });
 
-  it('calls onClose when close button is pressed', () => {
+  it('calls onClose when the close button is pressed', () => {
     const onClose = vi.fn();
     renderWithTheme(
       <Dialog isOpen onClose={onClose}>
         <span>Body</span>
       </Dialog>,
     );
-    const closeButtons = screen.getAllByRole('button', { name: 'Close dialog' });
-    // The inner close button (not the backdrop)
-    const innerClose = closeButtons[closeButtons.length - 1];
-    fireEvent.click(innerClose);
+    fireEvent.click(screen.getByRole('button', { name: 'Close dialog' }));
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  it('calls onClose when backdrop is pressed', () => {
+  it('calls onClose when the backdrop is pressed', () => {
     const onClose = vi.fn();
     renderWithTheme(
       <Dialog isOpen onClose={onClose}>
         <span>Body</span>
       </Dialog>,
     );
-    const closeButtons = screen.getAllByRole('button', { name: 'Close dialog' });
-    // The first one is the backdrop
-    fireEvent.click(closeButtons[0]);
+    fireEvent.click(screen.getByTestId('bds-dialog-backdrop'));
     expect(onClose).toHaveBeenCalledTimes(1);
   });
+
+  it('does not include the content inside the backdrop', () => {
+    renderWithTheme(
+      <Dialog isOpen onClose={() => {}}>
+        <span>Dialog body</span>
+      </Dialog>,
+    );
+    const backdrop = screen.getByTestId('bds-dialog-backdrop');
+    expect(backdrop).not.toContainElement(screen.getByText('Dialog body'));
+    expect(backdrop).not.toHaveAttribute('role');
+  });
+
+  it('does not call onClose when the content is pressed', () => {
+    const onClose = vi.fn();
+    renderWithTheme(
+      <Dialog isOpen onClose={onClose}>
+        <span>Dialog body</span>
+      </Dialog>,
+    );
+    fireEvent.click(screen.getByText('Dialog body'));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('keeps a child button reachable and separate from onClose', () => {
+    const onClose = vi.fn();
+    const onAction = vi.fn();
+    renderWithTheme(
+      <Dialog isOpen onClose={onClose}>
+        <button type="button" onClick={onAction}>
+          Confirm
+        </button>
+      </Dialog>,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+    expect(onAction).toHaveBeenCalledTimes(1);
+    expect(onClose).not.toHaveBeenCalled();
+  });
 });

package/src/components/interaction/Dialog/Dialog.tsx

@@ -84,18 +84,25 @@ export function Dialog({
       animationType="fade"
       onRequestClose={onClose}
     >
-      <Pressable
-        style={styles.overlay}
-        onPress={onClose}
-        accessibilityRole="button"
-        accessibilityLabel="Close dialog"
-      >
+      <View style={styles.overlay}>
+        {/*
+         * A Pressable is accessible by default on iOS, which makes it a leaf:
+         * VoiceOver cannot reach anything nested inside it. As a sibling behind
+         * the panel (not its parent), the backdrop still closes on press for
+         * sighted/touch users but never swallows the panel's contents, so the
+         * close button below stays reachable as the accessible way to close.
+         */}
         <Pressable
+          testID="bds-dialog-backdrop"
+          style={StyleSheet.absoluteFill}
+          onPress={onClose}
+          accessible={false}
+          importantForAccessibility="no"
+        />
+        <View
           style={[styles.panel, { backgroundColor: colors.colorGreySubtle }, style]}
-          onPress={() => {
-            /* prevent close when pressing content */
-          }}
-          accessibilityRole="none"
+          accessibilityViewIsModal
+          onAccessibilityEscape={onClose}
         >
           <Pressable
             style={styles.closeButton}
@@ -121,8 +128,8 @@ export function Dialog({
           )}
 
           {children}
-        </Pressable>
-      </Pressable>
+        </View>
+      </View>
     </Modal>
   );
 }

package/src/components/interaction/DropdownMenu/DropdownMenu.mdx

@@ -69,6 +69,8 @@ export default function App() {
 ## Accessibility
 
 - Trigger has `accessibilityRole="button"` with `expanded` state
-- Menu items have `accessibilityRole="menuitem"`
+- Menu items have `accessibilityRole="menuitem"` and are each reachable on their own — on iOS the sheet is no longer wrapped in a `Pressable`, which used to group the whole sheet (title, Done, every item) into a single VoiceOver element
 - Disabled items communicate their state to assistive technologies
+- The backdrop still closes the menu on press, but is hidden from assistive tech (`accessible={false}`, `importantForAccessibility="no"`) so it doesn't duplicate the sheet's own close control
+- "Done" is the accessible close control; VoiceOver's escape gesture (`onAccessibilityEscape`) also closes the menu
 - Android back button closes the menu