@startupjs-ui/modal 0.1.19 → 0.2.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 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.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
+
+
+
+
+
+## [0.1.21](https://github.com/startupjs/startupjs-ui/compare/v0.1.20...v0.1.21) (2026-03-25)
+
+**Note:** Version bump only for package @startupjs-ui/modal
+
+
+
+
+
 ## [0.1.19](https://github.com/startupjs/startupjs-ui/compare/v0.1.18...v0.1.19) (2026-03-17)
 
 **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/layout.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode, type ComponentType } from 'react'
+import React, { useId, type ReactNode, type ComponentType } from 'react'
 import { View, TouchableOpacity, type StyleProp, type ViewStyle } from 'react-native'
 import { pug, observer } from 'startupjs'
 import { themed } from '@startupjs-ui/core'
@@ -105,6 +105,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 +150,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 +193,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 +205,10 @@ function Modal ({
       ModalElement.modal(
         style=modalStyle
         styleName=[variant]
+        role='dialog'
+        aria-modal=true
+        aria-label=titleId ? undefined : dialogTitle
+        aria-labelledby=titleId
       )
         = header
         = content

package/package.json

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