@startupjs-ui/input 0.1.23 → 0.2.0-alpha.0

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.1.23](https://github.com/startupjs/startupjs-ui/compare/v0.1.22...v0.1.23) (2026-03-27)
+# [0.2.0-alpha.0](https://github.com/startupjs/startupjs-ui/compare/v0.1.22...v0.2.0-alpha.0) (2026-03-27)
 
-**Note:** Version bump only for package @startupjs-ui/input
+
+### 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))
 
 
 

package/inputs.ts

@@ -34,6 +34,13 @@ function useBoundProps<T extends Record<string, any>> (props: T): T {
   return useBind(props) as T
 }
 
+function getLabelableConfiguration (props: Record<string, any>) {
+  return {
+    isLabelClickable: !props.disabled && !props.readonly,
+    _webLabelMode: 'native' as const
+  }
+}
+
 const useArrayProps = (props: Record<string, any>): Record<string, any> => {
   return props
 }
@@ -78,7 +85,7 @@ const useDateProps = ({
   return {
     mode: 'date',
     date: value,
-    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    configuration: getLabelableConfiguration(props),
     onChangeDate,
     _onLabelPress: () => ref?.current?.focus(),
     ...props
@@ -96,7 +103,7 @@ const useDateTimeProps = ({
   return {
     mode: 'datetime',
     date: value,
-    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    configuration: getLabelableConfiguration(props),
     onChangeDate,
     _onLabelPress: () => ref?.current?.focus(),
     ...props
@@ -114,7 +121,7 @@ const useTimeProps = ({
   return {
     mode: 'time',
     date: value,
-    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    configuration: getLabelableConfiguration(props),
     onChangeDate,
     _onLabelPress: () => ref?.current?.focus(),
     ...props
@@ -148,7 +155,7 @@ const useNumberProps = ({
 
   return {
     value,
-    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    configuration: getLabelableConfiguration(props),
     onChangeNumber,
     _onLabelPress: () => ref?.current?.focus(),
     ...props
@@ -169,7 +176,7 @@ const usePasswordProps = ({
 
   return {
     value,
-    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    configuration: getLabelableConfiguration(props),
     onChangeText,
     _onLabelPress: () => ref?.current?.focus(),
     ...props
@@ -215,7 +222,14 @@ const useRangeProps = ({ value, $value, onChange, ...props }: Record<string, any
   }
 }
 
-const useSelectProps = ({ value, $value, enum: _enum, options, onChange, ...props }: Record<string, any>): Record<string, any> => {
+const useSelectProps = ({
+  value,
+  $value,
+  enum: _enum,
+  options,
+  onChange,
+  ...props
+}: Record<string, any>, ref?: RefObject<any>): Record<string, any> => {
   ;({ value, onChange } = useBoundProps({ value, $value, onChange }))
   // if json-schema `enum` is passed, use it as options
   if (!options && _enum) options = _enum
@@ -223,6 +237,8 @@ const useSelectProps = ({ value, $value, enum: _enum, options, onChange, ...prop
     value,
     onChange,
     options,
+    configuration: getLabelableConfiguration(props),
+    _onLabelPress: () => ref?.current?.focus?.(),
     ...props
   }
 }
@@ -236,7 +252,7 @@ const useTextProps = ({
   ;({ value, onChangeText } = useBoundProps({ value, $value, onChangeText }))
   return {
     value,
-    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    configuration: getLabelableConfiguration(props),
     onChangeText,
     _onLabelPress: () => ref?.current?.focus(),
     ...props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/input",
-  "version": "0.1.23",
+  "version": "0.2.0-alpha.0",
   "publishConfig": {
     "access": "public"
   },
@@ -13,25 +13,25 @@
   },
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
-    "@startupjs-ui/array-input": "^0.1.23",
-    "@startupjs-ui/card": "^0.1.22",
-    "@startupjs-ui/checkbox": "^0.1.23",
-    "@startupjs-ui/color-picker": "^0.1.22",
-    "@startupjs-ui/core": "^0.1.22",
-    "@startupjs-ui/date-time-picker": "^0.1.22",
-    "@startupjs-ui/div": "^0.1.22",
-    "@startupjs-ui/file-input": "^0.1.22",
-    "@startupjs-ui/icon": "^0.1.22",
-    "@startupjs-ui/multi-select": "^0.1.22",
-    "@startupjs-ui/number-input": "^0.1.22",
-    "@startupjs-ui/object-input": "^0.1.23",
-    "@startupjs-ui/password-input": "^0.1.22",
-    "@startupjs-ui/radio": "^0.1.22",
-    "@startupjs-ui/range-input": "^0.1.22",
-    "@startupjs-ui/rank": "^0.1.22",
-    "@startupjs-ui/select": "^0.1.22",
-    "@startupjs-ui/span": "^0.1.22",
-    "@startupjs-ui/text-input": "^0.1.22",
+    "@startupjs-ui/array-input": "^0.2.0-alpha.0",
+    "@startupjs-ui/card": "^0.2.0-alpha.0",
+    "@startupjs-ui/checkbox": "^0.2.0-alpha.0",
+    "@startupjs-ui/color-picker": "^0.2.0-alpha.0",
+    "@startupjs-ui/core": "^0.2.0-alpha.0",
+    "@startupjs-ui/date-time-picker": "^0.2.0-alpha.0",
+    "@startupjs-ui/div": "^0.2.0-alpha.0",
+    "@startupjs-ui/file-input": "^0.2.0-alpha.0",
+    "@startupjs-ui/icon": "^0.2.0-alpha.0",
+    "@startupjs-ui/multi-select": "^0.2.0-alpha.0",
+    "@startupjs-ui/number-input": "^0.2.0-alpha.0",
+    "@startupjs-ui/object-input": "^0.2.0-alpha.0",
+    "@startupjs-ui/password-input": "^0.2.0-alpha.0",
+    "@startupjs-ui/radio": "^0.2.0-alpha.0",
+    "@startupjs-ui/range-input": "^0.2.0-alpha.0",
+    "@startupjs-ui/rank": "^0.2.0-alpha.0",
+    "@startupjs-ui/select": "^0.2.0-alpha.0",
+    "@startupjs-ui/span": "^0.2.0-alpha.0",
+    "@startupjs-ui/text-input": "^0.2.0-alpha.0",
     "lodash": "^4.17.20"
   },
   "peerDependencies": {
@@ -39,5 +39,5 @@
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "37e37c298a2467d18d1de1931f9e7942f06e7665"
+  "gitHead": "a428246a18d0e7f77809043c8240253240d11d66"
 }

package/wrapInput.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, type ReactNode, type RefObject } from 'react'
-import { Text } from 'react-native'
+import { Platform, Text } from 'react-native'
 import { pug, styl, observer } from 'startupjs'
 import { themed } from '@startupjs-ui/core'
 import Div from '@startupjs-ui/div'
@@ -7,9 +7,11 @@ import Icon from '@startupjs-ui/icon'
 import Span from '@startupjs-ui/span'
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
 import merge from 'lodash/merge'
+import getInputTestId from './helpers/getInputTestId'
 import useLayout from './useLayout'
 
 export const IS_WRAPPED = Symbol('wrapped into wrapInput()')
+const IS_WEB = Platform.OS === 'web'
 
 export type InputLayout = 'pure' | 'rows' | 'columns'
 
@@ -25,6 +27,7 @@ export interface InputWrapperConfiguration extends InputWrapperLayoutConfigurati
   columns?: InputWrapperLayoutConfiguration
   isLabelColoredWhenFocusing?: boolean
   isLabelClickable?: boolean
+  _webLabelMode?: 'aria' | 'native'
 }
 
 export interface InputWrapperProps {
@@ -49,7 +52,7 @@ export function isWrapped (Component: any): boolean {
 }
 
 export default function wrapInput (Component: any, configuration: InputWrapperConfiguration = {}): any {
-  configuration = merge(
+  const defaultConfiguration = merge(
     {
       rows: {
         labelPosition: 'top',
@@ -80,15 +83,16 @@ export default function wrapInput (Component: any, configuration: InputWrapperCo
       description
     })
 
-    configuration = merge(configuration, componentConfiguration)
-    configuration = merge(configuration, configuration[currentLayout])
+    const mergedConfiguration = merge({}, defaultConfiguration, componentConfiguration)
+    const resolvedConfiguration = merge({}, mergedConfiguration, mergedConfiguration[currentLayout])
 
     const {
       labelPosition,
       descriptionPosition,
       isLabelColoredWhenFocusing,
-      isLabelClickable
-    } = configuration
+      isLabelClickable,
+      _webLabelMode = 'aria'
+    } = resolvedConfiguration
 
     const [focused, setFocused] = useState(false)
     const isReadOnlyOrDisabled = [props.readonly, props.disabled].some(Boolean)
@@ -110,32 +114,67 @@ export default function wrapInput (Component: any, configuration: InputWrapperCo
     }, [focused, isLabelColoredWhenFocusing, isReadOnlyOrDisabled])
 
     const hasError = Array.isArray(error) ? error.length > 0 : !!error
-
-    const _label = pug`
-      if label
-        Span.label(
-          key='label'
-          part='label'
-          styleName=[
-            currentLayout,
-            currentLayout + '-' + labelPosition,
-            {
-              focused: isLabelColoredWhenFocusing ? focused : false,
-              error: hasError
-            }
-          ]
-          onPress=isLabelClickable
-            ? _onLabelPress
-            : undefined
-        )
-          = label
-          if required === true
-            Text.required= ' *'
-    `
+    const generatedTestID = props.testID ?? getInputTestId({
+      ...props,
+      label,
+      description,
+      testId: props.testID
+    })
+    const semanticBaseId = typeof generatedTestID === 'string' && generatedTestID !== ''
+      ? generatedTestID
+      : undefined
+    const inputId = semanticBaseId ? `${semanticBaseId}-input` : undefined
+    const labelId = label && semanticBaseId ? `${semanticBaseId}-label` : undefined
+    const descriptionId = description && semanticBaseId ? `${semanticBaseId}-description` : undefined
+    const errorId = hasError && semanticBaseId ? `${semanticBaseId}-error` : undefined
+    const useNativeWebLabel = IS_WEB && _webLabelMode === 'native' && !!inputId
+
+    const labelStyleName = [
+      currentLayout,
+      currentLayout + '-' + labelPosition,
+      {
+        focused: isLabelColoredWhenFocusing ? focused : false,
+        error: hasError
+      }
+    ]
+    const requiredAsterisk = required === true
+      ? pug`
+        Text.required(aria-hidden=IS_WEB ? true : undefined)= ' *'
+      `
+      : null
+    const WebLabelElement = 'label'
+    const _label = label
+      ? useNativeWebLabel
+        ? pug`
+          WebLabelElement.label(
+            key='label'
+            id=labelId
+            htmlFor=inputId
+            part='label'
+            styleName=labelStyleName
+          )
+            = label
+            = requiredAsterisk
+        `
+        : pug`
+          Span.label(
+            key='label'
+            id=labelId
+            part='label'
+            styleName=labelStyleName
+            onPress=isLabelClickable
+              ? _onLabelPress
+              : undefined
+          )
+            = label
+            = requiredAsterisk
+        `
+      : null
     const _description = pug`
       if description
         Span.description(
           key='description'
+          id=descriptionId
           part='description'
           styleName=[
             currentLayout,
@@ -147,6 +186,25 @@ export default function wrapInput (Component: any, configuration: InputWrapperCo
     `
 
     const passRef = ref ? { ref } : {}
+    const inputAccessibilityProps: Record<string, any> = {}
+    const describedBy = [descriptionId].filter(Boolean).join(' ') || undefined
+
+    if (props['aria-label'] == null) {
+      if (props.accessibilityLabel != null) inputAccessibilityProps['aria-label'] = props.accessibilityLabel
+      else if (label) inputAccessibilityProps['aria-label'] = label
+    }
+
+    if (inputId) {
+      inputAccessibilityProps.id = inputId
+      inputAccessibilityProps.nativeID = inputId
+    }
+    if (required === true) inputAccessibilityProps['aria-required'] = true
+    if (labelId) inputAccessibilityProps['aria-labelledby'] = labelId
+    if (describedBy) inputAccessibilityProps['aria-describedby'] = describedBy
+    if (hasError && errorId) {
+      inputAccessibilityProps['aria-errormessage'] = errorId
+      inputAccessibilityProps['aria-invalid'] = true
+    }
 
     const input = pug`
       Component(
@@ -156,24 +214,29 @@ export default function wrapInput (Component: any, configuration: InputWrapperCo
         _hasError=hasError
         onFocus=handleFocus
         onBlur=handleBlur
+        ...inputAccessibilityProps
         ...passRef
         ...props
       )
     `
     const err = pug`
       if hasError
-        each _error, index in (Array.isArray(error) ? error : [error])
-          Div.errorContainer(
-            key='error-' + index
-            styleName=[
-              currentLayout,
-              currentLayout + '-' + descriptionPosition,
-            ]
-            vAlign='center'
-            row
-          )
-            Icon.errorContainer-icon(icon=faExclamationCircle)
-            Span.errorContainer-text= _error
+        Div.errorContainer(
+          key='error'
+          id=errorId
+          styleName=[
+            currentLayout,
+            currentLayout + '-' + descriptionPosition,
+          ]
+          vAlign='center'
+          row
+        )
+          Icon.errorContainer-icon(icon=faExclamationCircle)
+          Span.errorContainer-text
+            each _error, index in (Array.isArray(error) ? error : [error])
+              if index
+                Text= ' '
+              = _error
     `
 
     return pug`