@lion/ui 0.7.1 → 0.7.3

package/components/progress-indicator/test/lion-progress-indicator.test.js

@@ -24,9 +24,9 @@ describe('lion-progress-indicator', () => {
     });
 
     it('can override a label with "aria-label"', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator aria-label="foo"></lion-progress-indicator>
+      `);
       await el.localizeNamespacesLoaded;
       expect(el.getAttribute('aria-label')).to.equal('foo');
       el.setAttribute('aria-label', 'bar');
@@ -37,9 +37,9 @@ describe('lion-progress-indicator', () => {
     });
 
     it('can override a label with "aria-labelledby"', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator>
+      `);
       await el.localizeNamespacesLoaded;
       expect(el.getAttribute('aria-labelledby')).to.equal('foo-id');
       expect(el.hasAttribute('aria-label')).to.be.false;
@@ -62,9 +62,9 @@ describe('lion-progress-indicator', () => {
     });
 
     it('keeps own aria-label when switch to determinate state', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator aria-label="foo"></lion-progress-indicator>
+      `);
       expect(el.getAttribute('aria-label')).to.equal('foo');
       el.setAttribute('value', '30');
       await el.updateComplete;
@@ -74,16 +74,16 @@ describe('lion-progress-indicator', () => {
 
   describe('determinate', async () => {
     it('is determinate when it has a value', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
+      `);
       expect(el.indeterminate).to.be.false;
     });
 
     it('can update value', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
+      `);
       expect(el.getAttribute('aria-valuenow')).to.equal('25');
       el.value = 30;
       await el.updateComplete;
@@ -91,9 +91,9 @@ describe('lion-progress-indicator', () => {
     });
 
     it('can update min', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
+      `);
       expect(el.getAttribute('aria-valuemin')).to.equal('0');
       el.min = 30;
       await el.updateComplete;
@@ -101,9 +101,9 @@ describe('lion-progress-indicator', () => {
     });
 
     it('can update max', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
+      `);
       expect(el.getAttribute('aria-valuemax')).to.equal('100');
       el.max = 70;
       await el.updateComplete;
@@ -111,9 +111,9 @@ describe('lion-progress-indicator', () => {
     });
 
     it('min & max limits value', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator>
+      `);
       // sets to default max: 100
       expect(el.getAttribute('aria-valuenow')).to.equal('100');
       el.value = -20;
@@ -124,14 +124,12 @@ describe('lion-progress-indicator', () => {
 
     // TODO make this feature available
     it.skip('supports valuetext', async () => {
-      const el = await fixture(
-        html`
-          <lion-progress-indicator
-            value="8"
-            value-text="{value}% (34 minutes) remaining"
-          ></lion-progress-indicator>
-        `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator
+          value="8"
+          value-text="{value}% (34 minutes) remaining"
+        ></lion-progress-indicator>
+      `);
       expect(el.getAttribute('aria-valuetext')).to.equal('8% (34 minutes) remaining');
     });
 
@@ -179,11 +177,9 @@ describe('lion-progress-indicator', () => {
 
   describe('Subclasers', () => {
     it('can use _progressPercentage getter to get the progress percentage', async () => {
-      const el = await fixture(
-        html`
-          <lion-progress-indicator max="50" value="10" aria-label="foo"></lion-progress-indicator>
-        `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator max="50" value="10" aria-label="foo"></lion-progress-indicator>
+      `);
       expect(el._progressPercentage).to.equal(20);
     });
   });
@@ -203,23 +199,23 @@ describe('lion-progress-indicator', () => {
 
     describe('determinate', () => {
       it('passes a11y test', async () => {
-        const el = await fixture(
-          html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
-        );
+        const el = await fixture(html`
+          <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
+        `);
         await expect(el).to.be.accessible();
       });
 
       it('once value is set', async () => {
-        const el = await fixture(
-          html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
-        );
+        const el = await fixture(html`
+          <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
+        `);
         expect(el.getAttribute('aria-valuenow')).to.equal('25');
       });
 
       it('allows to set min & max values', async () => {
-        const el = await fixture(
-          html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
-        );
+        const el = await fixture(html`
+          <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
+        `);
         expect(el.getAttribute('aria-valuemin')).to.equal('0');
         expect(el.getAttribute('aria-valuemax')).to.equal('100');
       });

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

@@ -541,6 +541,9 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     switch (key) {
       case 'Tab':
         // Tab can only be caught in keydown
+        if (this._overlayCtrl.config.trapsKeyboardFocus === true) {
+          return;
+        }
         this.opened = false;
         break;
       case 'Escape':

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

@@ -444,9 +444,9 @@ describe('lion-select-rich', () => {
     });
 
     it('adds focus to element with [role=listbox] when trapsKeyboardFocus is true', async () => {
-      const el = await fixture(
-        html` <lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich> `,
-      );
+      const el = await fixture(html`
+        <lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich>
+      `);
       const { _listboxNode } = getSelectRichMembers(el);
       expect(document.activeElement).to.not.equal(_listboxNode);
 
@@ -501,6 +501,16 @@ describe('lion-select-rich', () => {
       _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
       expect(el.opened).to.be.false;
     });
+
+    it('does not close the listbox with [Tab] key once opened when trapsKeyboardFocus is true', async () => {
+      const el = await fixture(html`
+        <lion-select-rich opened .config=${{ trapsKeyboardFocus: true }}> </lion-select-rich>
+      `);
+      // tab can only be caught via keydown
+      const { _listboxNode } = getSelectRichMembers(el);
+      _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+      expect(el.opened).to.be.true;
+    });
   });
 
   describe('Mouse navigation', () => {

package/components/steps/test/lion-step.test.js

@@ -50,13 +50,11 @@ describe('lion-step', () => {
   });
 
   it('is hidden when attribute hidden is true', async () => {
-    const el = await fixture(
-      html`
-        <fake-lion-steps>
-          <lion-step hidden>Step 1</lion-step>
-        </fake-lion-steps>
-      `,
-    );
+    const el = await fixture(html`
+      <fake-lion-steps>
+        <lion-step hidden>Step 1</lion-step>
+      </fake-lion-steps>
+    `);
     expect(el.children[0]).not.to.be.displayed;
   });
 

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

@@ -160,13 +160,11 @@ describe('lion-switch', () => {
   it('should not propagate the "checked-changed" event further up when caught by switch', async () => {
     const handlerSpy = sinon.spy();
     const parentHandlerSpy = sinon.spy();
-    const el = await fixture(
-      html`
-        <div @checked-changed=${parentHandlerSpy}>
-          <lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch>
-        </div>
-      `,
-    );
+    const el = await fixture(html`
+      <div @checked-changed=${parentHandlerSpy}>
+        <lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch>
+      </div>
+    `);
     const switchEl = /** @type {LionSwitch} */ (el.firstElementChild);
     switchEl.checked = true;
     await switchEl.updateComplete;