@startupjs-ui/select 0.2.0-alpha.2 → 0.3.0

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.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.0](https://github.com/startupjs/startupjs-ui/compare/v0.1.23...v0.2.0) (2026-05-04)
+
+
+### Features
+
+* [v0.2] add accessibility features to most components, which also dramatically improves E2E testability ([#22](https://github.com/startupjs/startupjs-ui/issues/22)) ([b563e2f](https://github.com/startupjs/startupjs-ui/commit/b563e2fa498a8a83bd5abc7836d120f6d2381e3f))
+
+
+
+
+
 # [0.2.0-alpha.2](https://github.com/startupjs/startupjs-ui/compare/v0.2.0-alpha.1...v0.2.0-alpha.2) (2026-04-20)
 
 **Note:** Version bump only for package @startupjs-ui/select

package/Wrapper/index.tsx

@@ -29,14 +29,10 @@ export interface SelectWrapperProps {
   showEmptyValue?: boolean
   /** Label for empty/none option */
   emptyValueLabel?: string | number
-  /** Test identifier */
+  /** Test identifier passed to wrapper root */
   testID?: string
   /** Cross-platform accessible name */
   'aria-label'?: string
-  /** Accessible label for the web select overlay */
-  accessibilityLabel?: string
-  /** Accessible hint for the web select overlay */
-  accessibilityHint?: string
   /** Web-only control id for label association */
   id?: string
   /** Web-only labelled-by relationship */
@@ -47,6 +43,8 @@ export interface SelectWrapperProps {
   'aria-errormessage'?: string
   /** Web-only invalid state */
   'aria-invalid'?: boolean
+  /** Web-only required state */
+  'aria-required'?: boolean
   /** Fired when selected value changes */
   onChange?: (value: any) => void
 }
@@ -67,18 +65,16 @@ function SelectWrapperWeb ({
   emptyValueLabel,
   testID,
   'aria-label': ariaLabel,
-  accessibilityLabel,
-  accessibilityHint,
   id,
   'aria-labelledby': ariaLabelledBy,
   'aria-describedby': ariaDescribedBy,
   'aria-errormessage': ariaErrorMessage,
   'aria-invalid': ariaInvalid,
+  'aria-required': ariaRequired,
   onChange
 }: SelectWrapperProps): ReactNode {
   const optionEntries = getOptionEntries(options, showEmptyValue, emptyValueLabel)
   const selectedKey = getOptionKeyFromValue(value, options, showEmptyValue, emptyValueLabel) ?? PICKER_NULL
-
   function onSelectChange (event: any) {
     if (onChange) onChange(getValueFromKey(event.target.value, options, showEmptyValue, emptyValueLabel))
   }
@@ -86,21 +82,28 @@ function SelectWrapperWeb ({
   return pug`
     Div.root(style=style testID=testID)
       = children
-      if !disabled
-        select(
-          id=id
-          style=STYLES.overlay
-          value=selectedKey
-          onChange=onSelectChange
-          aria-label=ariaLabel ?? accessibilityLabel
-          aria-labelledby=ariaLabelledBy
-          aria-describedby=ariaDescribedBy
-          aria-errormessage=ariaErrorMessage
-          aria-invalid=ariaInvalid
-        )
-          each entry in optionEntries
-            option(key=entry.key value=entry.key)
-              = entry.label
+      select(
+        id=id
+        style=STYLES.overlay
+        value=selectedKey
+        disabled=disabled
+        onChange=onSelectChange
+        role='combobox'
+        aria-haspopup='listbox'
+        aria-label=ariaLabel
+        aria-labelledby=ariaLabelledBy
+        aria-describedby=ariaDescribedBy
+        aria-errormessage=ariaErrorMessage
+        aria-invalid=ariaInvalid
+        aria-required=ariaRequired
+      )
+        each entry in optionEntries
+          option(
+            key=entry.key
+            value=entry.key
+            aria-selected=entry.key === selectedKey
+          )
+            = entry.label
   `
 }
 

package/index.d.ts

@@ -22,14 +22,8 @@ export interface SelectProps extends Omit<UITextInputProps, 'value' | 'onChangeT
     testID?: string;
     /** Cross-platform accessible name */
     'aria-label'?: string;
-    /** Accessible label forwarded to the web select overlay */
-    accessibilityLabel?: string;
-    /** Accessible hint forwarded to the web select overlay */
-    accessibilityHint?: string;
     /** Web-only control id forwarded to the native select overlay */
     id?: string;
-    /** Native id alias forwarded to the native select overlay */
-    nativeID?: string;
     /** Web-only labelled-by relationship */
     'aria-labelledby'?: string;
     /** Web-only described-by relationship */
@@ -38,6 +32,8 @@ export interface SelectProps extends Omit<UITextInputProps, 'value' | 'onChangeT
     'aria-errormessage'?: string;
     /** Web-only invalid state */
     'aria-invalid'?: boolean;
+    /** Web-only required state */
+    'aria-required'?: boolean;
     /** Fired when selected value changes */
     onChange?: (value: any) => void;
 }

package/index.tsx

@@ -24,14 +24,8 @@ export interface SelectProps extends Omit<UITextInputProps, 'value' | 'onChangeT
   testID?: string
   /** Cross-platform accessible name */
   'aria-label'?: string
-  /** Accessible label forwarded to the web select overlay */
-  accessibilityLabel?: string
-  /** Accessible hint forwarded to the web select overlay */
-  accessibilityHint?: string
   /** Web-only control id forwarded to the native select overlay */
   id?: string
-  /** Native id alias forwarded to the native select overlay */
-  nativeID?: string
   /** Web-only labelled-by relationship */
   'aria-labelledby'?: string
   /** Web-only described-by relationship */
@@ -40,6 +34,8 @@ export interface SelectProps extends Omit<UITextInputProps, 'value' | 'onChangeT
   'aria-errormessage'?: string
   /** Web-only invalid state */
   'aria-invalid'?: boolean
+  /** Web-only required state */
+  'aria-required'?: boolean
   /** Fired when selected value changes */
   onChange?: (value: any) => void
 }
@@ -52,14 +48,12 @@ function Select ({
   emptyValueLabel,
   testID,
   'aria-label': ariaLabel,
-  accessibilityLabel,
-  accessibilityHint,
   id,
-  nativeID,
   'aria-labelledby': ariaLabelledBy,
   'aria-describedby': ariaDescribedBy,
   'aria-errormessage': ariaErrorMessage,
   'aria-invalid': ariaInvalid,
+  'aria-required': ariaRequired,
   onChange,
   ref,
   ...props
@@ -78,12 +72,13 @@ function Select ({
         showEmptyValue=showEmptyValue
         emptyValueLabel=emptyValueLabel
         testID=testID
-        aria-label=ariaLabel ?? accessibilityLabel
-        id=id || nativeID
+        aria-label=ariaLabel
+        id=id
         aria-labelledby=ariaLabelledBy
         aria-describedby=ariaDescribedBy
         aria-errormessage=ariaErrorMessage
         aria-invalid=ariaInvalid
+        aria-required=ariaRequired
       )= children
     `
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/select",
-  "version": "0.2.0-alpha.2",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -9,15 +9,15 @@
   "type": "module",
   "dependencies": {
     "@react-native-picker/picker": "^2.11.1",
-    "@startupjs-ui/core": "^0.2.0-alpha.1",
-    "@startupjs-ui/div": "^0.2.0-alpha.1",
-    "@startupjs-ui/span": "^0.2.0-alpha.1",
-    "@startupjs-ui/text-input": "^0.2.0-alpha.1"
+    "@startupjs-ui/core": "^0.3.0",
+    "@startupjs-ui/div": "^0.3.0",
+    "@startupjs-ui/span": "^0.3.0",
+    "@startupjs-ui/text-input": "^0.3.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "8a6ae7871e4c82f3e24d5911a9df42338e057e7a"
+  "gitHead": "8d212b47680af1dfe582f9759b38724b46488e25"
 }