From 1a346b62068076d0b0cc6b2dea4136e0f06576b8 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 16 Feb 2023 15:05:35 -0500
Subject: [PATCH] fix(datetime): days of week and spacing buttons are not
 announced by screen readers (#26813)

resolves #26811
---
 core/src/components/datetime/datetime.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 63cf10adf3..9d34bae250 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1925,7 +1925,7 @@ export class Datetime implements ComponentInterface {
             </ion-buttons>
           </div>
         </div>
-        <div class="calendar-days-of-week">
+        <div class="calendar-days-of-week" aria-hidden="true">
           {getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
             return <div class="day-of-week">{d}</div>;
           })}
@@ -1973,6 +1973,7 @@ export class Datetime implements ComponentInterface {
             const { day, dayOfWeek } = dateObject;
             const { isDateEnabled, multiple } = this;
             const referenceParts = { month, day, year };
+            const isCalendarPadding = day === null;
             const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(
               this.locale,
               referenceParts,
@@ -2011,15 +2012,16 @@ export class Datetime implements ComponentInterface {
                 data-day-of-week={dayOfWeek}
                 disabled={isCalDayDisabled}
                 class={{
-                  'calendar-day-padding': day === null,
+                  'calendar-day-padding': isCalendarPadding,
                   'calendar-day': true,
                   'calendar-day-active': isActive,
                   'calendar-day-today': isToday,
                 }}
+                aria-hidden={isCalendarPadding ? 'true' : null}
                 aria-selected={ariaSelected}
                 aria-label={ariaLabel}
                 onClick={() => {
-                  if (day === null) {
+                  if (isCalendarPadding) {
                     return;
                   }