@startupjs-ui/div 0.1.22 → 0.2.0-alpha.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.2.0-alpha.1](https://github.com/startupjs/startupjs-ui/compare/v0.2.0-alpha.0...v0.2.0-alpha.1) (2026-04-10)
+
+**Note:** Version bump only for package @startupjs-ui/div
+
+
+
+
+
+# [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/div

package/index.d.ts

@@ -63,6 +63,8 @@ export interface DivProps extends ViewProps {
     accessibilityRole?: AccessibilityRole;
     /** Deprecated custom tooltip renderer @deprecated */
     renderTooltip?: any;
+    /** Internal: render a native <button> host on web when the resolved role is button */
+    _webNativeButton?: boolean;
     /** Test ID for testing purposes */
     'data-testid'?: string;
 }

package/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, type ReactNode, type RefObject } from 'react'
+import { useLayoutEffect, useState, useRef, type ReactNode, type RefObject } from 'react'
 import {
   View,
   Pressable,
@@ -17,11 +17,6 @@ import STYLES from './index.cssx.styl'
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
 
-function hasAnimatedProperty (style: any): boolean {
-  if (!style) return false
-  return Object.keys(style).some(key => key.startsWith('animation') || key.startsWith('transition'))
-}
-
 const DEPRECATED_PUSHED_VALUES = ['xs', 'xl', 'xxl']
 const PRESSABLE_PROPS = ['onPress', 'onLongPress', 'onPressIn', 'onPressOut']
 const isWeb = Platform.OS === 'web'
@@ -95,6 +90,8 @@ export interface DivProps extends ViewProps {
   accessibilityRole?: AccessibilityRole
   /** Deprecated custom tooltip renderer @deprecated */
   renderTooltip?: any // Deprecated
+  /** Internal: render a native <button> host on web when the resolved role is button */
+  _webNativeButton?: boolean
   /** Test ID for testing purposes */
   'data-testid'?: string
 }
@@ -123,6 +120,7 @@ function Div ({
   tooltip,
   tooltipStyle,
   renderTooltip,
+  _webNativeButton = false,
   ref,
   ...props
 }: DivProps): ReactNode {
@@ -136,10 +134,12 @@ function Div ({
   const rootRef = ref ?? fallbackRef
 
   let pressableStyle: StyleProp<ViewStyle> = {}
+  let deferredRole: AccessibilityRole | string | undefined
   ;({
     props,
     pressableStyle,
-    accessibilityRole
+    accessibilityRole,
+    deferredRole
   } = useDecoratePressableProps({
     props,
     style,
@@ -149,7 +149,24 @@ function Div ({
     isPressable,
     disabled,
     accessibilityRole,
-    feedback
+    feedback,
+    webNativeButton: _webNativeButton
+  }))
+
+  ;({
+    props,
+    accessible,
+    accessibilityRole,
+    deferredRole
+  } = useDecorateAccessibilityProps({
+    props,
+    rootRef,
+    disabled,
+    accessible,
+    accessibilityRole,
+    isPressable,
+    deferredRole,
+    webNativeButton: _webNativeButton
   }))
 
   let tooltipElement
@@ -172,8 +189,6 @@ function Div ({
   let levelModifier
   if (level) levelModifier = `shadow-${level}`
 
-  if (!accessible) accessibilityRole = undefined
-
   const isAnimated = hasAnimatedProperty(style) || hasAnimatedProperty(pressableStyle)
   const Component = isPressable
     ? (isAnimated ? AnimatedPressable : Pressable)
@@ -217,6 +232,78 @@ function Div ({
   } else return divElement
 }
 
+function hasAnimatedProperty (style: any): boolean {
+  if (!style) return false
+  return Object.keys(style).some(key => key.startsWith('animation') || key.startsWith('transition'))
+}
+
+function useDecorateAccessibilityProps ({
+  props,
+  rootRef,
+  disabled,
+  accessible,
+  accessibilityRole,
+  isPressable,
+  deferredRole,
+  webNativeButton
+}: {
+  props: Record<string, any>
+  rootRef: RefObject<any>
+  disabled?: boolean
+  accessible?: boolean
+  accessibilityRole?: AccessibilityRole
+  isPressable: boolean
+  deferredRole?: AccessibilityRole | string
+  webNativeButton?: boolean
+}): {
+    props: Record<string, any>
+    accessible?: boolean
+    accessibilityRole?: AccessibilityRole
+    deferredRole?: AccessibilityRole | string
+  } {
+  if (accessible == null && isPressable) accessible = true
+  if (accessible === false) {
+    accessibilityRole = undefined
+    deferredRole = undefined
+    props.role = undefined
+  }
+
+  if (props['aria-disabled'] == null && disabled != null) {
+    props['aria-disabled'] = disabled
+  }
+
+  const roleProp = props.role
+  const ariaDisabled = props['aria-disabled']
+
+  useLayoutEffect(() => {
+    if (!isWeb) return
+    const node = rootRef.current
+    if (!node || typeof node.setAttribute !== 'function') return
+    // Keep role declarative by default too. This manual patch is only for the
+    // deferred-role web path where we intentionally avoid a native <button>
+    // host to prevent invalid nested-button markup, but still need button
+    // semantics on the resulting DOM node.
+    if (deferredRole != null) {
+      node.setAttribute('role', deferredRole)
+    } else if (roleProp == null) {
+      node.removeAttribute('role')
+    }
+    // Keep the RN / aria props declarative by default. This manual patch is only
+    // for the current RN Web bug where disabled semantics are dropped on the
+    // deferred-role pressable path that we use to avoid nested native buttons.
+    if (ariaDisabled != null) {
+      node.setAttribute('aria-disabled', String(ariaDisabled))
+    } else {
+      node.removeAttribute('aria-disabled')
+    }
+    if (webNativeButton && 'disabled' in node) {
+      node.disabled = !!disabled
+    }
+  }, [rootRef, deferredRole, roleProp, ariaDisabled, webNativeButton, disabled])
+
+  return { props, accessible, accessibilityRole, deferredRole }
+}
+
 function useDecoratePressableProps ({
   props,
   style,
@@ -226,7 +313,8 @@ function useDecoratePressableProps ({
   isPressable,
   disabled,
   accessibilityRole,
-  feedback
+  feedback,
+  webNativeButton
 }: {
   props: Record<string, any>
   style: StyleProp<ViewStyle>
@@ -237,12 +325,15 @@ function useDecoratePressableProps ({
   disabled?: boolean
   accessibilityRole?: AccessibilityRole
   feedback?: boolean
+  webNativeButton?: boolean
 }): {
     props: Record<string, any>
     pressableStyle?: StyleProp<ViewStyle>
     accessibilityRole?: AccessibilityRole
+    deferredRole?: AccessibilityRole | string
   } {
   let pressableStyle: StyleProp<ViewStyle> = {}
+  let deferredRole: AccessibilityRole | string | undefined
   const [hover, setHover] = useState(false)
   const [active, setActive] = useState(false)
 
@@ -259,9 +350,18 @@ function useDecoratePressableProps ({
   // decorate the element state (hover, active) only if it's pressable
   if (!isPressable) return { props }
 
-  accessibilityRole ??= 'button'
+  const resolvedRole = props.role ?? accessibilityRole ?? 'button'
+  accessibilityRole ??= typeof resolvedRole === 'string' ? resolvedRole as AccessibilityRole : undefined
   props.focusable ??= true
 
+  if (isWeb && resolvedRole === 'button' && !webNativeButton) {
+    delete props.role
+    accessibilityRole = undefined
+    deferredRole = 'button'
+  } else {
+    props.role ??= accessibilityRole
+  }
+
   // setup hover and active states styles and props
   if (feedback) {
     const { onPressIn, onPressOut } = props
@@ -306,7 +406,7 @@ function useDecoratePressableProps ({
     }
   }
 
-  return { props, pressableStyle, accessibilityRole }
+  return { props, pressableStyle, accessibilityRole, deferredRole }
 }
 
 function getDefaultStyle (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/div",
-  "version": "0.1.22",
+  "version": "0.2.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -12,9 +12,9 @@
     "./useTooltip": "./useTooltip.tsx"
   },
   "dependencies": {
-    "@startupjs-ui/abstract-popover": "^0.1.22",
-    "@startupjs-ui/core": "^0.1.22",
-    "@startupjs-ui/span": "^0.1.22"
+    "@startupjs-ui/abstract-popover": "^0.2.0-alpha.1",
+    "@startupjs-ui/core": "^0.2.0-alpha.1",
+    "@startupjs-ui/span": "^0.2.0-alpha.1"
   },
   "peerDependencies": {
     "react": "*",
@@ -22,5 +22,5 @@
     "react-native-reanimated": ">=4.0.0",
     "startupjs": "*"
   },
-  "gitHead": "3bd18c16f0f203ee3d940bf2e09381edc0034665"
+  "gitHead": "b48004779559b16c96a2a1995dab13b998eafce9"
 }