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

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

@@ -151,11 +151,17 @@ export function DropdownMenu({
               { backgroundColor: 'rgba(0, 0, 0, 0.5)', opacity: backdropAnim },
             ]}
           >
+            {/* The sheet sits on top of this backdrop as a sibling, so a
+                touch on the sheet never reaches this Pressable — it only
+                needs to handle taps on the exposed backdrop area. Hiding it
+                from assistive tech avoids a duplicate, full-screen "close"
+                control alongside the sheet's own Done button. */}
             <Pressable
               style={StyleSheet.absoluteFill}
               onPress={() => setOpen(false)}
-              accessibilityRole="button"
-              accessibilityLabel="Close menu"
+              testID="bds-dropdownmenu-backdrop"
+              accessible={false}
+              importantForAccessibility="no"
             />
           </Animated.View>
           <Animated.View
@@ -166,86 +172,86 @@ export function DropdownMenu({
                 transform: [{ translateY: slideAnim }],
               },
             ]}
+            accessibilityViewIsModal
+            onAccessibilityEscape={() => setOpen(false)}
           >
-            <Pressable
-              onPress={() => {
-                /* prevent close when pressing sheet */
-              }}
-            >
-              <SafeAreaView>
-                <View
-                  style={[
-                    styles.sheetHeader,
-                    { borderBottomColor: colors.colorBgSubtle },
-                  ]}
+            {/* No press-swallowing wrapper here: the backdrop is a sibling
+                behind the sheet, so sheet touches never reach it. On iOS a
+                Pressable is accessible by default and would turn the whole
+                sheet into one VoiceOver element, hiding every item. */}
+            <SafeAreaView>
+              <View
+                style={[
+                  styles.sheetHeader,
+                  { borderBottomColor: colors.colorBgSubtle },
+                ]}
+              >
+                <Text style={[styles.sheetTitle, { color: colors.colorOnBg }]}>
+                  {title}
+                </Text>
+                <Pressable
+                  accessibilityRole="button"
+                  accessibilityLabel="Close"
+                  onPress={() => setOpen(false)}
+                  hitSlop={8}
                 >
-                  <Text style={[styles.sheetTitle, { color: colors.colorOnBg }]}>
-                    {title}
-                  </Text>
-                  <Pressable
-                    accessibilityRole="button"
-                    accessibilityLabel="Close"
-                    onPress={() => setOpen(false)}
-                    hitSlop={8}
+                  <Text
+                    style={[
+                      styles.closeText,
+                      { color: colors.colorInteractive },
+                    ]}
                   >
