refactor: use aria-modal in date-picker instead of aria-hidden

Author: web-padawan

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,20 @@ 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('_noInput')) {
+        const content = this._overlayContent;
+        if (this.opened) {
+          content.setAttribute('role', 'dialog');
+          // Mark as modal on mobile if the input can not be accessed
+          if (this._noInput) {
+            content.setAttribute('aria-modal', 'true');
+          }
+        } else if (props.get('opened')) {
+          content.removeAttribute('role');
+          content.removeAttribute('aria-modal');
+        }
+      }
     }
 
     /** @protected */
@@ -910,9 +923,6 @@ export const DatePickerMixin = (subclass) =>
         input.blur();
         this._overlayContent.focusDateElement();
       }
-
-      const focusables = this._noInput ? content : [input, content];
-      this.__showOthers = hideOthers(focusables);
     }
 
     /** @private */
@@ -959,11 +969,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) {

packages/date-picker/src/vaadin-date-picker-overlay-content-mixin.js

@@ -165,7 +165,9 @@ export const DatePickerOverlayContentMixin = (superClass) =>
     }
 
     /** @protected */
-    _initControllers() {
+    firstUpdated() {
+      super.firstUpdated();
+
       this.addController(
         new MediaQueryController(this._desktopMediaQuery, (matches) => {
           this._desktopMode = matches;

packages/date-picker/src/vaadin-date-picker-overlay-content.js

@@ -53,15 +53,6 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
       </div>
     `;
   }
-
-  /** @protected */
-  firstUpdated() {
-    super.firstUpdated();
-
-    this.setAttribute('role', 'dialog');
-
-    this._initControllers();
-  }
 }
 
 defineCustomElement(DatePickerOverlayContent);

packages/date-picker/test/wai-aria.test.js

@@ -29,6 +29,26 @@ describe('WAI-ARIA', () => {
         expect(calendar.getAttribute('aria-hidden')).to.equal(focusable ? null : 'true');
       });
     });
+
+    it('should toggle role attribute on the overlay content on open', async () => {
+      await open(datePicker);
+      const content = datePicker._overlayContent;
+      expect(content.getAttribute('role')).to.equal('dialog');
+
+      datePicker.close();
+      expect(content.hasAttribute('role')).to.be.false;
+    });
+
+    it('should toggle aria-modal attribute on the overlay content on open if fullscreen', async () => {
+      datePicker._fullscreen = true;
+
+      await open(datePicker);
+      const content = datePicker._overlayContent;
+      expect(content.getAttribute('aria-modal')).to.equal('true');
+
+      datePicker.close();
+      expect(content.hasAttribute('aria-modal')).to.be.false;
+    });
   });
 
   describe('overlay contents', () => {
@@ -84,39 +104,4 @@ describe('WAI-ARIA', () => {
       expect(todayElement.getAttribute('aria-label')).to.match(/, Today$/u);
     });
   });
-
-  describe('aria-hidden', () => {
-    let wrapper, datePicker, input, button;
-
-    beforeEach(async () => {
-      wrapper = fixtureSync(`
-        <div>
-          <button>Button</button>
-          <vaadin-date-picker></vaadin-date-picker>
-          <input placeholder="input" />
-        </div>
-      `);
-      await nextRender();
-      [button, datePicker, input] = wrapper.children;
-    });
-
-    it('should set aria-hidden on other elements when overlay is opened', async () => {
-      await open(datePicker);
-      expect(button.getAttribute('aria-hidden')).to.equal('true');
-      expect(input.getAttribute('aria-hidden')).to.equal('true');
-    });
-
-    it('should not set aria-hidden on slotted input and overlay element', async () => {
-      await open(datePicker);
-      expect(datePicker.inputElement.hasAttribute('aria-hidden')).to.be.false;
-      expect(datePicker.$.overlay.hasAttribute('aria-hidden')).to.be.false;
-    });
-
-    it('should remove aria-hidden from other elements when overlay is closed', async () => {
-      await open(datePicker);
-      datePicker.close();
-      expect(button.hasAttribute('aria-hidden')).to.be.false;
-      expect(input.hasAttribute('aria-hidden')).to.be.false;
-    });
-  });
 });