From c12614524bbb7593ebc7689fee0a082a7119e9de Mon Sep 17 00:00:00 2001
From: Loris Janner <78341770+ljanner@users.noreply.github.com>
Date: Tue, 20 Oct 2026 12:41:05 +0200
Subject: [PATCH] fix(datetime): include date in accessible name

Include the visible month and year before the month/year toggle's
existing Show/Hide year picker instruction. The action-only aria-label
overrides the visible date and violates WCAG 2.5.3 (Label in Name),
preventing voice-control users from targeting the button by its text.

Reuse the localized month/year string for both the visible text and
accessible name so they stay in sync as the calendar, value, locale,
and picker state change, without adding a new API.

Extend the existing spec tests to assert the complete collapsed and
expanded labels, and cover updates to the localized month/year.

Fixes ionic-team/ionic-framework#31608
---
 core/src/components/datetime/datetime.tsx     |  5 +++--
 .../datetime/test/a11y/datetime.spec.ts       | 21 ++++++++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index e9bb5d47086..3b1fdf0d91d 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -2253,6 +2253,7 @@ export class Datetime implements ComponentInterface {
 
   private renderCalendarHeader(mode: Mode) {
     const { disabled } = this;
+    const monthAndYear = getMonthAndYear(this.locale, this.workingParts);
     const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp;
     const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;
 
@@ -2274,11 +2275,11 @@ export class Datetime implements ComponentInterface {
               }}
               part="month-year-button"
               disabled={disabled}
-              aria-label={this.showMonthAndYear ? 'Hide year picker' : 'Show year picker'}
+              aria-label={`${monthAndYear}, ${this.showMonthAndYear ? 'Hide year picker' : 'Show year picker'}`}
               onClick={() => this.toggleMonthAndYearView()}
             >
               <span id="toggle-wrapper">
-                {getMonthAndYear(this.locale, this.workingParts)}
+                {monthAndYear}
                 <ion-icon
                   aria-hidden="true"
                   icon={this.showMonthAndYear ? expandedIcon : collapsedIcon}
diff --git a/core/src/components/datetime/test/a11y/datetime.spec.ts b/core/src/components/datetime/test/a11y/datetime.spec.ts
index 545e3675f0a..95feceafc5c 100644
--- a/core/src/components/datetime/test/a11y/datetime.spec.ts
+++ b/core/src/components/datetime/test/a11y/datetime.spec.ts
@@ -20,19 +20,19 @@ describe('datetime', () => {
     beforeEach(async () => {
       page = await newSpecPage({
         components: [Datetime],
-        html: `<ion-datetime></ion-datetime>`,
+        html: `<ion-datetime locale="en-US" value="2022-02-22"></ion-datetime>`,
       });
     });
 
-    it('should have aria-label "Show year picker" when collapsed', async () => {
+    it('should include the visible month/year and show action when collapsed', async () => {
       const datetime = page.body.querySelector('ion-datetime')!;
       const monthYearToggleBtn = datetime.shadowRoot!.querySelector('.calendar-month-year .calendar-month-year-toggle');
       const ariaLabel = monthYearToggleBtn!.getAttribute('aria-label');
 
-      expect(ariaLabel).toContain('Show year picker');
+      expect(ariaLabel).toBe('February 2022, Show year picker');
     });
 
-    it('should have aria-label "Hide year picker" when expanded', async () => {
+    it('should include the visible month/year and hide action when expanded', async () => {
       const datetime = page.body.querySelector('ion-datetime')!;
       const monthYearToggleBtn = datetime.shadowRoot!.querySelector<HTMLButtonElement>(
         '.calendar-month-year .calendar-month-year-toggle'
@@ -47,7 +47,18 @@ describe('datetime', () => {
       );
       const ariaLabel = monthYearToggleBtnAfter!.getAttribute('aria-label');
 
-      expect(ariaLabel).toContain('Hide year picker');
+      expect(ariaLabel).toBe('February 2022, Hide year picker');
+    });
+
+    it('should include the localized month/year when the locale changes', async () => {
+      const datetime = page.body.querySelector('ion-datetime')!;
+      datetime.locale = 'de-DE';
+
+      await page.waitForChanges();
+
+      const monthYearToggleBtn = datetime.shadowRoot!.querySelector('.calendar-month-year .calendar-month-year-toggle');
+
+      expect(monthYearToggleBtn!.getAttribute('aria-label')).toBe('Februar 2022, Show year picker');
     });
   });
 });