diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 0a00353220..12a8556a63 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -82,6 +82,7 @@ import { export class Datetime implements ComponentInterface { private inputId = `ion-dt-${datetimeIds++}`; private calendarBodyRef?: HTMLElement; + private monthYearToggleItemRef?: HTMLIonItemElement; private popoverRef?: HTMLIonPopoverElement; private clearFocusVisible?: () => void; private parsedMinuteValues?: number[]; @@ -1890,7 +1891,32 @@ export class Datetime implements ComponentInterface {
- this.toggleMonthAndYearView()}> + (this.monthYearToggleItemRef = el)} + button + aria-label="Show year picker" + detail={false} + lines="none" + onClick={() => { + this.toggleMonthAndYearView(); + /** + * TODO: FW-3547 + * + * Currently there is not a way to set the aria-label on the inner button + * on the `ion-item` and have it be reactive to changes. This is a workaround + * until we either refactor `ion-item` to a button or Stencil adds a way to + * have reactive props for built-in properties, such as `aria-label`. + */ + const { monthYearToggleItemRef } = this; + if (monthYearToggleItemRef) { + const btn = monthYearToggleItemRef.shadowRoot?.querySelector('.item-native'); + if (btn) { + const monthYearAriaLabel = this.showMonthAndYear ? 'Hide year picker' : 'Show year picker'; + btn.setAttribute('aria-label', monthYearAriaLabel); + } + } + }} + > {getMonthAndYear(this.locale, this.workingParts)} - this.prevMonth()}> + this.prevMonth()}> - this.nextMonth()}> + this.nextMonth()}>