-                    <Text
-                      style={[
-                        styles.closeText,
-                        { color: colors.colorInteractive },
+                    Done
+                  </Text>
+                </Pressable>
+              </View>
+              <FlatList
+                data={items}
+                keyExtractor={(item) => item.id}
+                renderItem={({ item }) => (
+                  <>
+                    {item.separator && (
+                      <View
+                        style={[
+                          styles.separator,
+                          { backgroundColor: colors.colorBgSubtle },
+                        ]}
+                        accessibilityRole="none"
+                      />
+                    )}
+                    <Pressable
+                      accessibilityRole="menuitem"
+                      accessibilityLabel={item.label}
+                      accessibilityState={{ disabled: item.disabled }}
+                      disabled={item.disabled}
+                      onPress={() => handleItemPress(item)}
+                      style={({ pressed }) => [
+                        styles.item,
+                        pressed && { backgroundColor: colors.colorBgSubtle },
+                        item.disabled && { opacity: 0.4 },
                       ]}
                     >
-                      Done
-                    </Text>
-                  </Pressable>
-                </View>
-                <FlatList
-                  data={items}
-                  keyExtractor={(item) => item.id}
-                  renderItem={({ item }) => (
-                    <>
-                      {item.separator && (
+                      {!!item.icon && (
                         <View
-                          style={[
-                            styles.separator,
-                            { backgroundColor: colors.colorBgSubtle },
-                          ]}
-                          accessibilityRole="none"
-                        />
+                          importantForAccessibility="no-hide-descendants"
+                          accessibilityElementsHidden={true}
+                        >
+                          {item.icon}
+                        </View>
                       )}
-                      <Pressable
-                        accessibilityRole="menuitem"
-                        accessibilityLabel={item.label}
-                        accessibilityState={{ disabled: item.disabled }}
-                        disabled={item.disabled}
-                        onPress={() => handleItemPress(item)}
-                        style={({ pressed }) => [
-                          styles.item,
-                          pressed && { backgroundColor: colors.colorBgSubtle },
-                          item.disabled && { opacity: 0.4 },
+                      <Text
+                        style={[
+                          styles.itemText,
+                          { color: colors.colorOnBg },
                         ]}
                       >
-                        {!!item.icon && (
-                          <View
-                            importantForAccessibility="no-hide-descendants"
-                            accessibilityElementsHidden={true}
-                          >
-                            {item.icon}
-                          </View>
-                        )}
-                        <Text
-                          style={[
-                            styles.itemText,
-                            { color: colors.colorOnBg },
-                          ]}
-                        >
-                          {item.label}
-                        </Text>
-                      </Pressable>
-                    </>
-                  )}
-                />
-              </SafeAreaView>
-            </Pressable>
+                        {item.label}
+                      </Text>
+                    </Pressable>
+                  </>
+                )}
+              />
+            </SafeAreaView>
           </Animated.View>
         </View>
       </Modal>

package/src/components/interaction/Popover/Popover.mdx

@@ -56,6 +56,8 @@ export default function App() {
 ## Accessibility
 
 - Trigger has `accessibilityRole="button"` with `expanded` state
-- Backdrop press closes the popover
+- The backdrop is a separate "Close popover" button beside the panel, not wrapped around it, so the content stays independently reachable; a VoiceOver double-tap on it closes the popover
+- The content inside the panel is separately reachable by VoiceOver and XCUITest
+- VoiceOver's escape gesture also closes the popover
 - Android back button triggers `onRequestClose` to dismiss
 - Panel has shadow elevation for visual depth

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

@@ -11,6 +11,18 @@ function Trigger({ children, ...rest }: { children: string; onPress?: () => void
   return <Pressable {...rest}><Text>{children}</Text></Pressable>;
 }
 
+// react-native-web's Modal renders its fade animation wrapper as the parent of
+// the ModalFocusTrap's `role="presentation"` sentinels. jsdom never dispatches
+// the CSS `animationend` event that wrapper waits for before unmounting, so we
+// read its `pointerEvents` instead to observe whether the Modal has closed.
+function animationRoot(): HTMLElement {
+  const el = document.body.querySelector('[role="presentation"]')?.parentElement;
+  if (!(el instanceof HTMLElement)) {
+    throw new Error('Modal animation root not found');
+  }
+  return el;
+}
+
 describe('Popover (native)', () => {
   it('renders the trigger element', () => {
     renderWithTheme(
@@ -50,16 +62,44 @@ describe('Popover (native)', () => {
     expect(trigger).toBeInTheDocument();
   });
 
-  it('renders backdrop with close label when open', () => {
+  it('renders a backdrop button, separate from the content, that closes the popover', () => {
+    renderWithTheme(
+      <Popover content={<Text>Closable</Text>} accessibilityLabel="Test">
+        <Trigger>Trigger</Trigger>
+      </Popover>,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Test' }));
+    expect(screen.getByText('Closable')).toBeInTheDocument();
+
+    const backdrop = screen.getByTestId('bds-popover-backdrop');
+    expect(backdrop).toHaveAttribute('role', 'button');
+    expect(screen.getByRole('button', { name: 'Close popover' })).toBe(backdrop);
+    expect(backdrop).not.toContainElement(screen.getByText('Closable'));
+
+    // jsdom never dispatches the CSS `animationend` event that react-native-web's
+    // fade-out Modal waits for before it unmounts, so a press that closes the
+    // popover can't be observed here as the content leaving the DOM. Assert the
+    // state change react-native-web *does* apply synchronously instead: the
+    // Modal's animation root switches from interactive to inert.
+    expect(getComputedStyle(animationRoot()).pointerEvents).not.toBe('none');
+    fireEvent.click(backdrop);
+    expect(getComputedStyle(animationRoot()).pointerEvents).toBe('none');
+  });
+
+  it('does not close the popover when the content is pressed', () => {
     renderWithTheme(
       <Popover content={<Text>Closable</Text>} accessibilityLabel="Test">
         <Trigger>Trigger</Trigger>
       </Popover>,
     );
     fireEvent.click(screen.getByRole('button', { name: 'Test' }));
+    fireEvent.click(screen.getByText('Closable'));
     expect(screen.getByText('Closable')).toBeInTheDocument();
-    // Verify the close backdrop button exists
-    expect(screen.getByRole('button', { name: 'Close popover' })).toBeInTheDocument();
+    // `getByText` alone would still pass even if the press HAD closed the
+    // popover, since the fade-out Modal never unmounts in jsdom (see
+    // `animationRoot` above). Assert the Modal stayed interactive too, so this
+    // test actually fails if a content press starts closing the popover.
+    expect(getComputedStyle(animationRoot()).pointerEvents).not.toBe('none');
   });
 
   it('uses default accessibility label when none provided', () => {

package/src/components/interaction/Popover/Popover.tsx

@@ -49,6 +49,7 @@ export function Popover({
 }: Readonly<PopoverProps>) {
   const { colors } = useTheme();
   const [isOpen, setIsOpen] = useState(false);
+  const close = () => setIsOpen(false);
 
   return (
     <View style={[styles.wrapper, style]}>
@@ -62,25 +63,34 @@ export function Popover({
         visible={isOpen}
         transparent
         animationType="fade"
-        onRequestClose={() => setIsOpen(false)}
+        onRequestClose={close}
       >
-        <Pressable
-          style={styles.overlay}
-          onPress={() => setIsOpen(false)}
-          accessibilityRole="button"
-          accessibilityLabel="Close popover"
-        >
+        {/*
+         * A Pressable is accessible by default on iOS, which makes it a leaf:
+         * VoiceOver cannot reach anything nested inside it. Popover has no ✕
+         * button, so the backdrop stays the accessible close — a sibling
+         * "Close popover" button beside the panel, not wrapped around it, so
+         * the content underneath stays separately reachable. onAccessibilityTap
+         * matters here: without it, a VoiceOver double-tap activates the
+         * element's centre, which lies under the centred panel, so it would
+         * never close.
+         */}
+        <View style={styles.overlay} onAccessibilityEscape={close}>
           <Pressable
+            testID="bds-popover-backdrop"
+            style={StyleSheet.absoluteFill}
+            onPress={close}
+            onAccessibilityTap={close}
+            accessibilityRole="button"
+            accessibilityLabel="Close popover"
+          />
+          <View
             style={[styles.panel, { backgroundColor: colors.colorBg }]}
-            onPress={() => {
-              /* prevent close when pressing panel */
-            }}
-            accessibilityRole="none"
             accessibilityLabel={accessibilityLabel}
           >
             {content}
-          </Pressable>
-        </Pressable>
+          </View>
+        </View>
       </Modal>
     </View>
   );

package/src/components/interaction/SideSheet/SideSheet.mdx

@@ -47,14 +47,15 @@ export default function App() {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `isOpen` | `boolean` | — | Controls visibility of the side sheet |
-| `onClose` | `() => void` | — | Called when backdrop or close button is pressed |
+| `onClose` | `() => void` | — | Called when the backdrop or the close (✕) button is pressed |
 | `title` | `ReactNode` | — | Title displayed in the side sheet header |
 | `children` | `ReactNode` | — | Side sheet body content |
 | `style` | `StyleProp<ViewStyle>` | — | Override panel styles |
 
 ## Accessibility
 
-- Backdrop press and close button both call `onClose`
-- Close button has `accessibilityLabel="Close side sheet"`
+- Backdrop press and the close (✕) button both call `onClose`, but the backdrop is hidden from assistive tech (`accessible={false}`, `importantForAccessibility="no"`) so it doesn't duplicate the accessible close control
+- The close (✕) button is the accessible close control, with `accessibilityLabel="Close side sheet"`
+- The panel is marked `accessibilityViewIsModal`; VoiceOver's escape gesture (`onAccessibilityEscape`) also calls `onClose`
 - Android back button triggers `onRequestClose` which calls `onClose`
 - Backdrop fades in, panel slides from bottom

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

@@ -34,38 +34,37 @@ describe('SideSheet (native)', () => {
     expect(screen.getByText('Settings')).toBeInTheDocument();
   });
 
-  it('renders a close button with accessible label', () => {
+  it('renders exactly one accessible close button, labelled for assistive tech', () => {
     renderWithTheme(
       <SideSheet isOpen onClose={() => {}}>
         <span>Body</span>
       </SideSheet>,
     );
     const closeButtons = screen.getAllByRole('button', { name: 'Close side sheet' });
-    expect(closeButtons.length).toBeGreaterThanOrEqual(1);
+    expect(closeButtons).toHaveLength(1);
   });
 
-  it('calls onClose when close button is pressed', () => {
+  it('calls onClose when the close (X) button is pressed', () => {
     const onClose = vi.fn();
     renderWithTheme(
       <SideSheet isOpen onClose={onClose} title="Test">
         <span>Body</span>
       </SideSheet>,
     );
-    const closeButtons = screen.getAllByRole('button', { name: 'Close side sheet' });
-    const innerClose = closeButtons[closeButtons.length - 1];
-    fireEvent.click(innerClose);
+    fireEvent.click(screen.getByRole('button', { name: 'Close side sheet' }));
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  it('calls onClose when backdrop is pressed', () => {
+  it('has an unlabelled, roleless backdrop that calls onClose when pressed', () => {
     const onClose = vi.fn();
     renderWithTheme(
       <SideSheet isOpen onClose={onClose}>
         <span>Body</span>
       </SideSheet>,
     );
-    const closeButtons = screen.getAllByRole('button', { name: 'Close side sheet' });
-    fireEvent.click(closeButtons[0]);
+    const backdrop = screen.getByTestId('bds-sidesheet-backdrop');
+    expect(backdrop).not.toHaveAttribute('role');
+    fireEvent.click(backdrop);
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 

package/src/components/interaction/SideSheet/SideSheet.tsx

@@ -128,11 +128,16 @@ export function SideSheet({
             { backgroundColor: 'rgba(0, 0, 0, 0.5)', opacity: backdropAnim },
           ]}
         >
+          {/* The panel sits on top of this backdrop as a sibling, so a
+              touch on the panel never reaches this Pressable. Hiding it
+              from assistive tech avoids a duplicate, full-screen "close"
+              control alongside the panel's own close button. */}
           <Pressable
             style={StyleSheet.absoluteFill}
             onPress={onClose}
-            accessibilityRole="button"
-            accessibilityLabel="Close side sheet"
+            testID="bds-sidesheet-backdrop"
+            accessible={false}
+            importantForAccessibility="no"
           />
         </Animated.View>
         <Animated.View
@@ -144,7 +149,8 @@ export function SideSheet({
             },
             style,
           ]}
-          accessibilityRole="none"
+          accessibilityViewIsModal
+          onAccessibilityEscape={onClose}
         >
           <View
             style={[styles.header, { borderBottomColor: colors.colorBgSubtle }]}

package/src/components/ui/Alert/Alert.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { Text } from 'react-native';
+import { Text, View, Pressable } from 'react-native';
 import { ThemeProvider } from '../../../native/ThemeContext';
 import { Alert } from './Alert';
 
@@ -13,6 +13,37 @@ describe('Alert (native)', () => {
     expect(screen.getByText('Something happened')).toBeInTheDocument();
   });
 
+  it('renders non-text children such as a view with an action', () => {
+    const onPress = vi.fn();
+    renderWithTheme(
+      <Alert variant="warning" title="Storage almost full">
+        <View>
+          <Text>Almost out of space</Text>
+          <Pressable accessibilityRole="button" onPress={onPress}>
+            <Text>Upgrade</Text>
+          </Pressable>
+        </View>
+      </Alert>,
+    );
+    expect(screen.getByText('Almost out of space')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Upgrade' }));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('passes the resolved text color to a function child', () => {
+    let receivedColor = '';
+    renderWithTheme(
+      <Alert variant="info">
+        {({ color }) => {
+          receivedColor = color;
+          return <Text style={{ color }}>Themed body</Text>;
+        }}
+      </Alert>,
+    );
+    expect(screen.getByText('Themed body')).toBeInTheDocument();
+    expect(receivedColor).not.toBe('');
+  });
+
   it('renders the title when provided', () => {
     renderWithTheme(<Alert title="Heads up">Details here</Alert>);
     expect(screen.getByText('Heads up')).toBeInTheDocument();

package/src/components/ui/Alert/Alert.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { View, Text, Pressable } from 'react-native';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemeProvider } from '../../../native/ThemeContext';
 import { Alert } from './Alert';
@@ -39,3 +40,47 @@ export const AllVariants: Story = {
     </div>
   ),
 };
+
+// A string child gets the default body styling automatically. A non-text child
+// (View, Pressable, custom nodes) is rendered as-is, so it can hold any layout.
+export const WithRichContent: Story = {
+  args: { children: '', variant: 'warning', title: 'Storage almost full' },
+  render: (args) => (
+    <Alert {...args}>
+      <View style={{ gap: 8 }}>
+        <Text style={{ fontSize: 13 }}>You are using 95% of your storage quota.</Text>
+        <Pressable
+          accessibilityRole="button"
+          onPress={() => {}}
+          style={{ alignSelf: 'flex-start' }}
+        >
+          <Text style={{ fontWeight: '600' }}>Upgrade plan</Text>
+        </Pressable>
+      </View>
+    </Alert>
+  ),
+};
+
+// Pass a function child to receive the variant's resolved text color, so custom
+// content matches the alert's theme automatically.
+export const WithThemedContent: Story = {
+  args: { children: '', variant: 'error', title: 'Payment failed' },
+  render: (args) => (
+    <Alert {...args}>
+      {({ color }) => (
+        <View style={{ gap: 8 }}>
+          <Text style={{ color, fontSize: 13 }}>
+            Your card was declined. Update your payment method to continue.
+          </Text>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => {}}
+            style={{ alignSelf: 'flex-start' }}
+          >
+            <Text style={{ color, fontWeight: '600' }}>Update payment method</Text>
+          </Pressable>
+        </View>
+      )}
+    </Alert>
+  ),
+};

package/src/components/ui/Alert/Alert.tsx

@@ -5,11 +5,15 @@ import { useTheme } from '../../../native/ThemeContext';
 
 type AlertVariant = 'info' | 'success' | 'warning' | 'error';
 
+/** Function form of children: receives the variant's resolved text color so
+ *  custom content can match the alert's theme. */
+type AlertContentRenderProp = (props: { color: string }) => ReactNode;
+
 interface AlertProps {
   variant?: AlertVariant;
   icon?: ReactNode;
   title?: string;
-  children: ReactNode;
+  children: ReactNode | AlertContentRenderProp;
   onDismiss?: () => void;
   style?: StyleProp<ViewStyle>;
 }
@@ -66,6 +70,7 @@ export function Alert({
   };
 
   const { bg, text, border: borderColor } = variantColors[variant];
+  const resolvedChildren = typeof children === 'function' ? children({ color: text }) : children;
 
   return (
     <View
@@ -76,7 +81,11 @@ export function Alert({
       {icon && <View style={styles.icon}>{icon}</View>}
       <View style={styles.content}>
         {title && <Text style={[styles.title, { color: text }]}>{title}</Text>}
-        <Text style={[styles.body, { color: text }]}>{children}</Text>
+        {typeof resolvedChildren === 'string' || typeof resolvedChildren === 'number' ? (
+          <Text style={[styles.body, { color: text }]}>{resolvedChildren}</Text>
+        ) : (
+          resolvedChildren
+        )}
       </View>
       {onDismiss && (
         <Pressable

package/src/components/ui/NotificationBanner/NotificationBanner.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { Text } from 'react-native';
+import { Text, View, Pressable } from 'react-native';
 import { ThemeProvider } from '../../../native/ThemeContext';
 import { NotificationBanner } from './NotificationBanner';
 
@@ -13,6 +13,37 @@ describe('NotificationBanner (native)', () => {
     expect(screen.getByText('Update available')).toBeInTheDocument();
   });
 
+  it('renders non-text children such as a view with an action', () => {
+    const onPress = vi.fn();
+    renderWithTheme(
+      <NotificationBanner variant="warning">
+        <View>
+          <Text>Session expiring</Text>
+          <Pressable accessibilityRole="button" onPress={onPress}>
+            <Text>Extend</Text>
+          </Pressable>
+        </View>
+      </NotificationBanner>,
+    );
+    expect(screen.getByText('Session expiring')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Extend' }));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('passes the resolved text color to a function child', () => {
+    let receivedColor = '';
+    renderWithTheme(
+      <NotificationBanner variant="info">
+        {({ color }) => {
+          receivedColor = color;
+          return <Text style={{ color }}>Themed content</Text>;
+        }}
+      </NotificationBanner>,
+    );
+    expect(screen.getByText('Themed content')).toBeInTheDocument();
+    expect(receivedColor).not.toBe('');
+  });
+
   it('has alert role for error variant', () => {
     renderWithTheme(
       <NotificationBanner variant="error">Something went wrong</NotificationBanner>,

package/src/components/ui/NotificationBanner/NotificationBanner.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { View, Text, Pressable } from 'react-native';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemeProvider } from '../../../native/ThemeContext';
 import { NotificationBanner } from './NotificationBanner';
@@ -35,3 +36,32 @@ export const AllVariants: Story = {
     </div>
   ),
 };
+
+// A string child keeps the default body styling. A non-text child renders as-is.
+export const WithRichContent: Story = {
+  args: { children: '', variant: 'warning' },
+  render: (args) => (
+    <NotificationBanner {...args}>
+      <View style={{ gap: 2 }}>
+        <Text style={{ fontSize: 13, fontWeight: '600' }}>Session expiring</Text>
+        <Text style={{ fontSize: 13 }}>You will be signed out in 2 minutes.</Text>
+      </View>
+    </NotificationBanner>
+  ),
+};
+
+// Pass a function child to receive the variant's resolved text color, so custom
+// content matches the banner's theme automatically.
+export const WithThemedContent: Story = {
+  args: { children: '', variant: 'error' },
+  render: (args) => (
+    <NotificationBanner {...args}>
+      {({ color }) => (
+        <View style={{ gap: 2 }}>
+          <Text style={{ color, fontSize: 13, fontWeight: '600' }}>Sync failed</Text>
+          <Text style={{ color, fontSize: 13 }}>Check your connection and try again.</Text>
+        </View>
+      )}
+    </NotificationBanner>
+  ),
+};