@lion/ui 0.7.6 → 0.7.8

package/components/overlays/src/OverlayController.js

@@ -640,13 +640,14 @@ export class OverlayController extends EventTarget {
   __setupTeardownAccessibility({ phase }) {
     if (phase === 'init') {
       this.__storeOriginalAttrs(this.contentNode, ['role', 'id']);
+      const isModal = this.trapsKeyboardFocus;
 
       if (this.invokerNode) {
-        this.__storeOriginalAttrs(this.invokerNode, [
-          'aria-expanded',
-          'aria-labelledby',
-          'aria-describedby',
-        ]);
+        const attributesToStore = ['aria-labelledby', 'aria-describedby'];
+        if (!isModal) {
+          attributesToStore.push('aria-expanded');
+        }
+        this.__storeOriginalAttrs(this.invokerNode, attributesToStore);
       }
 
       if (!this.contentNode.id) {
@@ -661,7 +662,7 @@ export class OverlayController extends EventTarget {
         }
         this.contentNode.setAttribute('role', 'tooltip');
       } else {
-        if (this.invokerNode) {
+        if (this.invokerNode && !isModal) {
           this.invokerNode.setAttribute('aria-expanded', `${this.isShown}`);
         }
         if (!this.contentNode.getAttribute('role')) {
@@ -787,6 +788,10 @@ export class OverlayController extends EventTarget {
    * @protected
    */
   _keepBodySize({ phase }) {
+    if (!this.preventsScroll) {
+      return;
+    }
+
     switch (phase) {
       case 'before-show':
         this.__bodyClientWidth = document.body.clientWidth;
@@ -1299,7 +1304,8 @@ export class OverlayController extends EventTarget {
     if (phase === 'init' || phase === 'teardown') {
       this.__setupTeardownAccessibility({ phase });
     }
-    if (this.invokerNode && !this.isTooltip) {
+    const isModal = this.trapsKeyboardFocus;
+    if (this.invokerNode && !this.isTooltip && !isModal) {
       this.invokerNode.setAttribute('aria-expanded', `${phase === 'show'}`);
     }
   }

package/components/overlays/src/OverlayMixin.js

@@ -72,7 +72,11 @@ export const OverlayMixinImplementation = superclass =>
     requestUpdate(name, oldValue, options) {
       super.requestUpdate(name, oldValue, options);
       if (name === 'opened' && this.opened !== oldValue) {
-        this.dispatchEvent(new Event('opened-changed'));
+        this.dispatchEvent(
+          new CustomEvent('opened-changed', {
+            detail: { opened: this.opened },
+          }),
+        );
       }
     }
 

package/components/overlays/test/OverlayController.test.js

@@ -1528,6 +1528,23 @@ describe('OverlayController', () => {
       expect(ctrl.invokerNode?.getAttribute('aria-expanded')).to.equal('false');
     });
 
+    it('does not synchronize [aria-expanded] on invoker when the overlay is modal', async () => {
+      const invokerNode = /** @type {HTMLElement} */ (
+        await fixture('<div role="button">invoker</div>')
+      );
+      const ctrl = new OverlayController({
+        ...withLocalTestConfig(),
+        trapsKeyboardFocus: true,
+        handlesAccessibility: true,
+        invokerNode,
+      });
+      expect(ctrl.invokerNode?.getAttribute('aria-expanded')).to.equal(null);
+      await ctrl.show();
+      expect(ctrl.invokerNode?.getAttribute('aria-expanded')).to.equal(null);
+      await ctrl.hide();
+      expect(ctrl.invokerNode?.getAttribute('aria-expanded')).to.equal(null);
+    });
+
     it('creates unique id for content', async () => {
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
@@ -1764,4 +1781,33 @@ describe('OverlayController', () => {
       );
     });
   });
+
+  describe('run _keepBodySize only with scroll prevention', () => {
+    /**
+     * @type {OverlayController}
+     */
+    const overlayControllerNoPrevent = new OverlayController({
+      ...withLocalTestConfig(),
+      preventsScroll: false,
+    });
+
+    const overlayControllerPreventsScroll = new OverlayController({
+      ...withLocalTestConfig(),
+      preventsScroll: true,
+    });
+
+    it('should not run with scroll prevention', async () => {
+      await overlayControllerNoPrevent.show();
+
+      expect(overlayControllerNoPrevent.__bodyMarginRightInline).to.equal(undefined);
+      expect(overlayControllerNoPrevent.__bodyMarginRight).to.equal(undefined);
+    });
+
+    it('should run with scroll prevention', async () => {
+      await overlayControllerPreventsScroll.show();
+
+      expect(overlayControllerPreventsScroll.__bodyMarginRightInline).to.not.equal(undefined);
+      expect(overlayControllerPreventsScroll.__bodyMarginRight).to.not.equal(undefined);
+    });
+  });
 });

package/components/select-rich/src/LionSelectRich.js

@@ -196,6 +196,18 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
       }
     }
 
+    if (changedProperties.has('singleOption')) {
+      if (this.singleOption) {
+        this._invokerNode.removeAttribute('role');
+        this._invokerNode.removeAttribute('aria-haspopup');
+        this._invokerNode.removeAttribute('aria-expanded');
+      } else {
+        this._invokerNode.setAttribute('role', 'button');
+        this._invokerNode.setAttribute('aria-haspopup', 'listbox');
+        this._invokerNode.setAttribute('aria-expanded', `${this.opened}`);
+      }
+    }
+
     if (this._inputNode && this._invokerNode) {
       if (changedProperties.has('_ariaLabelledNodes')) {
         this._invokerNode.setAttribute(

package/components/select-rich/test/lion-select-rich.test.js

@@ -148,6 +148,32 @@ describe('lion-select-rich', () => {
       expect(_invokerNode.hasAttribute('single-option')).to.be.true;
     });
 
+    it('sets and removes the button role and aria attributes on change of singleOption', async () => {
+      const el = await fixture(html`
+        <lion-select-rich>
+          <lion-option .choiceValue=${10}>Item 1</lion-option>
+          <lion-option .choiceValue=${20}>Item 2</lion-option>
+        </lion-select-rich>
+      `);
+      const { _invokerNode } = getSelectRichMembers(el);
+
+      expect(_invokerNode.hasAttribute('role')).to.be.true;
+      expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.true;
+      expect(_invokerNode.hasAttribute('aria-expanded')).to.be.true;
+
+      el.singleOption = true;
+      await el.updateComplete;
+      expect(_invokerNode.hasAttribute('role')).to.be.false;
+      expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.false;
+      expect(_invokerNode.hasAttribute('aria-expanded')).to.be.false;
+
+      el.singleOption = false;
+      await el.updateComplete;
+      expect(_invokerNode.hasAttribute('role')).to.be.true;
+      expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.true;
+      expect(_invokerNode.hasAttribute('aria-expanded')).to.be.true;
+    });
+
     it('updates the invoker when the selected element is the same but the modelValue was updated asynchronously', async () => {
       const tagString = defineCE(
         class LionCustomOption extends LionOption {