@startupjs-ui/select 0.1.22 → 0.2.0-alpha.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.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/select

package/Wrapper/helpers.ts

@@ -3,23 +3,24 @@ export type SelectOption =
   | number
   | { value?: any, label?: string | number }
 
-// TODO: create logic for objects with circular structure like jsx components
-
-// Stringify values to omit bugs in Android/iOS Picker implementation
-
 // Force undefined to be a special value to
 // workaround the undefined value bug in Picker
-export const PICKER_NULL = '-\u00A0\u00A0\u00A0\u00A0\u00A0'
+export const PICKER_NULL = 'empty'
 export const NULL_OPTION: undefined = undefined
 
-export function stringifyValue (option: any): string | undefined {
+export interface SelectOptionEntry {
+  key: string
+  value: any
+  label: string
+}
+
+function getOptionValue (option: any): any {
+  return option?.value ?? option
+}
+
+function stringifyComparableValue (option: any): string | undefined {
   try {
-    let value: any
-    if (option?.value != null) {
-      value = option.value
-    } else {
-      value = option
-    }
+    const value = getOptionValue(option)
     if (value == null) return PICKER_NULL
     return JSON.stringify(value)
   } catch (error) {
@@ -27,16 +28,58 @@ export function stringifyValue (option: any): string | undefined {
   }
 }
 
-export function parseValue (value: any): any {
-  try {
-    if (value === PICKER_NULL || value == null) {
-      return undefined
-    } else {
-      return JSON.parse(value)
-    }
-  } catch (error) {
-    console.warn('[@startupjs/ui] Select: ' + String(error))
+export function areValuesEqual (a: any, b: any): boolean {
+  return stringifyComparableValue(a) === stringifyComparableValue(b)
+}
+
+function getOptionKey (index: number): string {
+  return `opt:${index}`
+}
+
+export function getOptionEntries (
+  options: SelectOption[],
+  showEmptyValue?: boolean,
+  emptyValueLabel?: string | number
+): SelectOptionEntry[] {
+  const entries: SelectOptionEntry[] = []
+
+  if (showEmptyValue) {
+    entries.push({
+      key: PICKER_NULL,
+      value: undefined,
+      label: getLabel(emptyValueLabel ?? NULL_OPTION)
+    })
   }
+
+  options.forEach((option, index) => {
+    entries.push({
+      key: getOptionKey(index),
+      value: getOptionValue(option),
+      label: getLabel(option)
+    })
+  })
+
+  return entries
+}
+
+export function getOptionKeyFromValue (
+  value: any,
+  options: SelectOption[],
+  showEmptyValue?: boolean,
+  emptyValueLabel?: string | number
+): string | undefined {
+  const entries = getOptionEntries(options, showEmptyValue, emptyValueLabel)
+  return entries.find(entry => areValuesEqual(entry.value, value))?.key
+}
+
+export function getValueFromKey (
+  key: string,
+  options: SelectOption[],
+  showEmptyValue?: boolean,
+  emptyValueLabel?: string | number
+): any {
+  const entries = getOptionEntries(options, showEmptyValue, emptyValueLabel)
+  return entries.find(entry => entry.key === key)?.value
 }
 
 export function getLabel (option: any): string {
@@ -56,7 +99,7 @@ export function getLabelFromValue (
   emptyValueLabel: any = NULL_OPTION
 ): string {
   for (const option of options) {
-    if (stringifyValue(value) === stringifyValue(option)) {
+    if (areValuesEqual(value, option)) {
       return getLabel(option)
     }
   }

package/Wrapper/index.tsx

@@ -6,10 +6,10 @@ import { themed } from '@startupjs-ui/core'
 import Div from '@startupjs-ui/div'
 import Span from '@startupjs-ui/span'
 import {
-  stringifyValue,
-  getLabel,
-  parseValue,
-  NULL_OPTION,
+  getOptionEntries,
+  getOptionKeyFromValue,
+  getValueFromKey,
+  PICKER_NULL,
   type SelectOption
 } from './helpers'
 import STYLES from './index.cssx.styl'
@@ -31,6 +31,22 @@ export interface SelectWrapperProps {
   emptyValueLabel?: string | number
   /** Test identifier */
   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 */
+  'aria-labelledby'?: string
+  /** Web-only described-by relationship */
+  'aria-describedby'?: string
+  /** Web-only error message relationship */
+  'aria-errormessage'?: string
+  /** Web-only invalid state */
+  'aria-invalid'?: boolean
   /** Fired when selected value changes */
   onChange?: (value: any) => void
 }
@@ -50,11 +66,21 @@ function SelectWrapperWeb ({
   showEmptyValue,
   emptyValueLabel,
   testID,
+  'aria-label': ariaLabel,
+  accessibilityLabel,
+  accessibilityHint,
+  id,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+  'aria-errormessage': ariaErrorMessage,
+  'aria-invalid': ariaInvalid,
   onChange
 }: SelectWrapperProps): ReactNode {
+  const optionEntries = getOptionEntries(options, showEmptyValue, emptyValueLabel)
+  const selectedKey = getOptionKeyFromValue(value, options, showEmptyValue, emptyValueLabel) ?? PICKER_NULL
+
   function onSelectChange (event: any) {
-    const value = event.target.value
-    if (onChange) onChange(parseValue(value))
+    if (onChange) onChange(getValueFromKey(event.target.value, options, showEmptyValue, emptyValueLabel))
   }
 
   return pug`
@@ -62,16 +88,19 @@ function SelectWrapperWeb ({
       = children
       if !disabled
         select(
+          id=id
           style=STYLES.overlay
-          value=stringifyValue(value)
+          value=selectedKey
           onChange=onSelectChange
+          aria-label=ariaLabel ?? accessibilityLabel
+          aria-labelledby=ariaLabelledBy
+          aria-describedby=ariaDescribedBy
+          aria-errormessage=ariaErrorMessage
+          aria-invalid=ariaInvalid
         )
-          if showEmptyValue
-            option(key=-1 value=stringifyValue(NULL_OPTION))
-              = emptyValueLabel || getLabel(NULL_OPTION)
-          each item, index in options
-            option(key=index value=stringifyValue(item))
-              = getLabel(item)
+          each entry in optionEntries
+            option(key=entry.key value=entry.key)
+              = entry.label
   `
 }
 
@@ -85,8 +114,11 @@ function SelectWrapperAndroid ({
   emptyValueLabel,
   onChange
 }: SelectWrapperProps): ReactNode {
+  const optionEntries = getOptionEntries(options, showEmptyValue, emptyValueLabel)
+  const selectedKey = getOptionKeyFromValue(value, options, showEmptyValue, emptyValueLabel) ?? PICKER_NULL
+
   function onValueChange (value: any) {
-    if (onChange) onChange(parseValue(value))
+    if (onChange) onChange(getValueFromKey(value, options, showEmptyValue, emptyValueLabel))
   }
 
   return pug`
@@ -94,20 +126,14 @@ function SelectWrapperAndroid ({
       = children
       if !disabled
         Picker.overlay(
-          selectedValue=stringifyValue(value)
+          selectedValue=selectedKey
           onValueChange=onValueChange
         )
-          if showEmptyValue
-            Picker.Item(
-              key=-1
-              value=stringifyValue(NULL_OPTION)
-              label=emptyValueLabel || getLabel(NULL_OPTION)
-            )
-          each item, index in options
+          each entry in optionEntries
             Picker.Item(
-              key=index
-              value=stringifyValue(item)
-              label=getLabel(item)
+              key=entry.key
+              value=entry.key
+              label=entry.label
             )
   `
 }
@@ -123,9 +149,11 @@ function SelectWrapperIOS ({
   onChange
 }: SelectWrapperProps): ReactNode {
   const [showModal, setShowModal] = useState(false)
+  const optionEntries = getOptionEntries(options, showEmptyValue, emptyValueLabel)
+  const selectedKey = getOptionKeyFromValue(value, options, showEmptyValue, emptyValueLabel) ?? PICKER_NULL
 
   function onValueChange (value: any) {
-    if (onChange) onChange(parseValue(value))
+    if (onChange) onChange(getValueFromKey(value, options, showEmptyValue, emptyValueLabel))
   }
 
   return pug`
@@ -150,20 +178,14 @@ function SelectWrapperIOS ({
               Span.done Done
           Div.modalBottom
             Picker(
-              selectedValue=stringifyValue(value)
+              selectedValue=selectedKey
               onValueChange=onValueChange
             )
-              if showEmptyValue
-                Picker.Item(
-                  key=-1
-                  value=stringifyValue(NULL_OPTION)
-                  label=emptyValueLabel || getLabel(NULL_OPTION)
-                )
-              each item, index in options
+              each entry in optionEntries
                 Picker.Item(
-                  key=index
-                  value=stringifyValue(item)
-                  label=getLabel(item)
+                  key=entry.key
+                  value=entry.key
+                  label=entry.label
                 )
   `
 }

package/index.d.ts

@@ -20,6 +20,24 @@ export interface SelectProps extends Omit<UITextInputProps, 'value' | 'onChangeT
     ref?: RefObject<any>;
     /** Test identifier passed to wrapper */
     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 */
+    'aria-describedby'?: string;
+    /** Web-only error message relationship */
+    'aria-errormessage'?: string;
+    /** Web-only invalid state */
+    'aria-invalid'?: boolean;
     /** Fired when selected value changes */
     onChange?: (value: any) => void;
 }

package/index.tsx

@@ -22,6 +22,24 @@ export interface SelectProps extends Omit<UITextInputProps, 'value' | 'onChangeT
   ref?: RefObject<any>
   /** Test identifier passed to wrapper */
   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 */
+  'aria-describedby'?: string
+  /** Web-only error message relationship */
+  'aria-errormessage'?: string
+  /** Web-only invalid state */
+  'aria-invalid'?: boolean
   /** Fired when selected value changes */
   onChange?: (value: any) => void
 }
@@ -33,6 +51,15 @@ function Select ({
   showEmptyValue = true,
   emptyValueLabel,
   testID,
+  'aria-label': ariaLabel,
+  accessibilityLabel,
+  accessibilityHint,
+  id,
+  nativeID,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+  'aria-errormessage': ariaErrorMessage,
+  'aria-invalid': ariaInvalid,
   onChange,
   ref,
   ...props
@@ -51,6 +78,12 @@ function Select ({
         showEmptyValue=showEmptyValue
         emptyValueLabel=emptyValueLabel
         testID=testID
+        aria-label=ariaLabel ?? accessibilityLabel
+        id=id || nativeID
+        aria-labelledby=ariaLabelledBy
+        aria-describedby=ariaDescribedBy
+        aria-errormessage=ariaErrorMessage
+        aria-invalid=ariaInvalid
       )= children
     `
   }

package/package.json

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