@butternutbox/pawprint-native 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -121,6 +121,11 @@ type DatePickerOwnProps = {
   getMonthLabel?: (year: number, month: number, locale?: Locale) => string
   weekDayLabels?: [string, string, string, string, string, string, string]
   getDateState?: (date: Date) => DateItemState
+  getDateAccessibilityLabel?: (
+    date: Date,
+    state: DateItemState,
+    monthLabel: string
+  ) => string
   isDateDisabled?: (date: Date) => boolean
   minDate?: Date
   maxDate?: Date
@@ -229,6 +234,8 @@ const StyledIndicator = styled(View)<{
  * @param {[string,string,string,string,string,string,string]} [weekDayLabels] - Day-column labels Mon→Sun.
  * @param {(date: Date) => DateItemState} [getDateState] - Returns the visual state for a date.
  *   Defaults to: past="previous", today="current", future="default".
+ * @param {(date: Date, state: DateItemState, monthLabel: string) => string} [getDateAccessibilityLabel] - Returns the screen-reader label for a date,
+ *   e.g. to announce delivery states. Defaults to "{day} {monthLabel}".
  * @param {(date: Date) => boolean} [isDateDisabled] - Returns true to disable a date.
  * @param {Date} [minDate] - Dates before this (exclusive of time) will be disabled.
  * @param {Date} [maxDate] - Dates after this (exclusive of time) will be disabled.
@@ -270,6 +277,7 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
       getMonthLabel,
       weekDayLabels = DEFAULT_WEEK_LABELS,
       getDateState,
+      getDateAccessibilityLabel,
       isDateDisabled,
       minDate,
       maxDate,
@@ -470,6 +478,7 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
               token={datePicker.month.typography}
               align="center"
               color={datePicker.month.colour.text.default}
+              accessibilityRole="header"
             >
               {resolvedMonthLabel}
             </Typography>
@@ -493,11 +502,7 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
           entering={MONTH_SLIDE_ENTERING[slideDir]}
           exiting={MONTH_SLIDE_EXITING[slideDir]}
         >
-          <StyledDatesGrid
-            rowGap={rowGap}
-            accessible
-            accessibilityLabel={resolvedMonthLabel}
-          >
+          <StyledDatesGrid rowGap={rowGap}>
             {calendarRows.map((row, rowIdx) => (
               <StyledDateRow key={rowIdx}>
                 {row.map((date, colIdx) =>
@@ -547,7 +552,13 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
                             disabled={isDisabled}
                             accessible
                             accessibilityRole="button"
-                            accessibilityLabel={`${date.getDate()} ${resolvedMonthLabel}`}
+                            accessibilityLabel={
+                              getDateAccessibilityLabel?.(
+                                date,
+                                state,
+                                resolvedMonthLabel
+                              ) ?? `${date.getDate()} ${resolvedMonthLabel}`
+                            }
                             accessibilityState={{
                               selected: isSelected,
                               disabled: isDisabled

package/src/components/molecules/Drawer/DrawerContent.tsx

@@ -433,9 +433,8 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
                   panelShadowColor={modal.shadow.color}
                   panelShadowOffsetY={parseTokenValue(modal.shadow.offsetY)}
                   panelShadowBlur={parseTokenValue(modal.shadow.blur)}
-                  accessible
-                  accessibilityRole="none"
                   accessibilityViewIsModal
+                  onAccessibilityEscape={closeDrawer}
                   {...props}
                 >
                   <DrawerBodyMaxContext.Provider value={bodyMax}>