diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.js b/packages/date-picker/src/vaadin-date-picker-mixin.js index 079a170964..f8aa826d0d 100644 --- a/packages/date-picker/src/vaadin-date-picker-mixin.js +++ b/packages/date-picker/src/vaadin-date-picker-mixin.js @@ -3,7 +3,6 @@ * Copyright (c) 2016 - 2025 Vaadin Ltd. * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ */ -import { hideOthers } from '@vaadin/a11y-base/src/aria-hidden.js'; import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js'; import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js'; import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js'; @@ -461,6 +460,15 @@ export const DatePickerMixin = (subclass) => // Currently only supported for locales that start the week on Monday. this.toggleAttribute('week-numbers', this.showWeekNumbers && this.__effectiveI18n.firstDayOfWeek === 1); } + + if ((props.has('opened') || props.has('_fullscreen')) && this._overlayContent) { + if (this.opened && this._fullscreen) { + // Mark as modal on mobile if the input can not be accessed + this._overlayContent.setAttribute('aria-modal', 'true'); + } else { + this._overlayContent.removeAttribute('aria-modal'); + } + } } /** @protected */ @@ -910,9 +918,6 @@ export const DatePickerMixin = (subclass) => input.blur(); this._overlayContent.focusDateElement(); } - - const focusables = this._noInput ? content : [input, content]; - this.__showOthers = hideOthers(focusables); } /** @private */ @@ -959,11 +964,6 @@ export const DatePickerMixin = (subclass) => /** @protected */ _onOverlayClosed() { - // Reset `aria-hidden` state. - if (this.__showOthers) { - this.__showOthers(); - this.__showOthers = null; - } window.removeEventListener('scroll', this._boundOnScroll, true); if (this._closedByEscape) { diff --git a/packages/date-picker/src/vaadin-date-picker-overlay-content-mixin.js b/packages/date-picker/src/vaadin-date-picker-overlay-content-mixin.js index d719e65f62..f2e7c6828a 100644 --- a/packages/date-picker/src/vaadin-date-picker-overlay-content-mixin.js +++ b/packages/date-picker/src/vaadin-date-picker-overlay-content-mixin.js @@ -165,7 +165,11 @@ export const DatePickerOverlayContentMixin = (superClass) => } /** @protected */ - _initControllers() { + firstUpdated() { + super.firstUpdated(); + + this.setAttribute('role', 'dialog'); + this.addController( new MediaQueryController(this._desktopMediaQuery, (matches) => { this._desktopMode = matches; diff --git a/packages/date-picker/src/vaadin-date-picker-overlay-content.js b/packages/date-picker/src/vaadin-date-picker-overlay-content.js index 42aa5d42f0..e7f2559036 100644 --- a/packages/date-picker/src/vaadin-date-picker-overlay-content.js +++ b/packages/date-picker/src/vaadin-date-picker-overlay-content.js @@ -53,15 +53,6 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin( `; } - - /** @protected */ - firstUpdated() { - super.firstUpdated(); - - this.setAttribute('role', 'dialog'); - - this._initControllers(); - } } defineCustomElement(DatePickerOverlayContent); diff --git a/packages/date-picker/test/dom/__snapshots__/date-picker.test.snap.js b/packages/date-picker/test/dom/__snapshots__/date-picker.test.snap.js index ea0ff2ae18..13cadb0259 100644 --- a/packages/date-picker/test/dom/__snapshots__/date-picker.test.snap.js +++ b/packages/date-picker/test/dom/__snapshots__/date-picker.test.snap.js @@ -319,16 +319,12 @@ snapshots["vaadin-date-picker host opened default"] = top-aligned="" >