@boostdev/design-system-react-native 0.2.6 → 0.4.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,
@@ -2840,7 +2844,8 @@ var TRACK_PADDING = spacing.xxxs;
 var sizeTokens2 = {
   small: { minHeight: 32, fontSize: font.size.bodyS, px: spacing.s, py: spacing.xxs },
   medium: { minHeight: 44, fontSize: font.size.body, px: spacing.m, py: spacing.xs },
-  large: { minHeight: 48, fontSize: font.size.body, px: spacing.m, py: spacing.s }
+  large: { minHeight: 48, fontSize: font.size.body, px: spacing.m, py: spacing.s },
+  xlarge: { minHeight: 56, fontSize: font.size.body, px: spacing.m, py: spacing.s }
 };
 var thumbShadow = {
   shadowColor: "#000",
@@ -3782,46 +3787,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
+            ]
+          }
+        )
+      ] })
     }
   );
 }
@@ -3947,8 +3954,9 @@ function SideSheet({
               {
                 style: StyleSheet41.absoluteFill,
                 onPress: onClose,
-                accessibilityRole: "button",
-                accessibilityLabel: "Close side sheet"
+                testID: "bds-sidesheet-backdrop",
+                accessible: false,
+                importantForAccessibility: "no"
               }
             )
           }
@@ -3964,7 +3972,8 @@ function SideSheet({
               },
               style
             ],
-            accessibilityRole: "none",
+            accessibilityViewIsModal: true,
+            onAccessibilityEscape: onClose,
             children: [
               /* @__PURE__ */ jsxs30(
                 View38,
@@ -4300,8 +4309,9 @@ function DropdownMenu({
                 {
                   style: StyleSheet43.absoluteFill,
                   onPress: () => setOpen(false),
-                  accessibilityRole: "button",
-                  accessibilityLabel: "Close menu"
+                  testID: "bds-dropdownmenu-backdrop",
+                  accessible: false,
+                  importantForAccessibility: "no"
                 }
               )
             }
@@ -4316,100 +4326,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 }
+                                styles43.closeText,
+                                { color: colors2.colorInteractive }
                               ],
-                              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
-                                  }
-                                )
-                              ]
+                              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
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ] })
             }
           )
         ] })
@@ -4458,6 +4463,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),
@@ -4470,27 +4476,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.6",
+  "version": "0.4.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

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

@@ -75,4 +75,77 @@ describe('DropdownMenu (native)', () => {
     fireEvent.click(screen.getByRole('button', { name: 'My Menu' }));
     expect(screen.getByText('My Menu')).toBeInTheDocument();
   });
+
+  it('has an unlabelled, roleless backdrop that closes the menu on press', () => {
+    renderWithTheme(
+      <DropdownMenu trigger={<Trigger>Menu</Trigger>} items={items} title="Menu" />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Menu' }));
+    const backdrop = screen.getByTestId('bds-dropdownmenu-backdrop');
+    expect(backdrop).not.toHaveAttribute('role');
+    fireEvent.click(backdrop);
+    expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+  });
+
+  it('has no full-screen "Close menu" button; "Done" closes the menu', () => {
+    renderWithTheme(
+      <DropdownMenu trigger={<Trigger>Menu</Trigger>} items={items} title="Menu" />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Menu' }));
+    expect(
+      screen.queryByRole('button', { name: 'Close menu' }),
+    ).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+  });
+
+  it('exposes each item as its own menuitem, pressable independently', () => {
+    const onEdit = vi.fn();
+    const onDelete = vi.fn();
+    const menuItems = [
+      { id: 'edit', label: 'Edit', onPress: onEdit },
+      { id: 'delete', label: 'Delete', onPress: onDelete },
+    ];
+    renderWithTheme(
+      <DropdownMenu trigger={<Trigger>Actions</Trigger>} items={menuItems} title="Actions" />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Actions' }));
+
+    const menuitems = screen.getAllByRole('menuitem');
+    expect(menuitems).toHaveLength(2);
+    expect(menuitems.map((el) => el.textContent)).toEqual(['Edit', 'Delete']);
+
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Edit' }));
+    expect(onEdit).toHaveBeenCalledTimes(1);
+    expect(onDelete).not.toHaveBeenCalled();
+    expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+  });
+
+  // On iOS a Pressable is `accessible` by default, so a no-op Pressable
+  // wrapped around the sheet's content used to make VoiceOver treat the
+  // whole sheet (all items included) as a single element. jsdom has no iOS
+  // grouping, but react-native-web's Pressable always renders with a
+  // `tabindex` attribute (0, or -1 disabled) on its own DOM node, wrapper
+  // or not. So a stray wrapper is detectable here as a `tabindex`-bearing
+  // ancestor between the menuitem and the sheet — the menuitem should have
+  // none.
+  it('renders each item with no tabindex-bearing wrapper between it and the sheet', () => {
+    renderWithTheme(
+      <DropdownMenu trigger={<Trigger>Menu</Trigger>} items={items} title="Menu" />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Menu' }));
+    const item = screen.getByRole('menuitem', { name: 'Edit' });
+
+    let node: HTMLElement | null = item.parentElement;
+    let tabIndexAncestor: HTMLElement | null = null;
+    while (node) {
+      if (node.hasAttribute('tabindex')) {
+        tabIndexAncestor = node;
+        break;
+      }
+      node = node.parentElement;
+    }
+
+    expect(tabIndexAncestor).toBeNull();
+  });
 });