@startupjs-ui/auto-suggest 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/auto-suggest

package/index.d.ts

@@ -38,6 +38,14 @@ export interface AutoSuggestProps {
     disabled?: boolean;
     /** Render as non-interactive */
     readonly?: boolean;
+    /** Accessible name for the combobox input */
+    'aria-label'?: string;
+    /** Element id that labels the combobox input */
+    'aria-labelledby'?: string;
+    /** Element id that describes the combobox input */
+    'aria-describedby'?: string;
+    /** Whether the combobox input value is invalid */
+    'aria-invalid'?: boolean;
     /** Change handler for selected value */
     onChange?: (value?: any) => void | Promise<void>;
     /** Called after the list is closed */

package/index.tsx

@@ -10,6 +10,7 @@ import {
 import { pug, observer } from 'startupjs'
 import { themed } from '@startupjs-ui/core'
 import AbstractPopover from '@startupjs-ui/abstract-popover'
+import Div from '@startupjs-ui/div'
 import FlatList from '@startupjs-ui/flat-list'
 import Loader from '@startupjs-ui/loader'
 import Menu from '@startupjs-ui/menu'
@@ -66,6 +67,14 @@ export interface AutoSuggestProps {
   disabled?: boolean
   /** Render as non-interactive */
   readonly?: boolean
+  /** Accessible name for the combobox input */
+  'aria-label'?: string
+  /** Element id that labels the combobox input */
+  'aria-labelledby'?: string
+  /** Element id that describes the combobox input */
+  'aria-describedby'?: string
+  /** Whether the combobox input value is invalid */
+  'aria-invalid'?: boolean
   /** Change handler for selected value */
   onChange?: (value?: any) => void | Promise<void>
   /** Called after the list is closed */
@@ -111,6 +120,10 @@ function AutoSuggest ({
   isLoading = false,
   disabled,
   readonly,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
   onChange,
   onDismiss,
   onChangeText,
@@ -175,13 +188,19 @@ function AutoSuggest ({
       `
     }
 
+    const optionLabel = getOptionLabel(item)
+    const isSelected = stringifyValue(item) === stringifyValue(value)
+
     return pug`
       Menu.Item.item(
         key=index
         styleName={ selectMenu: selectIndexValue === index }
         onPress=() => { _onPress(item) }
-        active=stringifyValue(item) === stringifyValue(value)
-      )= getLabelFromValue(item, options)
+        active=isSelected
+        role='option'
+        aria-selected=isSelected
+        aria-label=optionLabel != null ? String(optionLabel) : undefined
+      )= optionLabel
     `
   }
 
@@ -212,6 +231,8 @@ function AutoSuggest ({
   }
 
   const matchAnchorWidth = !(style as ViewStyle)?.width && !(style as ViewStyle)?.maxWidth
+  const inputAccessibleName = ariaLabel ??
+    (ariaLabelledBy ? undefined : placeholder != null ? String(placeholder) : undefined)
 
   return pug`
     TextInput(
@@ -226,6 +247,13 @@ function AutoSuggest ({
       placeholder=placeholder
       disabled=disabled
       readonly=readonly
+      role='combobox'
+      aria-label=inputAccessibleName
+      aria-labelledby=ariaLabelledBy
+      aria-describedby=ariaDescribedBy
+      aria-invalid=ariaInvalid
+      aria-expanded=isShow
+      aria-haspopup='listbox'
       onChangeText=_onChangeText
       onFocus=() => setIsShow(true)
       onKeyPress=onKeyPress
@@ -247,7 +275,7 @@ function AutoSuggest ({
         View.loaderCase
           Loader(size='s')
       else
-        View.contentCase
+        Div.contentCase(role='listbox')
           FlatList.content(
             style=style
             data=_options

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/auto-suggest",
-  "version": "0.2.0-alpha.2",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -8,17 +8,18 @@
   "types": "index.d.ts",
   "type": "module",
   "dependencies": {
-    "@startupjs-ui/abstract-popover": "^0.2.0-alpha.1",
-    "@startupjs-ui/core": "^0.2.0-alpha.1",
-    "@startupjs-ui/flat-list": "^0.2.0-alpha.1",
-    "@startupjs-ui/loader": "^0.2.0-alpha.1",
-    "@startupjs-ui/menu": "^0.2.0-alpha.2",
-    "@startupjs-ui/text-input": "^0.2.0-alpha.1"
+    "@startupjs-ui/abstract-popover": "^0.3.0",
+    "@startupjs-ui/core": "^0.3.0",
+    "@startupjs-ui/div": "^0.3.0",
+    "@startupjs-ui/flat-list": "^0.3.0",
+    "@startupjs-ui/loader": "^0.3.0",
+    "@startupjs-ui/menu": "^0.3.0",
+    "@startupjs-ui/text-input": "^0.3.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "8a6ae7871e4c82f3e24d5911a9df42338e057e7a"
+  "gitHead": "8d212b47680af1dfe582f9759b38724b46488e25"
 }