@startupjs-ui/dropdown 0.2.0 → 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.0](https://github.com/startupjs/startupjs-ui/compare/v0.1.23...v0.2.0) (2026-05-04)
 
 

package/components/Item/index.tsx

@@ -25,6 +25,8 @@ export interface DropdownItemProps {
   onPress?: () => void
   /** Custom content when used as a pure/custom item */
   children?: ReactNode
+  /** Test id forwarded to the interactive root (menu row or touchable wrapper) */
+  testID?: string
   /** @private Active value injected by Dropdown */
   _activeValue?: any
   /** @private Selected index for keyboard navigation */
@@ -52,6 +54,7 @@ function DropdownItem ({
   disabled,
   onPress,
   children,
+  testID,
   _activeValue,
   _selectIndexValue,
   _variant,
@@ -84,6 +87,10 @@ function DropdownItem ({
         styleName={ selectMenu: _selectIndexValue === _index }
         onPress=handlePress
         icon=icon
+        testID=testID
+        role='option'
+        aria-selected=(_activeValue === value)
+        aria-label=label
       )= label
     `
   }
@@ -94,6 +101,7 @@ function DropdownItem ({
       to=to
       style=style
       onPress=handlePress
+      testID=testID
     )
       View.item(
         style=(!isPure && _activeValue === value) ? _styleActiveItem : undefined

package/index.d.ts

@@ -31,6 +31,12 @@ export interface DropdownProps {
     drawerCancelLabel?: string;
     /** Disable caption press */
     disabled?: boolean;
+    /** Accessible name for the dropdown trigger */
+    'aria-label'?: string;
+    /** Element id that labels the dropdown trigger */
+    'aria-labelledby'?: string;
+    /** Element id that describes the dropdown trigger */
+    'aria-describedby'?: string;
     /** Enable drawer behavior on small screens @default true */
     hasDrawer?: boolean;
     /** Show swipe responder zone in drawer */
@@ -39,6 +45,10 @@ export interface DropdownProps {
     onChange?: (value: string | number | undefined) => void;
     /** Called when dropdown is dismissed via overlay/cancel */
     onDismiss?: () => void;
+    /** Test identifier for the dropdown trigger */
+    testID?: string;
+    /** Test id for the desktop/tablet popover surface (passed to `AbstractPopover`) */
+    popoverTestID?: string;
 }
 export interface DropdownRef {
     /** Open dropdown programmatically */

package/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, useRef, useImperativeHandle, useEffect, type ReactNode
 import {
   Dimensions,
   UIManager,
-  ScrollView,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -14,6 +13,7 @@ import { pug, observer, $ } from 'startupjs'
 import { themed } from '@startupjs-ui/core'
 import Drawer from '@startupjs-ui/drawer'
 import Popover, { type PopoverRef } from '@startupjs-ui/popover'
+import ScrollView from '@startupjs-ui/scroll-view'
 import DropdownCaption from './components/Caption'
 import DropdownItem from './components/Item'
 import { useKeyboard } from './helpers'
@@ -48,6 +48,12 @@ export interface DropdownProps {
   drawerCancelLabel?: string
   /** Disable caption press */
   disabled?: boolean
+  /** Accessible name for the dropdown trigger */
+  'aria-label'?: string
+  /** Element id that labels the dropdown trigger */
+  'aria-labelledby'?: string
+  /** Element id that describes the dropdown trigger */
+  'aria-describedby'?: string
   /** Enable drawer behavior on small screens @default true */
   hasDrawer?: boolean
   /** Show swipe responder zone in drawer */
@@ -56,6 +62,10 @@ export interface DropdownProps {
   onChange?: (value: string | number | undefined) => void
   /** Called when dropdown is dismissed via overlay/cancel */
   onDismiss?: () => void
+  /** Test identifier for the dropdown trigger */
+  testID?: string
+  /** Test id for the desktop/tablet popover surface (passed to `AbstractPopover`) */
+  popoverTestID?: string
 }
 
 export interface DropdownRef {
@@ -79,10 +89,15 @@ function Dropdown ({
   drawerListTitle = '',
   drawerCancelLabel = 'Cancel',
   disabled,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
   hasDrawer = true,
   showDrawerResponder,
   onChange,
   onDismiss,
+  testID,
+  popoverTestID,
   ref
 }: DropdownProps): ReactNode {
   const popoverRef = useRef<PopoverRef>(null)
@@ -234,12 +249,16 @@ function Dropdown ({
   }
 
   const matchAnchorWidth = !(_popoverStyle as any)?.width && !(_popoverStyle as any)?.minWidth
+  const captionProps = (caption as any).props ?? {}
+  const inferredCaptionLabel = captionProps['aria-label'] ?? captionProps.placeholder ?? activeLabel
+  const captionLabel = (ariaLabel ?? (ariaLabelledBy ? undefined : inferredCaptionLabel)) || undefined
 
   if (isPopover) {
     const renderPopoverContent = (): ReactNode => pug`
       ScrollView(
         ref=refScroll
         showsVerticalScrollIndicator=false
+        role='listbox'
       )= renderContent.current
     `
 
@@ -263,9 +282,18 @@ function Dropdown ({
         onOpenComplete=onRequestOpen
         onCloseComplete=handlePopoverCloseComplete
         renderContent=renderPopoverContent
+        testID=popoverTestID
       )
         TouchableOpacity(
+          testID=testID
           disabled=disabled
+          role='button'
+          aria-label=captionLabel
+          aria-labelledby=ariaLabelledBy
+          aria-describedby=ariaDescribedBy
+          aria-haspopup='listbox'
+          aria-expanded=$isShow.get()
+          aria-disabled=disabled
           onPress=() => handleVisibleChange(!$isShow.get(), { reason: !$isShow.get() ? null : 'toggle' })
         )
           = caption
@@ -275,7 +303,15 @@ function Dropdown ({
   return pug`
     if caption
       TouchableOpacity.caption(
+        testID=testID
         disabled=disabled
+        role='button'
+        aria-label=captionLabel
+        aria-labelledby=ariaLabelledBy
+        aria-describedby=ariaDescribedBy
+        aria-haspopup='listbox'
+        aria-expanded=$isShow.get()
+        aria-disabled=disabled
         onPress=() => handleVisibleChange(!$isShow.get())
       )
         = caption

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/dropdown",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -8,20 +8,21 @@
   "types": "index.d.ts",
   "type": "module",
   "dependencies": {
-    "@startupjs-ui/button": "^0.2.0",
-    "@startupjs-ui/core": "^0.2.0",
-    "@startupjs-ui/div": "^0.2.0",
-    "@startupjs-ui/drawer": "^0.2.0",
-    "@startupjs-ui/icon": "^0.2.0",
-    "@startupjs-ui/link": "^0.2.0",
-    "@startupjs-ui/menu": "^0.2.0",
-    "@startupjs-ui/popover": "^0.2.0",
-    "@startupjs-ui/span": "^0.2.0"
+    "@startupjs-ui/button": "^0.3.0",
+    "@startupjs-ui/core": "^0.3.0",
+    "@startupjs-ui/div": "^0.3.0",
+    "@startupjs-ui/drawer": "^0.3.0",
+    "@startupjs-ui/icon": "^0.3.0",
+    "@startupjs-ui/link": "^0.3.0",
+    "@startupjs-ui/menu": "^0.3.0",
+    "@startupjs-ui/popover": "^0.3.0",
+    "@startupjs-ui/scroll-view": "^0.3.0",
+    "@startupjs-ui/span": "^0.3.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "0c586b841cba1c9d820542f6eca07470f5ea2659"
+  "gitHead": "8d212b47680af1dfe582f9759b38724b46488e25"
 }