@startupjs-ui/date-time-picker 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/date-time-picker

package/components/Calendar/Days/index.tsx

@@ -61,6 +61,7 @@ function Days ({
           month: currentDay.month(),
           day: currentDay.date(),
           value: +currentDay,
+          ariaLabel: currentDay.format('MMMM D, YYYY'),
           testID: `${currentDay.format('MM')}-` +
             `${currentDay.format('DD')}-${currentDay.format('YYYY')}`
         })
@@ -101,18 +102,20 @@ function Days ({
   }
 
   return pug`
-    Div.row(row)
+    Div.row(key='week-header' row role='row')
       for shortDayName in weekdaysShort
-        Div.cell(key=shortDayName)
-          Span.shortName(bold)= shortDayName
+        Div.cell(key=shortDayName role='columnheader')
+          Span.shortName(key='shortName-' + shortDayName bold)= shortDayName
 
     for week, weekIndex in matrixMonthDays
       // noop to prevent eslint error about missing 'week'. TODO: implement eslint disable comments support in pug
       - (week => {})(week)
-      Div.row(key='week-' + weekIndex row)
+      Div.row(key='week-' + weekIndex row role='row')
         for day, dayIndex in matrixMonthDays[weekIndex]
           Div.cell(
             key=weekIndex + '-' + dayIndex
+            role='gridcell'
+            aria-label=day.ariaLabel
             styleName={
               isActive: !range && moment.tz(day.value, timezone).isSame(date, 'd'),
               isActiveRangeStart: range && moment.tz(day.value, timezone).isSame(range[0], 'd'),
@@ -124,6 +127,7 @@ function Days ({
             onPress=() => _onChangeDay(day)
           )
             Span.label(
+              key='day-label-' + weekIndex + '-' + dayIndex
               bold=getLabelActive(day.value)
               styleName={
                 isMute: !moment.tz(day.value, timezone).isSame(uiDate, 'M'),

package/components/Calendar/index.tsx

@@ -32,7 +32,11 @@ function Calendar ({
   const $uiDate = $(+moment(date).seconds(0).milliseconds(0))
 
   return pug`
-    Div(testID=testID)
+    Div(
+      testID=testID
+      role='grid'
+      aria-label='Calendar'
+    )
       Header(
         uiDate=$uiDate.get()
         exactLocale=exactLocale

package/index.d.ts

@@ -55,9 +55,9 @@ export interface DateTimePickerProps extends Omit<UITextInputProps, 'value' | 'o
     visible?: boolean;
     /** Scoped model controlling visibility */
     $visible?: any;
-    /** Test identifier for the input */
+    /** Test identifier for the input; on tablet/web the anchored popover also gets `{testID}-popover` when set */
     testID?: string;
-    /** Test identifier for calendar root */
+    /** Test identifier for calendar root; if `testID` is unset, the popover uses `{calendarTestID}-popover` when set */
     calendarTestID?: string;
     /** Called when user presses input (native) */
     onPressIn?: (...args: any[]) => void;

package/index.tsx

@@ -72,9 +72,9 @@ export interface DateTimePickerProps extends Omit<UITextInputProps, 'value' | 'o
   visible?: boolean
   /** Scoped model controlling visibility */
   $visible?: any
-  /** Test identifier for the input */
+  /** Test identifier for the input; on tablet/web the anchored popover also gets `{testID}-popover` when set */
   testID?: string
-  /** Test identifier for calendar root */
+  /** Test identifier for calendar root; if `testID` is unset, the popover uses `{calendarTestID}-popover` when set */
   calendarTestID?: string
   /** Called when user presses input (native) */
   onPressIn?: (...args: any[]) => void
@@ -312,6 +312,7 @@ function DateTimePicker ({
   if (Platform.OS === 'web') {
     inputProps.editable = false
     inputProps.onFocus = _onPressIn
+    if (textInput) inputProps['aria-valuetext'] = textInput
   }
 
   if (Platform.OS === 'android') {
@@ -436,6 +437,13 @@ function DateTimePicker ({
     `
   }
 
+  const abstractPopoverTestID =
+    testID != null && String(testID) !== ''
+      ? `${String(testID)}-popover`
+      : calendarTestID != null && String(calendarTestID) !== ''
+        ? `${String(calendarTestID)}-popover`
+        : undefined
+
   return pug`
     // Android datetimepicker rendered inside its own modal
     if Platform.OS === 'android'
@@ -447,6 +455,7 @@ function DateTimePicker ({
           visible=visible
           anchorRef=inputRef
           renderWrapper=renderWrapper
+          testID=abstractPopoverTestID
         )= renderPopoverContent()
       else
         = caption

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/date-time-picker",
-  "version": "0.2.0-alpha.2",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -10,17 +10,17 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@react-native-community/datetimepicker": "^8.4.4",
-    "@startupjs-ui/abstract-popover": "^0.2.0-alpha.1",
-    "@startupjs-ui/button": "^0.2.0-alpha.2",
-    "@startupjs-ui/core": "^0.2.0-alpha.1",
-    "@startupjs-ui/div": "^0.2.0-alpha.1",
-    "@startupjs-ui/divider": "^0.2.0-alpha.1",
-    "@startupjs-ui/drawer": "^0.2.0-alpha.1",
-    "@startupjs-ui/flat-list": "^0.2.0-alpha.1",
-    "@startupjs-ui/icon": "^0.2.0-alpha.1",
-    "@startupjs-ui/popover": "^0.2.0-alpha.1",
-    "@startupjs-ui/span": "^0.2.0-alpha.1",
-    "@startupjs-ui/text-input": "^0.2.0-alpha.1",
+    "@startupjs-ui/abstract-popover": "^0.3.0",
+    "@startupjs-ui/button": "^0.3.0",
+    "@startupjs-ui/core": "^0.3.0",
+    "@startupjs-ui/div": "^0.3.0",
+    "@startupjs-ui/divider": "^0.3.0",
+    "@startupjs-ui/drawer": "^0.3.0",
+    "@startupjs-ui/flat-list": "^0.3.0",
+    "@startupjs-ui/icon": "^0.3.0",
+    "@startupjs-ui/popover": "^0.3.0",
+    "@startupjs-ui/span": "^0.3.0",
+    "@startupjs-ui/text-input": "^0.3.0",
     "moment-timezone": "^0.5.31",
     "react-native-safe-area-context": "^5.6.0"
   },
@@ -29,5 +29,5 @@
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "8a6ae7871e4c82f3e24d5911a9df42338e057e7a"
+  "gitHead": "8d212b47680af1dfe582f9759b38724b46488e25"
 }