@lion/ui 0.7.6 → 0.7.7

package/README.md

@@ -47,8 +47,7 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 - **Modern Code:** Lion is distributes as pure es modules.
 - **Exposes functions/classes and Web Components:** Ships a functionality in it's most appropriate form.
 
-> Note: Our demos may look a little bland but that is on purpose. They only come with functional stylings.
-> This makes sense as the main use case is to extend those components and if you do you do not want to override existing stylings.
+> Note: Our demo examples might look simple and not very stylish. This is on purpose. They are designed to be basic so you can easily add your own styles to them to match your intended design, without dealing with styles that are already there.
 
 <p align="center">
   <a href="https://lion-web.netlify.app/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>

package/components/button/test-suites/LionButton.suite.js

@@ -52,7 +52,9 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
 
     describe('Active', () => {
       it('updates "active" attribute on host when mousedown/mouseup on button', async () => {
-        const el = /** @type {LionButton} */ (await fixture(html`<${tagButton}>foo</${tagButton}`));
+        const el = /** @type {LionButton} */ (
+          await fixture(html`<${tagButton}>foo</${tagButton}>`)
+        );
         el.dispatchEvent(new Event('mousedown'));
 
         expect(el.active).to.be.true;

package/components/combobox/src/LionCombobox.js

@@ -22,6 +22,7 @@ const matchA11ySpanReverseFns = new WeakMap();
  * @typedef {import('@lion/ui/types/form-core.js').ChoiceInputHost} ChoiceInputHost
  * @typedef {import('@lion/ui/types/form-core.js').FormControlHost} FormControlHost
  * @typedef {import('../types/SelectionDisplay.js').SelectionDisplay} SelectionDisplay
+ * @typedef {LionOption & { onFilterUnmatch?:function; onFilterMatch?:function }} OptionWithFilterFn
  */
 
 /**
@@ -201,8 +202,30 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
 
   reset() {
     super.reset();
-    // @ts-ignore _initialModelValue comes from ListboxMixin
-    this.value = this._initialModelValue;
+    if (!this.multipleChoice) {
+      // @ts-ignore _initialModelValue comes from ListboxMixin
+      this.value = this._initialModelValue;
+    }
+    this._resetListboxOptions();
+  }
+
+  /**
+   * @protected
+   */
+  _resetListboxOptions() {
+    this.formElements.forEach((/** @type {OptionWithFilterFn} */ option, idx) => {
+      this._unhighlightMatchedOption(option);
+      if (!this.showAllOnEmpty || !this.opened) {
+        // eslint-disable-next-line no-param-reassign
+        option.style.display = 'none';
+      } else {
+        // eslint-disable-next-line no-param-reassign
+        option.style.display = '';
+        option.setAttribute('aria-posinset', `${idx + 1}`);
+        option.setAttribute('aria-setsize', `${this.formElements.length}`);
+        option.removeAttribute('aria-hidden');
+      }
+    });
   }
 
   /**
@@ -704,11 +727,13 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    */
   _listboxOnClick(ev) {
     super._listboxOnClick(ev);
-
     this._inputNode.focus();
     if (!this.multipleChoice) {
       this.activeIndex = -1;
       this.opened = false;
+    } else {
+      this._inputNode.value = '';
+      this._resetListboxOptions();
     }
   }
 
@@ -897,7 +922,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     const autoselect = this._autoSelectCondition();
     const noFilter = this.autocomplete === 'inline' || this.autocomplete === 'none';
 
-    /** @typedef {LionOption & { onFilterUnmatch?:function, onFilterMatch?:function }} OptionWithFilterFn */
     this.formElements.forEach((/** @type {OptionWithFilterFn} */ option, i) => {
       // [1]. Decide whether option should be shown
       const matches = this.matchCondition(option, curValue);
@@ -983,7 +1007,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
 
     // [8]. These values will help computing autofill intentions next autocomplete cycle
     this.__prevCboxValueNonSelected = curValue;
-    // See test 'computation of "user intends autofill" works correctly afer autofill'
+    // See test 'computation of "user intends autofill" works correctly after autofill'
     this.__prevCboxValue = this._inputNode.value;
     this.__hadSelectionLastAutofill =
       this._inputNode.value.length !== this._inputNode.selectionStart;
@@ -1120,16 +1144,16 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
           ev.preventDefault();
 
           this.modelValue = this.parser([...this.modelValue, this._inputNode.value]);
-
           this._inputNode.value = '';
           this.opened = false;
         } else {
           super._listboxOnKeyDown(ev);
-          // TODO: should we clear the input value here when allowCustomChoice is false?
-          // For now, we don't...
+          this._resetListboxOptions();
         }
         if (!this.multipleChoice) {
           this.opened = false;
+        } else {
+          this._inputNode.value = '';
         }
         break;
       default: {
@@ -1168,7 +1192,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
         .filter(option => diff.includes(option.choiceValue))
         .map(option => this._getTextboxValueFromOption(option))
         .join(' ');
-      this._setTextboxValue(newValue); // or last selected value?
+      this._setTextboxValue(newValue);
     }
   }
 

package/components/combobox/test/lion-combobox.test.js

@@ -81,6 +81,54 @@ describe('lion-combobox', () => {
       await performChecks();
     });
 
+    it('hides all options on reset()', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const options = el.formElements;
+      const visibleOptions = () => options.filter(o => o.style.display !== 'none');
+
+      mimicUserTyping(el, 'cha');
+      await el.updateComplete;
+      expect(visibleOptions().length).to.equal(1);
+      el.reset();
+      await el.updateComplete;
+      expect(visibleOptions().length).to.equal(0);
+    });
+
+    it('shows all options on reset() when showAllOnEmpty is set to true and overlay was open', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" show-all-on-empty>
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const options = el.formElements;
+      const visibleOptions = () => options.filter(o => o.getAttribute('aria-hidden') !== 'true');
+
+      mimicUserTyping(el, 'cha');
+      await el.updateComplete;
+      expect(visibleOptions().length).to.equal(1);
+      expect(el.opened).to.be.true;
+
+      el.reset();
+      await el.updateComplete;
+      expect(visibleOptions().length).to.equal(4);
+    });
+
     it('hides listbox on click/enter (when multiple-choice is false)', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -467,13 +515,12 @@ describe('lion-combobox', () => {
       mimicUserTyping(el, 'a');
       await el.updateComplete;
 
-      const visibleOptions = options.filter(o => o.style.display !== 'none');
-      expect(visibleOptions.length).to.equal(3, 'after input');
+      const visibleOptions = () => options.filter(o => o.style.display !== 'none');
+      expect(visibleOptions().length).to.equal(3, 'after input');
 
       el.clear();
       await el.updateComplete;
-      const visibleOptions2 = options.filter(o => o.style.display !== 'none');
-      expect(visibleOptions2.length).to.equal(0, 'after clear');
+      expect(visibleOptions().length).to.equal(0, 'after clear');
     });
 
     it('resets modelValue and textbox value on reset()', async () => {
@@ -508,7 +555,7 @@ describe('lion-combobox', () => {
       el2.reset();
       expect(el2.modelValue).to.deep.equal(['Artichoke']);
       // @ts-ignore [allow-protected] in test
-      expect(el2._inputNode.value).to.equal('Artichoke');
+      expect(el2._inputNode.value).to.equal('');
     });
 
     it('syncs textbox to modelValue', async () => {
@@ -735,7 +782,7 @@ describe('lion-combobox', () => {
       await el.updateComplete;
     });
 
-    it('allows manyu custom selections when multi-choice when requireOptionMatch is false', async () => {
+    it('allows many custom selections when multi-choice when requireOptionMatch is false', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
           <lion-combobox
@@ -2088,7 +2135,7 @@ describe('lion-combobox', () => {
       });
     });
 
-    it('highlights first occcurence of matching option', async () => {
+    it('highlights first occurrence of matching option', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
           <lion-combobox name="foo" match-mode="all">
@@ -2170,6 +2217,28 @@ describe('lion-combobox', () => {
       );
     });
 
+    it('resets removes highlights on reset()', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" match-mode="all">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+      const options = el.formElements;
+
+      mimicUserTyping(/** @type {LionCombobox} */ (el), 'c');
+
+      await el.updateComplete;
+      expect(options[0]).lightDom.to.equal(`<span aria-label="Artichoke">Arti<b>c</b>hoke</span>`);
+      el.reset();
+      await el.updateComplete;
+      expect(options[0]).lightDom.to.equal(`Artichoke`);
+    });
+
     it('synchronizes textbox when autocomplete is "inline" or "both"', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -3018,6 +3087,64 @@ describe('lion-combobox', () => {
       expect(el.opened).to.equal(true);
     });
 
+    it('clears textbox after selection of a new item on [enter]', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" multiple-choice>
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const { _inputNode } = getComboboxMembers(el);
+      const options = el.formElements;
+
+      mimicUserTyping(el, 'art');
+      await el.updateComplete;
+
+      expect(el.opened).to.equal(true);
+      const visibleOptions = () => options.filter(o => o.style.display !== 'none');
+      expect(visibleOptions().length).to.equal(1);
+
+      // N.B. we do only trigger keydown here (and not mimicKeypress (both keyup and down)),
+      // because this closely mimics what happens in the browser
+      _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      expect(el.opened).to.equal(true);
+      expect(visibleOptions().length).to.equal(0);
+      expect(_inputNode.value).to.equal('');
+    });
+
+    it('clears textbox after selection of a new item on click', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" multiple-choice>
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const { _inputNode } = getComboboxMembers(el);
+      const options = el.formElements;
+
+      mimicUserTyping(el, 'art');
+      await el.updateComplete;
+
+      expect(el.opened).to.equal(true);
+      const visibleOptions = () => options.filter(o => o.style.display !== 'none');
+      expect(visibleOptions().length).to.equal(1);
+
+      visibleOptions()[0].click();
+      expect(el.opened).to.equal(true);
+      expect(visibleOptions().length).to.equal(0);
+      expect(_inputNode.value).to.equal('');
+    });
+
     it('submits form on [Enter] when listbox is closed', async () => {
       const submitSpy = sinon.spy(e => e.preventDefault());
       const el = /** @type {HTMLFormElement}  */ (

package/components/dialog/test/lion-dialog.test.js

@@ -1,5 +1,5 @@
 /* eslint-disable lit-a11y/no-autofocus */
-import { expect, fixture as _fixture, html, unsafeStatic } from '@open-wc/testing';
+import { expect, fixture as _fixture, html, unsafeStatic, aTimeout } from '@open-wc/testing';
 import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js';
 import '@lion/ui/define/lion-dialog.js';
 
@@ -127,5 +127,63 @@ describe('lion-dialog', () => {
       invokerNode.click();
       expect(document.activeElement).to.equal(invokerNode);
     });
+
+    it('opened-changed event should send detail object with opened state', async () => {
+      const el = /** @type {LionDialog} */ await fixture(html`
+        <lion-dialog .config=${{ trapsKeyboardFocus: false }}>
+          <button slot="invoker">invoker button</button>
+          <div slot="content">
+            <label for="myInput">Label</label>
+            <input id="myInput" autofocus />
+          </div>
+        </lion-dialog>
+      `);
+
+      el.setAttribute('opened', '');
+      expect(el.opened).to.be.true;
+
+      el.addEventListener('opened-changed', e => {
+        // @ts-expect-error [allow-detail-since-custom-event]
+        expect(e.detail.opened).to.be.false;
+      });
+      el.removeAttribute('opened');
+    });
+
+    it("opened-changed event's target should point to lion-dialog", async () => {
+      const el = /** @type {LionDialog} */ await fixture(html`
+        <lion-dialog .config=${{ trapsKeyboardFocus: false }}>
+          <button slot="invoker">invoker button</button>
+          <div slot="content">
+            <label for="myInput">Label</label>
+            <input id="myInput" autofocus />
+          </div>
+        </lion-dialog>
+      `);
+
+      el.addEventListener('opened-changed', e => {
+        expect(e.target).to.equal(el);
+      });
+      el.setAttribute('opened', '');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('does not add [aria-expanded] to invoker button', async () => {
+      const el = await fixture(
+        html` <lion-dialog>
+          <div slot="content" class="dialog">Hey there</div>
+          <button slot="invoker">Popup button</button>
+        </lion-dialog>`,
+      );
+      const invokerButton = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+
+      expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
+      await invokerButton.click();
+      await aTimeout(0);
+      expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
+      await invokerButton.click();
+      await aTimeout(0);
+      expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
+    });
   });
 });

package/components/input-datepicker/test/lion-input-datepicker.test.js

@@ -495,11 +495,11 @@ describe('<lion-input-datepicker>', () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(el);
 
-      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false');
+      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null);
       await elObj.openCalendar();
-      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('true');
+      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null);
       await elObj.closeCalendar();
-      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false');
+      expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null);
     });
 
     it('is accessible when closed', async () => {

package/components/input-file/src/FileHandle.js

@@ -53,7 +53,7 @@ export class FileHandle {
    */
   // eslint-disable-next-line class-methods-use-this
   _getFileNameExtension(fileName) {
-    return fileName.slice(fileName.lastIndexOf('.') + 1);
+    return fileName.slice(fileName.lastIndexOf('.'));
   }
 
   // TODO: seems to suggest upload is going on...

package/components/input-file/src/LionInputFile.js

@@ -232,7 +232,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     /** @type {string[]} */
     let allowedFileExtensions = [];
     if (this.accept) {
-      const acceptedFiles = this.accept.replace(/\s+/g, '').replace(/\.+/g, '').split(',');
+      const acceptedFiles = this.accept.replace(/\s+/g, '').split(',');
       allowedFileTypes = acceptedFiles.filter(acceptedFile => acceptedFile.includes('/'));
       allowedFileExtensions = acceptedFiles.filter(acceptedFile => !acceptedFile.includes('/'));
     }
@@ -692,8 +692,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
 
     if (allowedFileExtensions.length) {
       array = allowedFileExtensions;
-      // eslint-disable-next-line no-return-assign
-      array = array.map(item => (item = `.${item}`));
       lastItem = array.pop();
       arrayLength = array.length;
     } else if (allowedFileTypes.length) {

package/components/input-file/test/lion-input-file.test.js

@@ -158,6 +158,17 @@ describe('lion-input-file', () => {
       })
     );
 
+    it('error should not be there when the file extensions are accepted', async () => {
+      const el = await fixture(html`
+        <lion-input-file label="Select" accept=".txt"></lion-input-file>
+      `);
+
+      mimicSelectFile(el, [fileWrongType]);
+      await el.updateComplete;
+
+      expect(el.hasFeedbackFor.length).to.equal(0);
+    });
+
     it('should not be added to the selected list', async () => {
       const el = await fixture(html`
         <lion-input-file label="Select" accept="text/plain"></lion-input-file>
@@ -343,20 +354,6 @@ describe('lion-input-file', () => {
         expect(error.message).to.equal('Please select a .jpg, .png or .pdf file with max 500MB.');
       });
     });
-
-    it('error message should add all file extensions to the validator message also works without dots "."', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept="jpg, png, pdf"></lion-input-file>
-      `);
-
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach(error => {
-        expect(error.message).to.equal('Please select a .jpg, .png or .pdf file with max 500MB.');
-      });
-    });
   });
 
   describe('invalid file sizes', async () => {

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 {