@startupjs-ui/modal 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.1](https://github.com/startupjs/startupjs-ui/compare/v0.3.0...v0.3.1) (2026-06-08)
+
+**Note:** Version bump only for package @startupjs-ui/modal
+
+
+
+
+
+# [0.3.0](https://github.com/startupjs/startupjs-ui/compare/v0.2.3...v0.3.0) (2026-05-27)
+
+
+### Features
+
+* [BREAKING] [0.3] improve accessibility props for E2E tests. Support testID everywhere ([#31](https://github.com/startupjs/startupjs-ui/issues/31)) ([882588c](https://github.com/startupjs/startupjs-ui/commit/882588ca37d5e1fd14b5717b5697cf9ed47042e4))
+
+
+
+
+
 # [0.2.0](https://github.com/startupjs/startupjs-ui/compare/v0.1.23...v0.2.0) (2026-05-04)
 
 

package/ModalActions/index.tsx

@@ -24,6 +24,8 @@ export interface ModalActionsProps {
   onCancel?: (event: any) => void | Promise<void>
   /** Confirm button handler */
   onConfirm?: (event: any) => void | Promise<void>
+  /** Test identifier */
+  testID?: string
 }
 
 function ModalActions ({
@@ -32,22 +34,25 @@ function ModalActions ({
   cancelLabel = DEFAULT_CANCEL_LABEL,
   confirmLabel = DEFAULT_CONFIRM_LABEL,
   onCancel,
-  onConfirm
+  onConfirm,
+  testID
 }: ModalActionsProps): ReactNode {
   return pug`
-    Div.root(row style=style align='right')
+    Div.root(row style=style testID=testID align='right')
       if children
         = children
       else
         if onCancel
           Button.action(
             color='primary'
+            data-part='cancel'
             onPress=onCancel
           )= cancelLabel
         if onConfirm
           Button.action(
             color='primary'
             variant='flat'
+            data-part='confirm'
             onPress=onConfirm
           )= confirmLabel
   `

package/ModalHeader/index.tsx

@@ -23,6 +23,8 @@ export interface ModalHeaderProps {
   iconStyle?: StyleProp<ViewStyle>
   /** Web-only title id for dialog naming */
   titleId?: string
+  /** Test identifier */
+  testID?: string
 }
 
 function ModalHeader ({
@@ -31,10 +33,11 @@ function ModalHeader ({
   onCrossPress, // @private
   closeIcon = faTimes,
   iconStyle,
-  titleId
+  titleId,
+  testID
 }: ModalHeaderProps): ReactNode {
   return pug`
-    Div.root(row style=style styleName=children ? 'between' : 'right' vAlign='center')
+    Div.root(row style=style testID=testID styleName=children ? 'between' : 'right' vAlign='center')
       if typeof children === 'string'
         Span.title(id=titleId numberOfLines=1)= children
       else

package/index.d.ts

@@ -42,6 +42,8 @@ export interface ModalProps {
     statusBarTranslucent?: boolean;
     /** Allowed screen orientations */
     supportedOrientations?: SupportedOrientation[];
+    /** Test identifier for the modal surface */
+    testID?: string;
     /** Callback fired after modal becomes visible */
     onShow?: () => void;
     /** Called when user clicks on the cross */

package/index.tsx

@@ -68,6 +68,8 @@ export interface ModalProps {
   statusBarTranslucent?: boolean
   /** Allowed screen orientations */
   supportedOrientations?: SupportedOrientation[]
+  /** Test identifier for the modal surface */
+  testID?: string
   /** Callback fired after modal becomes visible */
   onShow?: () => void
   /** Called when user clicks on the cross */
@@ -107,6 +109,7 @@ function ModalRoot ({
   transparent = true,
   supportedOrientations = SUPPORTED_ORIENTATIONS,
   statusBarTranslucent,
+  testID,
   onChange, // DEPRECATED
   onRequestClose,
   onDismiss,
@@ -179,6 +182,7 @@ function ModalRoot ({
             variant=variant
             title=title
             role=role
+            testID=testID
             cancelLabel=cancelLabel
             confirmLabel=confirmLabel
             showCross=showCross

package/layout.tsx

@@ -7,6 +7,24 @@ import ModalContent from './ModalContent'
 import ModalActions, { DEFAULT_CANCEL_LABEL, DEFAULT_CONFIRM_LABEL } from './ModalActions'
 import './index.cssx.styl'
 
+function getTextFromChildren (children: ReactNode): string | undefined {
+  if (children == null || typeof children === 'boolean') return undefined
+  if (typeof children === 'string' || typeof children === 'number') {
+    const text = String(children).trim()
+    return text || undefined
+  }
+  if (Array.isArray(children)) {
+    const parts = children
+      .map(getTextFromChildren)
+      .filter((part): part is string => !!part)
+    return parts.length ? parts.join(' ').trim() : undefined
+  }
+  if (React.isValidElement(children)) {
+    return getTextFromChildren((children as any).props?.children)
+  }
+  return undefined
+}
+
 export interface ModalLayoutProps {
   /** Custom styles applied to the root view */
   style?: StyleProp<ViewStyle>
@@ -20,6 +38,8 @@ export interface ModalLayoutProps {
   title?: string
   /** Accessible role for the modal surface on web @default 'dialog' */
   role?: ViewProps['role']
+  /** Test identifier for the modal surface */
+  testID?: string
   /** DEPRECATED: use cancelLabel instead */
   dismissLabel?: string
   /** Cancel action label @default 'Cancel' */
@@ -51,6 +71,7 @@ function Modal ({
   variant,
   title,
   role,
+  testID,
   dismissLabel,
   cancelLabel = DEFAULT_CANCEL_LABEL,
   confirmLabel = DEFAULT_CONFIRM_LABEL,
@@ -108,8 +129,8 @@ function Modal ({
   const isWindowLayout = variant === 'window'
   const hasActions = !!onCancel || !!onConfirm
   const hasHeader = !!title || !!showCross
-  const headerTitle = !title && React.isValidElement(header) && typeof (header as any).props?.children === 'string'
-    ? (header as any).props.children as string
+  const headerTitle = !title && React.isValidElement(header)
+    ? getTextFromChildren((header as any).props?.children)
     : undefined
   const dialogTitle = title ?? headerTitle
 
@@ -153,8 +174,12 @@ function Modal ({
     cancelLabel = 'OK'
   }
 
+  const headerChildren = header && React.isValidElement(header)
+    ? (header as any).props?.children
+    : undefined
+  const hasStringHeaderChildren = typeof headerChildren === 'string'
   const modalTitleId = useId()
-  const titleId = dialogTitle ? modalTitleId : undefined
+  const titleId = dialogTitle && (title || hasStringHeaderChildren) ? modalTitleId : undefined
 
   // Handle <Modal.Header>
   const headerProps = {
@@ -209,8 +234,9 @@ function Modal ({
         style=modalStyle
         styleName=[variant]
         role=role ?? 'dialog'
+        testID=testID
         aria-modal
-        aria-label=titleId ? undefined : dialogTitle
+        aria-label=dialogTitle
         aria-labelledby=titleId
       )
         = header

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/modal",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "publishConfig": {
     "access": "public"
   },
@@ -8,18 +8,18 @@
   "types": "index.d.ts",
   "type": "module",
   "dependencies": {
-    "@startupjs-ui/button": "^0.2.0",
-    "@startupjs-ui/core": "^0.2.0",
-    "@startupjs-ui/div": "^0.2.0",
-    "@startupjs-ui/icon": "^0.2.0",
-    "@startupjs-ui/portal": "^0.2.0",
-    "@startupjs-ui/scroll-view": "^0.2.0",
-    "@startupjs-ui/span": "^0.2.0"
+    "@startupjs-ui/button": "^0.3.1",
+    "@startupjs-ui/core": "^0.3.0",
+    "@startupjs-ui/div": "^0.3.1",
+    "@startupjs-ui/icon": "^0.3.0",
+    "@startupjs-ui/portal": "^0.3.0",
+    "@startupjs-ui/scroll-view": "^0.3.0",
+    "@startupjs-ui/span": "^0.3.1"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "0c586b841cba1c9d820542f6eca07470f5ea2659"
+  "gitHead": "60311773bdc83f354c797a272774304502d28c58"
 }