genesys-spark-components 4.0.0-beta.46 → 4.0.0-beta.48

package/dist/collection/components/stable/gux-modal/tests/gux-modal.e2e.js

@@ -8,11 +8,11 @@ describe('gux-modal', () => {
           <gux-modal lang="en" size="small">
             <div slot="title">Modal Title</div>
             <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
             </div>
-            <div slot="right-align-buttons">
-              <gux-button accent="primary">Accept</gux-button>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -23,11 +23,11 @@ describe('gux-modal', () => {
           <gux-modal lang="en" size="medium">
             <div slot="title">Modal Title</div>
             <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
             </div>
-            <div slot="right-align-buttons">
-              <gux-button accent="primary">Accept</gux-button>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -38,11 +38,11 @@ describe('gux-modal', () => {
           <gux-modal lang="en" size="large">
             <div slot="title">Modal Title</div>
             <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
             </div>
-            <div slot="right-align-buttons">
-              <gux-button accent="primary">Accept</gux-button>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -52,11 +52,11 @@ describe('gux-modal', () => {
         html: `
           <gux-modal lang="en" size="large">
             <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
             </div>
-            <div slot="right-align-buttons">
-              <gux-button accent="primary">Accept</gux-button>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -76,8 +76,8 @@ describe('gux-modal', () => {
           <gux-modal lang="en" size="small">
             <div slot="title">Modal Title</div>
             <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -88,8 +88,8 @@ describe('gux-modal', () => {
           <gux-modal lang="en" size="small">
             <div slot="title">Modal Title</div>
             <div slot="content">This contains the modal content.</div>
-            <div slot="right-align-buttons">
-              <gux-button accent="primary">Accept</gux-button>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -100,11 +100,11 @@ describe('gux-modal', () => {
           <gux-modal lang="en">
             <div slot="title">Modal Title</div>
             <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
             </div>
-            <div slot="right-align-buttons">
-              <gux-button accent="primary">Accept</gux-button>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -124,171 +124,156 @@ describe('gux-modal', () => {
   describe('dismiss', () => {
     it('click dismiss button', async () => {
       const html = `
-        <gux-modal lang="en" size="small">
+        <gux-button id="openModalButton" onclick="document.getElementById('example1').showModal()">
+          Open
+        </gux-button>
+        <gux-modal id="example1" lang="en" size="small">
           <div slot="title">Modal Title</div>
           <div slot="content">This contains the modal content.</div>
-          <div slot="left-align-buttons">
-              <gux-button>Cancel</gux-button>
+          <div slot="start-align-buttons">
+              <gux-button-slot><button>Cancel</button></gux-button-slot>
           </div>
-          <div slot="right-align-buttons">
-            <gux-button accent="primary">Accept</gux-button>
+          <div slot="end-align-buttons">
+            <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
           </div>
         </gux-modal>
       `;
       const page = await newSparkE2EPage({ html });
       const element = await page.find('gux-modal');
-      const dismissButtonElement = await element.find('pierce/gux-dismiss-button');
-      const dismissButton = await dismissButtonElement.find('pierce/button');
-      const guxdismissSpy = await page.spyOnEvent('guxdismiss');
-      const clickSpy = await page.spyOnEvent('click');
-      expect(guxdismissSpy).not.toHaveReceivedEvent();
-      expect(clickSpy).not.toHaveReceivedEvent();
-      expect(await page.find('gux-modal')).not.toBeNull();
-      await dismissButton.click();
+      const openModalButton = await page.find('#openModalButton');
+      await openModalButton.click();
       await page.waitForChanges();
-      expect(guxdismissSpy).toHaveReceivedEvent();
-      expect(clickSpy).not.toHaveReceivedEvent();
-      expect(await page.find('gux-modal')).toBeNull();
-    });
-    it('click dismiss button and prevent default', async () => {
-      const html = `
-        <gux-modal lang="en" size="small">
-          <div slot="title">Modal Title</div>
-          <div slot="content">This contains the modal content.</div>
-          <div slot="left-align-buttons">
-              <gux-button>Cancel</gux-button>
-          </div>
-          <div slot="right-align-buttons">
-            <gux-button accent="primary">Accept</gux-button>
-          </div>
-        </gux-modal>
-      `;
-      const page = await newSparkE2EPage({ html });
-      const element = await page.find('gux-modal');
       const dismissButtonElement = await element.find('pierce/gux-dismiss-button');
       const dismissButton = await dismissButtonElement.find('pierce/button');
       const guxdismissSpy = await page.spyOnEvent('guxdismiss');
       const clickSpy = await page.spyOnEvent('click');
-      await page.evaluate(() => {
-        document.addEventListener('guxdismiss', event => {
-          event.preventDefault();
-        });
-      });
-      expect(guxdismissSpy).not.toHaveReceivedEvent();
-      expect(clickSpy).not.toHaveReceivedEvent();
-      expect(await page.find('gux-modal')).not.toBeNull();
       await dismissButton.click();
       await page.waitForChanges();
       expect(guxdismissSpy).toHaveReceivedEvent();
-      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(clickSpy).toHaveReceivedEvent();
       expect(await page.find('gux-modal')).not.toBeNull();
     });
     it('escape key dismiss', async () => {
       const html = `
-        <gux-modal lang="en" size="small">
+        <gux-button id="openModalButton" onclick="document.getElementById('example1').showModal()">
+          Open
+        </gux-button>
+        <gux-modal id="example1" lang="en" size="small">
           <div slot="title">Modal Title</div>
           <div slot="content">This contains the modal content.</div>
-          <div slot="left-align-buttons">
-              <gux-button>Cancel</gux-button>
+          <div slot="start-align-buttons">
+              <gux-button-slot><button>Cancel</button></gux-button-slot>
           </div>
-          <div slot="right-align-buttons">
-            <gux-button accent="primary">Accept</gux-button>
+          <div slot="end-align-buttons">
+            <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
           </div>
         </gux-modal>
       `;
       const page = await newSparkE2EPage({ html });
-      const modalEl = await page.find('gux-modal');
+      const openModalButton = await page.find('#openModalButton');
+      await openModalButton.click();
+      await page.waitForChanges();
       const guxdismissSpy = await page.spyOnEvent('guxdismiss');
       expect(guxdismissSpy).not.toHaveReceivedEvent();
-      expect(modalEl).not.toBeNull();
+      await page.waitForSelector('pierce/dialog', {
+        visible: true
+      });
       await page.keyboard.down('Escape');
       await page.waitForChanges();
       expect(guxdismissSpy).toHaveReceivedEvent();
-      expect(await page.find('gux-modal')).toBeNull();
+      await page.waitForSelector('pierce/dialog', {
+        visible: false
+      });
     });
   });
   describe('focus', () => {
-    const focusModalHtml = (props = '') => `
-      <gux-modal lang="en" size="small" trap-focus="true" ${props}>
-        <div slot="title">Modal Title</div>
-        <div slot="content">This contains the modal content.</div>
-        <div slot="left-align-buttons">
-            <gux-button id="cancel-button">Cancel</gux-button>
-        </div>
-        <div slot="right-align-buttons">
-          <gux-button id="accept-button" accent="primary">Accept</gux-button>
-        </div>
-      </gux-modal>
-    `;
-    const modalContainerHtml = `
-      <div id="modal-container"></div>
-      <button id="other-button">Do Nothing</button>
-      <button id="modal-trigger">Open Modal</button>
-    `;
-    const setupContainerPage = async (modalHtml) => {
-      const page = await newSparkE2EPage({ html: modalContainerHtml });
-      await page.evaluate(html => {
-        var _a;
-        (_a = document
-          .getElementById('modal-trigger')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
-          if (document.getElementById('modal-container'))
-            document.getElementById('modal-container').innerHTML = html;
-        });
-      }, modalHtml);
-      return page;
-    };
     const getFocusedElementText = (page) => page.evaluate(() => document.activeElement.textContent);
     const getFocusedShadowElementText = (page) => page.evaluate(() => document.querySelector('gux-modal').shadowRoot.activeElement
       .textContent);
     const getFocusedShadowElementTagName = (page) => page.evaluate(() => document.querySelector('gux-modal').shadowRoot.activeElement.tagName);
-    it('focuses the dismiss button by defualt', async () => {
-      const page = await setupContainerPage(focusModalHtml());
-      await page.click('#modal-trigger');
+    it('focuses the dismiss button by default ', async () => {
+      const html = `
+        <gux-button id="openModalButton" onclick="document.getElementById('example1').showModal()">
+          Open
+        </gux-button>
+        <gux-modal id="example1" lang="en" size="small">
+          <div slot="title">Modal Title</div>
+          <div slot="content">This contains the modal content.</div>
+          <div slot="start-align-buttons">
+              <gux-button-slot><button>Cancel</button></gux-button-slot>
+          </div>
+          <div slot="end-align-buttons">
+            <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
+          </div>
+        </gux-modal>
+      `;
+      const page = await newSparkE2EPage({ html });
+      await page.click('#openModalButton');
       await page.waitForChanges();
-      expect(await page.find('gux-modal')).not.toBeNull();
+      await page.waitForSelector('pierce/dialog', {
+        visible: true
+      });
       expect(await getFocusedShadowElementText(page)).toBe('');
       expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
     });
     test('can focus a specific focusable element', async () => {
-      const page = await setupContainerPage(focusModalHtml('initial-focus="#accept-button"'));
-      await page.click('#modal-trigger');
+      const html = `
+        <gux-button id="openModalButton" onclick="document.getElementById('example1').showModal()">
+          Open
+        </gux-button>
+        <gux-modal id="example1" lang="en" size="small">
+          <div slot="title">Modal Title</div>
+          <div slot="content">This contains the modal content.</div>
+          <div slot="start-align-buttons">
+              <gux-button-slot><button>Cancel</button></gux-button-slot>
+          </div>
+          <div slot="end-align-buttons">
+            <gux-button-slot accent="primary"><button autofocus>Accept</button></gux-button-slot>
+          </div>
+        </gux-modal>
+      `;
+      const page = await newSparkE2EPage({ html });
+      await page.click('#openModalButton');
       await page.waitForChanges();
-      expect(await page.find('gux-modal')).not.toBeNull();
+      await page.waitForSelector('pierce/dialog', {
+        visible: true
+      });
       expect(await getFocusedElementText(page)).toBe('Accept');
     });
     test('focuses the dismiss button if there are no other focusable elements', async () => {
-      const page = await setupContainerPage(`
-        <gux-modal lang="en" size="small">
+      const html = `
+        <gux-button id="openModalButton" onclick="document.getElementById('example1').showModal()">
+          Open
+        </gux-button>
+        <gux-modal id="example1" lang="en" size="small">
           <div slot="content">This contains the modal content.</div>
         </gux-modal>
-      `);
-      await page.click('#modal-trigger');
-      await page.waitForChanges();
-      expect(await page.find('gux-modal')).not.toBeNull();
-      expect(await getFocusedShadowElementText(page)).toBe('');
-      expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
-    });
-    test('traps focus in the modal', async () => {
-      const page = await setupContainerPage(focusModalHtml());
-      await page.click('#modal-trigger');
+      `;
+      const page = await newSparkE2EPage({ html });
+      await page.click('#openModalButton');
       await page.waitForChanges();
-      expect(await getFocusedShadowElementText(page)).toBe('');
-      expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
-      await page.keyboard.press('Tab');
-      expect(await getFocusedElementText(page)).toBe('Cancel');
-      await page.keyboard.press('Tab');
-      expect(await getFocusedElementText(page)).toBe('Accept');
-      await page.keyboard.press('Tab');
-      expect(await getFocusedShadowElementText(page)).toBe('');
-      expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
-      await page.keyboard.down('Shift');
-      await page.keyboard.press('Tab');
+      await page.waitForSelector('pierce/dialog', {
+        visible: true
+      });
       expect(await getFocusedShadowElementText(page)).toBe('');
       expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
     });
     test('returns focus to the originally focused element when the modal closes', async () => {
-      const page = await setupContainerPage(focusModalHtml());
-      await page.click('#modal-trigger');
+      const html = `
+        <gux-button id="openModalButton" onclick="document.getElementById('example1').showModal()">Open Modal</gux-button>
+        <gux-modal id="example1" lang="en" size="small">
+          <div slot="title">Modal Title</div>
+          <div slot="content">This contains the modal content.</div>
+          <div slot="start-align-buttons">
+              <gux-button-slot><button>Cancel</button></gux-button-slot>
+          </div>
+          <div slot="end-align-buttons">
+            <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
+          </div>
+        </gux-modal>
+      `;
+      const page = await newSparkE2EPage({ html });
+      await page.click('#openModalButton');
       await page.waitForChanges();
       expect(await getFocusedShadowElementText(page)).toBe('');
       expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');

package/dist/collection/components/stable/gux-modal/tests/gux-modal.spec.js

@@ -1,7 +1,7 @@
 import { newSpecPage } from "../../../../test/specTestUtils";
 import { GuxButton } from "../../gux-button/gux-button";
 import { GuxModal } from "../gux-modal";
-import { GuxDismissButton } from "../../../stable/gux-dismiss-button/gux-dismiss-button";
+import { GuxDismissButton } from "../../gux-dismiss-button/gux-dismiss-button";
 const components = [GuxButton, GuxModal, GuxDismissButton];
 const language = 'en';
 describe('gux-modal', () => {
@@ -13,11 +13,11 @@ describe('gux-modal', () => {
           <gux-modal size="small">
             <div slot="title">Modal Title</div>
             <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
             </div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent='primary'><button>Accept</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -28,11 +28,11 @@ describe('gux-modal', () => {
           <gux-modal size="medium">
             <div slot="title">Modal Title</div>
             <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
             </div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent='primary'><button>Accept</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -43,11 +43,11 @@ describe('gux-modal', () => {
           <gux-modal size="large">
             <div slot="title">Modal Title</div>
             <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
             </div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent='primary'><button>Accept</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -57,11 +57,11 @@ describe('gux-modal', () => {
         html: `
           <gux-modal size="large">
             <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
             </div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent='primary'><button>Accept</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -81,8 +81,8 @@ describe('gux-modal', () => {
           <gux-modal size="small">
             <div slot="title">Modal Title</div>
             <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -93,8 +93,8 @@ describe('gux-modal', () => {
           <gux-modal size="small">
             <div slot="title">Modal Title</div>
             <div slot="content">This contains the modal content.</div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent='primary'><button>Accept</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -105,11 +105,11 @@ describe('gux-modal', () => {
           <gux-modal initial-focus="#cancelButton">
             <div slot="title">Modal Title</div>
             <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
+            <div slot="start-align-buttons">
                 <gux-button id="cancelButton">Cancel</gux-button>
             </div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent='primary'><button>Accept</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -120,11 +120,11 @@ describe('gux-modal', () => {
           <gux-modal>
             <div slot="title">Modal Title</div>
             <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
             </div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent='primary'><button>Accept</button></gux-button-slot>
             </div>
           </gux-modal>
         `
@@ -134,67 +134,7 @@ describe('gux-modal', () => {
         const page = await newSpecPage({ components, html, language });
         expect(page.rootInstance).toBeInstanceOf(GuxModal);
         expect(page.root).toMatchSnapshot();
-        page.rootInstance.hidden = true;
-        await page.waitForChanges();
-        expect(page.root).toMatchSnapshot();
-        // Disconnect so that the focus trap is properly cleaned up
-        page.root.remove();
-      });
-    });
-  });
-  describe('dismiss', () => {
-    it('click dismiss button', async () => {
-      const html = `
-        <gux-modal size="small">
-          <div slot="title">Modal Title</div>
-          <div slot="content">This contains the modal content.</div>
-          <div slot="left-align-buttons">
-              <gux-button>Cancel</gux-button>
-          </div>
-          <div slot="right-align-buttons">
-            <gux-button accent='primary'>Accept</gux-button>
-          </div>
-        </gux-modal>
-      `;
-      const page = await newSpecPage({ components, html, language });
-      const element = page.root;
-      const dismissButton = page.root.shadowRoot.querySelector('gux-dismiss-button');
-      const guxdismissSpy = jest.fn();
-      const clickSpy = jest.fn();
-      const elementRemoveSpy = jest.spyOn(element, 'remove');
-      page.win.addEventListener('guxdismiss', guxdismissSpy);
-      page.win.addEventListener('click', clickSpy);
-      dismissButton.click();
-      await page.waitForChanges();
-      expect(guxdismissSpy).toHaveBeenCalled();
-      expect(clickSpy).not.toHaveBeenCalled();
-      expect(elementRemoveSpy).toBeCalledWith();
-      page.root.remove();
-    });
-    it('click dismiss button and prevent default', async () => {
-      const html = `
-        <gux-modal size="small">
-          <div slot="title">Modal Title</div>
-          <div slot="content">This contains the modal content.</div>
-          <div slot="left-align-buttons">
-              <gux-button>Cancel</gux-button>
-          </div>
-          <div slot="right-align-buttons">
-            <gux-button accent='primary'>Accept</gux-button>
-          </div>
-        </gux-modal>
-      `;
-      const page = await newSpecPage({ components, html, language });
-      const element = page.root;
-      const dismissButton = page.root.shadowRoot.querySelector('gux-dismiss-button');
-      const elementRemoveSpy = jest.spyOn(element, 'remove');
-      page.win.addEventListener('guxdismiss', (event) => {
-        event.preventDefault();
       });
-      dismissButton.click();
-      await page.waitForChanges();
-      expect(elementRemoveSpy).not.toBeCalled();
-      page.root.remove();
     });
   });
 });

package/dist/collection/components/stable/gux-popup/tests/gux-popup.e2e.js

@@ -1,4 +1,16 @@
 import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+const axeExclusions = [
+  {
+    issueId: 'aria-required-children',
+    target: 'gux-list',
+    exclusionReason: 'To be addressed in COMUI-2391. New violation picked up after upgrading from axe-core v4.4.2 to v4.8.2'
+  },
+  {
+    issueId: 'color-contrast',
+    target: 'gux-button,.gux-secondary',
+    exclusionReason: 'To be addressed in COMUI-2391. New violation picked up after upgrading from axe-core v4.4.2 to v4.8.2'
+  }
+];
 function getGuxPopupHtml(expanded, disabled) {
   return `
   <gux-popup ${expanded ? 'expanded' : ''} ${disabled ? 'disabled' : ''}>
@@ -22,7 +34,7 @@ describe('gux-popup', () => {
       const html = getGuxPopupHtml(expanded, disabled);
       const page = await newSparkE2EPage({ html });
       const element = await page.find('gux-popup');
-      await a11yCheck(page);
+      await a11yCheck(page, axeExclusions);
       expect(element.outerHTML).toMatchSnapshot();
     });
   });

package/dist/collection/components/stable/gux-table/gux-all-row-select/gux-all-row-select.css

@@ -1,8 +1,5 @@
-:host .gux-label-text {
-  position: absolute;
-  top: auto;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
+:host {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }

package/dist/collection/components/stable/gux-table/gux-all-row-select/gux-all-row-select.js

@@ -19,7 +19,7 @@ export class GuxAllRowSelect {
     this.i18n = await buildI18nForComponent(this.root, tableResources, 'gux-table');
   }
   render() {
-    return (h("gux-form-field-checkbox", null, h("input", { ref: el => (this.inputElement = el), slot: "input", id: this.id, type: "checkbox", checked: this.selected }), h("label", { slot: "label", htmlFor: this.id }, "\u200B", h("span", { class: "gux-label-text" }, this.i18n('selectAllTableRows')))));
+    return (h("gux-form-field-checkbox", { "label-position": "screenreader" }, h("input", { ref: el => (this.inputElement = el), slot: "input", id: this.id, type: "checkbox", checked: this.selected }), h("label", { slot: "label", htmlFor: this.id }, "\u200B", h("span", null, this.i18n('selectAllTableRows')))));
   }
   static get is() { return "gux-all-row-select"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-table/gux-row-select/gux-row-select.css

@@ -1,8 +1,5 @@
-:host .gux-label-text {
-  position: absolute;
-  top: auto;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
+:host {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }

package/dist/collection/components/stable/gux-table/gux-row-select/gux-row-select.js

@@ -16,7 +16,7 @@ export class GuxRowSelect {
     this.i18n = await buildI18nForComponent(this.root, tableResources, 'gux-table');
   }
   render() {
-    return (h("gux-form-field-checkbox", null, h("input", { ref: el => (this.inputElement = el), slot: "input", id: this.id, type: "checkbox", checked: this.selected, disabled: this.disabled }), h("label", { slot: "label", htmlFor: this.id }, "\u200B", h("span", { class: "gux-label-text" }, this.i18n('selectTableRow')))));
+    return (h("gux-form-field-checkbox", { "label-position": "screenreader" }, h("input", { ref: el => (this.inputElement = el), slot: "input", id: this.id, type: "checkbox", checked: this.selected, disabled: this.disabled }), h("label", { slot: "label", htmlFor: this.id }, "\u200B", h("span", null, this.i18n('selectTableRow')))));
   }
   static get is() { return "gux-row-select"; }
   static get encapsulation() { return "shadow"; }