refactor: remove usage of AriaModalController from overlay (#10026)

Author: web-padawan

packages/confirm-dialog/src/vaadin-confirm-dialog-overlay.js

@@ -90,15 +90,6 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMi
     return this.owner;
   }
 
-  /**
-   * Override method from OverlayFocusMixin to use owner as modal root
-   * @protected
-   * @override
-   */
-  get _modalRoot() {
-    return this.owner;
-  }
-
   /**
    * Override method from OverlayFocusMixin to use owner as focus trap root
    * @protected
@@ -107,15 +98,6 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMi
   get _focusTrapRoot() {
     return this.owner;
   }
-
-  /**
-   * Override method from OverlayFocusMixin to not set `aria-hidden`
-   * @protected
-   * @override
-   */
-  get _useAriaHidden() {
-    return false;
-  }
 }
 
 defineCustomElement(ConfirmDialogOverlay);

packages/crud/src/vaadin-crud-dialog.js

@@ -39,15 +39,6 @@ class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin
     return crudDialogOverlayStyles;
   }
 
-  /**
-   * Override method from OverlayFocusMixin to use the owner (CRUD element) as modal root
-   * @protected
-   * @override
-   */
-  get _modalRoot() {
-    return this.owner;
-  }
-
   /**
    * Override method from OverlayFocusMixin to use dialog as focus trap root
    * @protected
@@ -58,15 +49,6 @@ class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin
     return this.getRootNode().host;
   }
 
-  /**
-   * Override method from OverlayFocusMixin to not set `aria-hidden`
-   * @protected
-   * @override
-   */
-  get _useAriaHidden() {
-    return false;
-  }
-
   /** @protected */
   render() {
     return html`

packages/dialog/src/vaadin-dialog-overlay-mixin.js

@@ -53,15 +53,6 @@ export const DialogOverlayMixin = (superClass) =>
       return this.owner;
     }
 
-    /**
-     * Override method from OverlayFocusMixin to use owner as modal root
-     * @protected
-     * @override
-     */
-    get _modalRoot() {
-      return this.owner;
-    }
-
     /** @protected */
     ready() {
       super.ready();

packages/dialog/src/vaadin-dialog-overlay.js

@@ -42,15 +42,6 @@ export class DialogOverlay extends DialogOverlayMixin(
     return this.owner;
   }
 
-  /**
-   * Override method from OverlayFocusMixin to not set `aria-hidden`
-   * @protected
-   * @override
-   */
-  get _useAriaHidden() {
-    return false;
-  }
-
   /** @protected */
   render() {
     return html`

packages/login/src/vaadin-login-overlay-wrapper.js

@@ -41,14 +41,6 @@ class LoginOverlayWrapper extends OverlayMixin(DirMixin(ThemableMixin(PolylitMix
     };
   }
 
-  /**
-   * @protected
-   * @override
-   */
-  get _modalRoot() {
-    return this.owner;
-  }
-
   /**
    * Override method from OverlayFocusMixin to use owner as focus trap root
    * @protected
@@ -58,15 +50,6 @@ class LoginOverlayWrapper extends OverlayMixin(DirMixin(ThemableMixin(PolylitMix
     return this.owner;
   }
 
-  /**
-   * Override method from OverlayFocusMixin to not set `aria-hidden`
-   * @protected
-   * @override
-   */
-  get _useAriaHidden() {
-    return false;
-  }
-
   /** @protected */
   render() {
     return html`

packages/overlay/src/vaadin-overlay-focus-mixin.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { AriaModalController } from '@vaadin/a11y-base/src/aria-modal-controller.js';
 import { FocusRestorationController } from '@vaadin/a11y-base/src/focus-restoration-controller.js';
 import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import { getDeepActiveElement, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
@@ -48,7 +47,6 @@ export const OverlayFocusMixin = (superClass) =>
     constructor() {
       super();
 
-      this.__ariaModalController = new AriaModalController(this, () => this._modalRoot);
       this.__focusTrapController = new FocusTrapController(this);
       this.__focusRestorationController = new FocusRestorationController();
     }
@@ -66,20 +64,10 @@ export const OverlayFocusMixin = (superClass) =>
     ready() {
       super.ready();
 
-      this.addController(this.__ariaModalController);
       this.addController(this.__focusTrapController);
       this.addController(this.__focusRestorationController);
     }
 
-    /**
-     * Override to specify another element used as a modality root,
-     * e.g. the overlay's owner element, rather than overlay itself.
-     * @protected
-     */
-    get _modalRoot() {
-      return this;
-    }
-
     /**
      * Override to specify another element used as a focus trap root,
      * e.g. the overlay's owner element, rather than overlay part.
@@ -89,25 +77,13 @@ export const OverlayFocusMixin = (superClass) =>
       return this.$.overlay;
     }
 
-    /**
-     * Override not use a controller for setting `aria-hidden` on
-     * elements outside the overlay, e.g. when using `aria-modal`.
-     * @protected
-     */
-    _useAriaHidden() {
-      return true;
-    }
-
     /**
      * Release focus and restore focus after the overlay is closed.
      *
      * @protected
      */
     _resetFocus() {
       if (this.focusTrap) {
-        if (this._useAriaHidden) {
-          this.__ariaModalController.close();
-        }
         this.__focusTrapController.releaseFocus();
       }
 
@@ -135,9 +111,6 @@ export const OverlayFocusMixin = (superClass) =>
      */
     _trapFocus() {
       if (this.focusTrap) {
-        if (this._useAriaHidden) {
-          this.__ariaModalController.showModal();
-        }
         this.__focusTrapController.trapFocus(this._focusTrapRoot);
       }
     }

packages/overlay/test/focus-trap.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync, nextRender, oneEvent, tabKeyDown } from '@vaadin/testing-helpers';
+import '../src/vaadin-overlay.js';
 import { getFocusableElements, isElementFocused } from '@vaadin/a11y-base/src/focus-utils.js';
-import { Overlay } from '../src/vaadin-overlay.js';
 
 describe('focus-trap', () => {
   let overlay, overlayPart, focusableElements;
@@ -141,157 +141,4 @@ describe('focus-trap', () => {
       expect(getFocusedElementIndex()).to.equal(0);
     });
   });
-
-  describe('aria-hidden', () => {
-    let wrapper, sibling, overlay;
-
-    beforeEach(() => {
-      wrapper = fixtureSync(`
-        <div>
-          <aside>
-            <button>Foo</button>
-          </aside>
-          <div>
-            <button>Foo</button>
-            <vaadin-overlay focus-trap></vaadin-overlay>
-            <button>Bar</button>
-          </div>
-        </div>
-      `);
-
-      overlay = wrapper.querySelector('vaadin-overlay');
-      sibling = wrapper.querySelector('aside');
-      overlay.renderer = (root) => {
-        root.innerHTML = '<input placeholder="Input">';
-      };
-    });
-
-    afterEach(() => {
-      overlay.opened = false;
-    });
-
-    it('should set aria-hidden on other elements on overlay open', async () => {
-      overlay.opened = true;
-      await oneEvent(overlay, 'vaadin-overlay-open');
-
-      expect(sibling.getAttribute('aria-hidden')).to.equal('true');
-    });
-
-    it('should remove aria-hidden from other elements on overlay close', async () => {
-      overlay.opened = true;
-      await oneEvent(overlay, 'vaadin-overlay-open');
-
-      overlay.opened = false;
-      expect(sibling.hasAttribute('aria-hidden')).to.be.false;
-    });
-
-    it('should not set aria-hidden on other elements if focusTrap is set to false', async () => {
-      overlay.focusTrap = false;
-
-      overlay.opened = true;
-      await oneEvent(overlay, 'vaadin-overlay-open');
-
-      expect(sibling.hasAttribute('aria-hidden')).to.be.false;
-    });
-  });
-
-  describe('aria-hidden modal root', () => {
-    customElements.define(
-      'custom-overlay-wrapper',
-      class extends HTMLElement {
-        constructor() {
-          super();
-
-          this.attachShadow({ mode: 'open' });
-
-          const overlay = document.createElement('custom-overlay');
-
-          const owner = document.createElement('div');
-          overlay.owner = owner;
-
-          // Forward the slotted content from wrapper to overlay
-          const slot = document.createElement('slot');
-          overlay.appendChild(slot);
-
-          overlay.focusTrap = true;
-          overlay.renderer = (root) => {
-            root.innerHTML = '<input placeholder="Input">';
-          };
-
-          this.shadowRoot.append(overlay);
-          this.append(owner);
-        }
-      },
-    );
-
-    customElements.define(
-      'custom-overlay',
-      class extends Overlay {
-        get _contentRoot() {
-          return this.owner;
-        }
-
-        get _modalRoot() {
-          return this.owner;
-        }
-      },
-    );
-
-    let outer, inner, wrapper, overlay;
-
-    beforeEach(() => {
-      outer = fixtureSync(`
-        <div>
-          <aside>
-            <button>Foo</button>
-          </aside>
-          <div>
-            <button>Bar</button>
-            <custom-overlay-wrapper></custom-overlay-wrapper>
-            <button>Baz</button>
-          </div>
-        </div>
-      `);
-
-      wrapper = outer.querySelector('custom-overlay-wrapper');
-      inner = outer.querySelector('div');
-      overlay = wrapper.shadowRoot.querySelector('custom-overlay');
-    });
-
-    afterEach(() => {
-      overlay.opened = false;
-    });
-
-    it('should not set aria-hidden on wrapping elements on overlay open', async () => {
-      overlay.opened = true;
-      await oneEvent(overlay, 'vaadin-overlay-open');
-
-      expect(outer.hasAttribute('aria-hidden')).to.be.false;
-      expect(inner.hasAttribute('aria-hidden')).to.be.false;
-      expect(wrapper.hasAttribute('aria-hidden')).to.be.false;
-    });
-
-    it('should not set aria-hidden on content root element on overlay open', async () => {
-      overlay.opened = true;
-      await oneEvent(overlay, 'vaadin-overlay-open');
-
-      const root = wrapper.querySelector('div');
-      const input = root.firstElementChild;
-
-      expect(root.hasAttribute('aria-hidden')).to.be.false;
-      expect(input.hasAttribute('aria-hidden')).to.be.false;
-    });
-
-    it('should set aria-hidden on sibling elements on overlay open', async () => {
-      overlay.opened = true;
-      await oneEvent(overlay, 'vaadin-overlay-open');
-
-      const buttons = wrapper.parentElement.querySelectorAll('button');
-      expect(buttons[0].getAttribute('aria-hidden')).to.equal('true');
-      expect(buttons[1].getAttribute('aria-hidden')).to.equal('true');
-
-      const aside = outer.querySelector('aside');
-      expect(aside.getAttribute('aria-hidden')).to.equal('true');
-    });
-  });
 });

packages/popover/src/vaadin-popover-overlay.js

@@ -68,14 +68,6 @@ class PopoverOverlay extends PopoverOverlayMixin(
     return this.owner;
   }
 
-  /**
-   * @override
-   * @protected
-   */
-  get _modalRoot() {
-    return this.owner;
-  }
-
   /**
    * Override method from OverlayFocusMixin to use owner as focus trap root
    * @protected
@@ -85,15 +77,6 @@ class PopoverOverlay extends PopoverOverlayMixin(
     return this.owner;
   }
 
-  /**
-   * Override method from OverlayFocusMixin to not set `aria-hidden`
-   * @protected
-   * @override
-   */
-  get _useAriaHidden() {
-    return false;
-  }
-
   /**
    * Override method from `OverlayMixin` to always add outside
    * click listener so that it can be used by modeless popover.