@startupjs-ui/input 0.2.3 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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.3](https://github.com/startupjs/startupjs-ui/compare/v0.2.2...v0.2.3) (2026-05-15)
 
 **Note:** Version bump only for package @startupjs-ui/input

package/README.mdx

@@ -32,7 +32,7 @@ Layout behavior follows these rules:
 
 **Additional props**
 
-The component supports `disabled` to prevent interaction, `readonly` for a non-editable display, `required` to mark the field as required, and `placeholder` for placeholder text. For select-like inputs, use `options` or `enum`; for array inputs, use `items`; and for object inputs, use `properties`. The `configuration` prop allows overriding the wrapper configuration. Use `testId` for testing and `ref` for imperative access to the underlying input.
+The component supports `disabled` to prevent interaction, `readonly` for a non-editable display, `required` to mark the field as required, and `placeholder` for placeholder text. For select-like inputs, use `options` or `enum`; for array inputs, use `items`; and for object inputs, use `properties`. The `configuration` prop allows overriding the wrapper configuration. Use `testID` for testing and `ref` for imperative access to the underlying input.
 
 Change handlers vary by input type: `onChange` (checkbox, select, range, etc.), `onChangeText` (text), `onChangeNumber` (number), `onChangeDate` (date/time), and `onChangeColor` (color). Focus and blur events are available via `onFocus` and `onBlur`.
 

package/helpers/getInputTestId.ts

@@ -1,10 +1,10 @@
 export default function getInputTestId (props: {
-  testId?: string
+  testID?: string
   label?: unknown
   description?: unknown
   placeholder?: unknown
 } & Record<string, any>): string | undefined {
-  if (props.testId) return props.testId
+  if (props.testID) return props.testID
 
   const inputName =
     (typeof props.label === 'string' && props.label !== '' ? props.label : null) ??

package/index.d.ts

@@ -29,8 +29,8 @@ export interface InputProps {
     disabled?: boolean;
     /** Render as read-only */
     readonly?: boolean;
-    /** Test id for generated testID */
-    testId?: string;
+    /** Test identifier */
+    testID?: string;
     /** Placeholder text */
     placeholder?: string;
     /** Options for select-like inputs */

package/index.tsx

@@ -32,8 +32,8 @@ export interface InputProps {
   disabled?: boolean
   /** Render as read-only */
   readonly?: boolean
-  /** Test id for generated testID */
-  testId?: string
+  /** Test identifier */
+  testID?: string
   /** Placeholder text */
   placeholder?: string
   /** Options for select-like inputs */

package/inputs.ts

@@ -1,6 +1,7 @@
 import { type ReactNode, type RefObject } from 'react'
 import { type StyleProp, type ViewStyle } from 'react-native'
 import { pug, useBind } from 'startupjs'
+import { type UIRole } from '@startupjs-ui/core'
 import ArrayInput from '@startupjs-ui/array-input'
 import Card from '@startupjs-ui/card'
 import Checkbox from '@startupjs-ui/checkbox'
@@ -20,6 +21,21 @@ import wrapInput, { isWrapped } from './wrapInput'
 import useCustomInputs from './useCustomInputs'
 import { customInputs } from './globalCustomInputs'
 
+type CardWrapperProps = {
+  style?: StyleProp<ViewStyle>
+  testID?: string
+  id?: string
+  role?: UIRole
+  'aria-label'?: string
+  'aria-labelledby'?: string
+  'aria-describedby'?: string
+  'aria-errormessage'?: string
+  'aria-invalid'?: boolean
+  'aria-required'?: boolean
+  'aria-disabled'?: boolean
+  'aria-readonly'?: boolean
+}
+
 export type InputUseProps = (
   props: Record<string, any>,
   ref?: RefObject<any>
@@ -85,7 +101,10 @@ const useDateProps = ({
   return {
     mode: 'date',
     date: value,
-    configuration: getLabelableConfiguration(props),
+    configuration: {
+      isLabelClickable: !props.disabled && !props.readonly,
+      _webLabelMode: 'aria' as const
+    },
     onChangeDate,
     _onLabelPress: () => ref?.current?.focus(),
     ...props
@@ -103,7 +122,10 @@ const useDateTimeProps = ({
   return {
     mode: 'datetime',
     date: value,
-    configuration: getLabelableConfiguration(props),
+    configuration: {
+      isLabelClickable: !props.disabled && !props.readonly,
+      _webLabelMode: 'aria' as const
+    },
     onChangeDate,
     _onLabelPress: () => ref?.current?.focus(),
     ...props
@@ -121,7 +143,10 @@ const useTimeProps = ({
   return {
     mode: 'time',
     date: value,
-    configuration: getLabelableConfiguration(props),
+    configuration: {
+      isLabelClickable: !props.disabled && !props.readonly,
+      _webLabelMode: 'aria' as const
+    },
     onChangeDate,
     _onLabelPress: () => ref?.current?.focus(),
     ...props
@@ -259,10 +284,34 @@ const useTextProps = ({
   }
 }
 
-function cardWrapper (style: StyleProp<ViewStyle> | undefined, children: ReactNode): ReactNode {
+function cardWrapper ({
+  style,
+  testID,
+  id,
+  role,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+  'aria-errormessage': ariaErrorMessage,
+  'aria-invalid': ariaInvalid,
+  'aria-required': ariaRequired,
+  'aria-disabled': ariaDisabled,
+  'aria-readonly': ariaReadonly
+}: CardWrapperProps, children: ReactNode): ReactNode {
   return pug`
     Card(
       style=style
+      testID=testID
+      id=id
+      role=role
+      aria-label=ariaLabel
+      aria-labelledby=ariaLabelledBy
+      aria-describedby=ariaDescribedBy
+      aria-errormessage=ariaErrorMessage
+      aria-invalid=ariaInvalid
+      aria-required=ariaRequired
+      aria-disabled=ariaDisabled
+      aria-readonly=ariaReadonly
       variant='outlined'
     )
       = children

package/package.json

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

package/wrapInput.tsx

@@ -117,8 +117,7 @@ export default function wrapInput (Component: any, configuration: InputWrapperCo
     const generatedTestID = props.testID ?? getInputTestId({
       ...props,
       label,
-      description,
-      testId: props.testID
+      description
     })
     const semanticBaseId = typeof generatedTestID === 'string' && generatedTestID !== ''
       ? generatedTestID
@@ -139,7 +138,7 @@ export default function wrapInput (Component: any, configuration: InputWrapperCo
     ]
     const requiredAsterisk = required === true
       ? pug`
-        Text.required(aria-hidden=IS_WEB ? true : undefined)= ' *'
+        Text.required(aria-hidden)= ' *'
       `
       : null
     const WebLabelElement = 'label'
@@ -190,13 +189,11 @@ export default function wrapInput (Component: any, configuration: InputWrapperCo
     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 (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