@startupjs-ui/modal 0.1.22 → 0.2.0-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.1](https://github.com/startupjs/startupjs-ui/compare/v0.2.0-alpha.0...v0.2.0-alpha.1) (2026-04-10)
+
+
+### Bug Fixes
+
+* **dialogs:** use 'alertdialog' role for confirm(), prompt(), alert() ([ae2989f](https://github.com/startupjs/startupjs-ui/commit/ae2989fd6cf7b19a189330b3a180226727efc3fe))
+
+
+
+
+
+# [0.2.0-alpha.0](https://github.com/startupjs/startupjs-ui/compare/v0.1.22...v0.2.0-alpha.0) (2026-03-27)
+
+
+### Features
+
+* fix and improve accessibility of various components. Add storybook with tests. ([#21](https://github.com/startupjs/startupjs-ui/issues/21)) ([83b6576](https://github.com/startupjs/startupjs-ui/commit/83b65767ed61b24209f71b143ba1c2986170ab58))
+
+
+
+
+
 ## [0.1.22](https://github.com/startupjs/startupjs-ui/compare/v0.1.21...v0.1.22) (2026-03-25)
 
 **Note:** Version bump only for package @startupjs-ui/modal

package/ModalHeader/index.cssx.styl

@@ -18,3 +18,14 @@ $gutter = $UI.gutters.m
 
 .icon
   color: var(--color-text-description)
+
+.srOnly
+  position absolute
+  width 1px
+  height 1px
+  padding 0
+  margin -1px
+  overflow hidden
+  clip rect(0, 0, 0, 0)
+  white-space nowrap
+  border 0

package/ModalHeader/index.tsx

@@ -21,6 +21,8 @@ export interface ModalHeaderProps {
   closeIcon?: object
   /** Style applied to the close icon */
   iconStyle?: StyleProp<ViewStyle>
+  /** Web-only title id for dialog naming */
+  titleId?: string
 }
 
 function ModalHeader ({
@@ -28,16 +30,18 @@ function ModalHeader ({
   children,
   onCrossPress, // @private
   closeIcon = faTimes,
-  iconStyle
+  iconStyle,
+  titleId
 }: ModalHeaderProps): ReactNode {
   return pug`
     Div.root(row style=style styleName=children ? 'between' : 'right' vAlign='center')
       if typeof children === 'string'
-        Span.title(numberOfLines=1)= children
+        Span.title(id=titleId numberOfLines=1)= children
       else
         = children
       if onCrossPress
         Div.close(onPress=onCrossPress)
+          Span.srOnly Close dialog
           Icon.icon(
             style=iconStyle
             icon=closeIcon

package/README.mdx

@@ -160,6 +160,7 @@ The modal can automatically display action buttons at the bottom:
 | `$visible` | `any` | | Scoped model for two-way visibility binding |
 | `ref` | `RefObject` | | Imperative ref exposing `open()` and `close()` |
 | `title` | `string` | | Header title text |
+| `role` | `string` | `'dialog'` | Accessible role for the modal surface on web |
 | `cancelLabel` | `string` | `'Cancel'` | Label for the cancel button |
 | `confirmLabel` | `string` | `'Confirm'` | Label for the confirm button |
 | `showCross` | `boolean` | `true` | Whether to show a close icon in the header |

package/index.d.ts

@@ -2,7 +2,7 @@
 // DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
 
 import { type ReactNode, type ComponentType, type RefObject } from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { type StyleProp, type ViewStyle, type ViewProps } from 'react-native';
 type SupportedOrientation = 'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right';
 export declare const _PropsJsonSchema: {};
 export interface ModalProps {
@@ -22,6 +22,8 @@ export interface ModalProps {
     ref?: RefObject<any>;
     /** Header title text */
     title?: string;
+    /** Accessible role for the modal surface on web @default 'dialog' */
+    role?: ViewProps['role'];
     /** Label for cancel action @default 'Cancel' */
     cancelLabel?: string;
     /** Label for confirm action @default 'Confirm' */

package/index.tsx

@@ -5,7 +5,7 @@ import React, {
   type ComponentType,
   type RefObject
 } from 'react'
-import { SafeAreaView, Modal as RNModal, type StyleProp, type ViewStyle } from 'react-native'
+import { SafeAreaView, Modal as RNModal, type StyleProp, type ViewStyle, type ViewProps } from 'react-native'
 import { pug, observer, $ } from 'startupjs'
 import { themed } from '@startupjs-ui/core'
 import Portal from '@startupjs-ui/portal'
@@ -48,6 +48,8 @@ export interface ModalProps {
   ref?: RefObject<any>
   /** Header title text */
   title?: string
+  /** Accessible role for the modal surface on web @default 'dialog' */
+  role?: ViewProps['role']
   /** Label for cancel action @default 'Cancel' */
   cancelLabel?: string
   /** Label for confirm action @default 'Confirm' */
@@ -95,6 +97,7 @@ function ModalRoot ({
   $visible,
   ref,
   title,
+  role,
   cancelLabel = DEFAULT_CANCEL_LABEL,
   confirmLabel = DEFAULT_CONFIRM_LABEL,
   showCross = true,
@@ -175,6 +178,7 @@ function ModalRoot ({
             modalStyle=modalStyle
             variant=variant
             title=title
+            role=role
             cancelLabel=cancelLabel
             confirmLabel=confirmLabel
             showCross=showCross

package/layout.tsx

@@ -1,5 +1,5 @@
-import React, { type ReactNode, type ComponentType } from 'react'
-import { View, TouchableOpacity, type StyleProp, type ViewStyle } from 'react-native'
+import React, { useId, type ReactNode, type ComponentType } from 'react'
+import { View, TouchableOpacity, type StyleProp, type ViewStyle, type ViewProps } from 'react-native'
 import { pug, observer } from 'startupjs'
 import { themed } from '@startupjs-ui/core'
 import ModalHeader from './ModalHeader'
@@ -18,6 +18,8 @@ export interface ModalLayoutProps {
   variant?: 'window' | 'fullscreen'
   /** Title rendered when no custom header provided */
   title?: string
+  /** Accessible role for the modal surface on web @default 'dialog' */
+  role?: ViewProps['role']
   /** DEPRECATED: use cancelLabel instead */
   dismissLabel?: string
   /** Cancel action label @default 'Cancel' */
@@ -48,6 +50,7 @@ function Modal ({
   children,
   variant,
   title,
+  role,
   dismissLabel,
   cancelLabel = DEFAULT_CANCEL_LABEL,
   confirmLabel = DEFAULT_CONFIRM_LABEL,
@@ -105,6 +108,10 @@ 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
+    : undefined
+  const dialogTitle = title ?? headerTitle
 
   const _onCrossPress = async (event: any) => {
     event.persist() // TODO: remove in react 17
@@ -146,9 +153,13 @@ function Modal ({
     cancelLabel = 'OK'
   }
 
+  const modalTitleId = useId()
+  const titleId = dialogTitle ? modalTitleId : undefined
+
   // Handle <Modal.Header>
   const headerProps = {
-    onCrossPress: showCross ? _onCrossPress : undefined
+    onCrossPress: showCross ? _onCrossPress : undefined,
+    titleId
   }
 
   header = header
@@ -185,7 +196,10 @@ function Modal ({
     : React.createElement(ModalContent, contentProps, contentChildren)
 
   return pug`
-    View.root(style=style styleName=[variant])
+    View.root(
+      style=style
+      styleName=[variant]
+    )
       if isWindowLayout
         TouchableOpacity.overlay(
           activeOpacity=1
@@ -194,6 +208,10 @@ function Modal ({
       ModalElement.modal(
         style=modalStyle
         styleName=[variant]
+        role=role ?? 'dialog'
+        aria-modal
+        aria-label=titleId ? undefined : dialogTitle
+        aria-labelledby=titleId
       )
         = header
         = content

package/package.json

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