bug: datetime month/year toggle accessible name omits visible text #31608

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v9.x

Current Behavior

The month/year toggle in the default ion-datetime calendar has an accessible name that does not include its visible text.

For example, the button displays October 2026, but its computed accessible name is only Show year picker because the aria-label overrides the visible button text.

Simplified rendered markup:

<button part="month-year-button" aria-label="Show year picker">
  <span id="toggle-wrapper">October 2026</span>
</button>

Playwright's accessibility snapshot confirms the mismatch:

- button "Show year picker": October 2026

An audit with axe-core 4.14.0 reports a serious label-content-name-mismatch violation, corresponding to WCAG 2.5.3: Label in Name. This can prevent voice-control users from targeting the button using the text displayed on screen.

Expected Behavior

The month/year toggle's accessible name should include the displayed month/year while preserving its existing action instruction. For example:

• Collapsed: October 2026, Show year picker
• Expanded: October 2026, Hide year picker

The accessible name should remain consistent with the visible text when the displayed month/year or locale changes. The exact wording is flexible as long as the visible label is included.

Steps to Reproduce

1. Open https://ionicframework.com/docs/api/datetime#basic-usage.
2. Locate the Basic Usage calendar demo.
3. Inspect the clickable month/year heading inside the demo iframe, expanding ion-datetime's shadow root to find .calendar-month-year-toggle.
4. In the browser DevTools Accessibility pane, compare the button's computed accessible name with its visible text. The month/year is visible, but the accessible name is only Show year picker.

The displayed month/year may differ according to the example's value. No particular date or user interaction is required to demonstrate the mismatch.

Code Reproduction URL

https://ionicframework.com/docs/api/datetime#basic-usage

Ionic Info

@ionic/angular 9.0.8

Additional Information

Relevant violation excerpt:

{
  "id": "label-content-name-mismatch",
  "impact": "serious",
  "nodes": [
    {
      "target": [["ion-datetime", ".calendar-month-year-toggle"]],
      "any": [
        {
          "message": "Text inside the element is not included in the accessible name"
        }
      ]
    }
  ]
}

Axe rule reference: https://dequeuniversity.com/rules/axe/4.14/label-content-name-mismatch

WCAG reference: https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html