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

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

@@ -0,0 +1,301 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-modal-legacy', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render small modal',
+        html: `
+          <gux-modal-legacy 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-legacy>
+        `
+      },
+      {
+        description: 'should render medium modal',
+        html: `
+          <gux-modal-legacy 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>
+            <div slot="right-align-buttons">
+              <gux-button accent="primary">Accept</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+      },
+      {
+        description: 'should render large modal',
+        html: `
+          <gux-modal-legacy 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>
+            <div slot="right-align-buttons">
+              <gux-button accent="primary">Accept</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+      },
+      {
+        description: 'should render modal without a title',
+        html: `
+          <gux-modal-legacy lang="en" size="large">
+            <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-legacy>
+        `
+      },
+      {
+        description: 'should render modal without buttons',
+        html: `
+          <gux-modal-legacy lang="en" size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+          </gux-modal-legacy>
+        `
+      },
+      {
+        description: 'should render modal with just left align buttons',
+        html: `
+          <gux-modal-legacy 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>
+          </gux-modal-legacy>
+        `
+      },
+      {
+        description: 'should render modal with just right align buttons',
+        html: `
+          <gux-modal-legacy 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>
+          </gux-modal-legacy>
+        `
+      },
+      {
+        description: 'should render small modal by default',
+        html: `
+          <gux-modal-legacy 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>
+            <div slot="right-align-buttons">
+              <gux-button accent="primary">Accept</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-modal-legacy');
+        expect(element.outerHTML).toMatchSnapshot();
+        element.setAttribute('hidden', true);
+        await page.waitForChanges();
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('dismiss', () => {
+    it('click dismiss button', async () => {
+      const html = `
+        <gux-modal-legacy 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-legacy>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-modal-legacy');
+      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-legacy')).not.toBeNull();
+      await dismissButton.click();
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-modal-legacy')).toBeNull();
+    });
+    it('click dismiss button and prevent default', async () => {
+      const html = `
+        <gux-modal-legacy 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-legacy>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-modal-legacy');
+      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-legacy')).not.toBeNull();
+      await dismissButton.click();
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-modal-legacy')).not.toBeNull();
+    });
+    it('escape key dismiss', async () => {
+      const html = `
+        <gux-modal-legacy 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-legacy>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const modalEl = await page.find('gux-modal-legacy');
+      const guxdismissSpy = await page.spyOnEvent('guxdismiss');
+      expect(guxdismissSpy).not.toHaveReceivedEvent();
+      expect(modalEl).not.toBeNull();
+      await page.keyboard.down('Escape');
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      expect(await page.find('gux-modal-legacy')).toBeNull();
+    });
+  });
+  describe('focus', () => {
+    const focusModalHtml = (props = '') => `
+      <gux-modal-legacy 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-legacy>
+    `;
+    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-legacy').shadowRoot.activeElement
+      .textContent);
+    const getFocusedShadowElementTagName = (page) => page.evaluate(() => document.querySelector('gux-modal-legacy').shadowRoot.activeElement
+      .tagName);
+    it('focuses the dismiss button by defualt', async () => {
+      const page = await setupContainerPage(focusModalHtml());
+      await page.click('#modal-trigger');
+      await page.waitForChanges();
+      expect(await page.find('gux-modal-legacy')).not.toBeNull();
+      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');
+      await page.waitForChanges();
+      expect(await page.find('gux-modal-legacy')).not.toBeNull();
+      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-legacy lang="en" size="small">
+          <div slot="content">This contains the modal content.</div>
+        </gux-modal-legacy>
+      `);
+      await page.click('#modal-trigger');
+      await page.waitForChanges();
+      expect(await page.find('gux-modal-legacy')).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');
+      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');
+      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');
+      await page.waitForChanges();
+      expect(await getFocusedShadowElementText(page)).toBe('');
+      expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
+      await page.keyboard.down('Escape');
+      await page.waitForChanges();
+      expect(await getFocusedElementText(page)).toBe('Open Modal');
+    });
+  });
+});

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

@@ -0,0 +1,200 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxButton } from "../../../stable/gux-button/gux-button";
+import { GuxModalLegacy } from "../gux-modal-legacy";
+import { GuxDismissButton } from "../../../stable/gux-dismiss-button/gux-dismiss-button";
+const components = [GuxButton, GuxModalLegacy, GuxDismissButton];
+const language = 'en';
+describe('gux-modal-legacy', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render small modal',
+        html: `
+          <gux-modal-legacy 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-legacy>
+        `
+      },
+      {
+        description: 'should render medium modal',
+        html: `
+          <gux-modal-legacy 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>
+            <div slot="right-align-buttons">
+              <gux-button accent='primary'>Accept</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+      },
+      {
+        description: 'should render large modal',
+        html: `
+          <gux-modal-legacy 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>
+            <div slot="right-align-buttons">
+              <gux-button accent='primary'>Accept</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+      },
+      {
+        description: 'should render modal without a title',
+        html: `
+          <gux-modal-legacy size="large">
+            <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-legacy>
+        `
+      },
+      {
+        description: 'should render modal without buttons',
+        html: `
+          <gux-modal-legacy size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+          </gux-modal-legacy>
+        `
+      },
+      {
+        description: 'should render modal with just left align buttons',
+        html: `
+          <gux-modal-legacy 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>
+          </gux-modal-legacy>
+        `
+      },
+      {
+        description: 'should render modal with just right align buttons',
+        html: `
+          <gux-modal-legacy 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>
+          </gux-modal-legacy>
+        `
+      },
+      {
+        description: 'should render modal with a specified initial focus element',
+        html: `
+          <gux-modal-legacy initial-focus="#cancelButton">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button id="cancelButton">Cancel</gux-button>
+            </div>
+            <div slot="right-align-buttons">
+              <gux-button accent='primary'>Accept</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+      },
+      {
+        description: 'should render small modal by default',
+        html: `
+          <gux-modal-legacy>
+            <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-legacy>
+        `
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxModalLegacy);
+        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-legacy 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-legacy>
+      `;
+      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-legacy 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-legacy>
+      `;
+      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-button-multi/tests/gux-button-multi.e2e.js

@@ -1,4 +1,11 @@
 import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+const axeExclusions = [
+  {
+    issueId: 'aria-required-children',
+    target: 'gux-button-multi,gux-list',
+    exclusionReason: 'To be addressed in COMUI-2387. New violation picked up after upgrading from axe-core v4.4.2 to v4.8.2'
+  }
+];
 async function clickDropdownButton(page) {
   return await page.click('pierce/.gux-dropdown-button > button');
 }
@@ -25,7 +32,7 @@ describe('gux-button-multi', () => {
   it('renders', async () => {
     const page = await newSparkE2EPage({ html });
     const element = await page.find('gux-button-multi');
-    await a11yCheck(page);
+    await a11yCheck(page, axeExclusions);
     expect(element).toHaveAttribute('hydrated');
   });
   it('should fire open and close events if not disabled on click', async () => {
@@ -33,7 +40,7 @@ describe('gux-button-multi', () => {
     const onOpen = await page.spyOnEvent('open');
     const onClose = await page.spyOnEvent('close');
     await clickDropdownButton(page);
-    await a11yCheck(page);
+    await a11yCheck(page, axeExclusions);
     await clickDropdownButton(page);
     expect(onOpen).toHaveReceivedEventTimes(1);
     expect(onClose).toHaveReceivedEventTimes(1);
@@ -54,7 +61,7 @@ describe('gux-button-multi', () => {
     element.setAttribute('disabled', 'disabled');
     await page.waitForChanges();
     await clickDropdownButton(page);
-    await a11yCheck(page);
+    await a11yCheck(page, axeExclusions);
     expect(onOpen).toHaveReceivedEventTimes(0);
   });
   it('should not fire open event if disabled using the keyboard', async () => {

package/dist/collection/components/stable/gux-content-search/gux-content-search.css

@@ -4,22 +4,30 @@
   min-width: 300px;
 }
 
+::slotted(input[disabled]) {
+  opacity: var(--gse-ui-formControl-input-disabled-opacity);
+}
+
 ::slotted(input) {
   box-sizing: border-box;
   flex-basis: 100%;
   flex-shrink: 1;
-  width: 100%;
+  width: 120px;
+  overflow: hidden;
   font-family: var(--gse-ui-search-counter-text-fontFamily);
   font-size: var(--gse-ui-search-counter-text-fontSize);
   font-weight: var(--gse-ui-search-counter-text-fontWeight);
   line-height: var(--gse-ui-search-counter-text-lineHeight);
+  color: var(--gse-ui-formControl-input-populatedColor);
+  text-overflow: ellipsis;
+  white-space: nowrap;
   background-image: none;
   border: 0;
   border-radius: 0;
   outline: none;
 }
 ::slotted(input)::placeholder {
-  color: var(--gse-ui-formControl-input-placeholderColor);
+  color: var(--gse-ui-formControl-input-populatedColor);
 }
 ::slotted(input).gux-focused, ::slotted(input):focus, ::slotted(input):focus-visible {
   border: 0;
@@ -40,6 +48,10 @@
   border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
+.gux-content-search gux-truncate {
+  display: flex;
+  align-items: center;
+}
 .gux-content-search.gux-disabled {
   pointer-events: none;
   cursor: default;
@@ -50,7 +62,7 @@
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
 }
-.gux-content-search:not(:disabled):hover {
+.gux-content-search:not(:disabled):not(.gux-disabled):hover {
   border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);
 }
 .gux-content-search .gux-search-icon {
@@ -126,8 +138,8 @@
   gap: var(--gse-ui-search-counter-gap);
 }
 .gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-navigation-divider {
-  width: 1px;
   height: 16px;
+  color: var(--gse-ui-search-counter-default-foregroundColor);
   background-color: #c6c8ce;
   border: 1px var(--gse-ui-search-counter-divider-border-style) var(--gse-ui-search-counter-divider-border-color);
 }
@@ -137,6 +149,7 @@
 }
 .gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-navigation-result {
   align-items: center;
+  color: var(--gse-ui-search-counter-default-foregroundColor);
   white-space: nowrap;
 }
 .gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-previous-button {

package/dist/collection/components/stable/gux-content-search/gux-content-search.js

@@ -48,7 +48,7 @@ export class GuxContentSearch {
     return (h("div", { class: {
         'gux-content-search': true,
         'gux-disabled': this.disabled
-      } }, h("div", { class: "gux-search-icon" }, h("gux-icon", { decorative: true, "icon-name": "search" })), h("slot", null), this.getNavigationPanel()));
+      } }, h("div", { class: "gux-search-icon" }, h("gux-icon", { decorative: true, "icon-name": "search" })), h("gux-truncate", { "max-lines": "1" }, h("slot", null)), this.getNavigationPanel()));
   }
   getNavigationPanel() {
     if (this.showNavigationPanel()) {
@@ -59,7 +59,7 @@ export class GuxContentSearch {
         } }, h("span", { class: {
           'gux-navigation-result': true,
           'gux-navigation-result-disabled': disableNavigationPanel
-        } }, this.matchCountResult()), h("div", { class: "gux-navigation-buttons" }, h("button", { type: "button", class: "gux-previous-button", title: this.i18n('navigatePreviousBtn'), "aria-label": this.i18n('navigatePreviousBtn'), onClick: () => this.previousClick(), disabled: disableNavigationPanel }, h("gux-icon", { decorative: true, "icon-name": "arrow-solid-up" })), h("button", { type: "button", class: "gux-next-button", title: this.i18n('navigateNextBtn'), "aria-label": this.i18n('navigateNextBtn'), onClick: () => this.nextClick(), disabled: disableNavigationPanel }, h("gux-icon", { decorative: true, "icon-name": "arrow-solid-down" }))), h("div", { class: "gux-navigation-divider" })), h("button", { class: "gux-clear-button", tabIndex: -1, type: "button", title: this.i18n('clear'), onClick: () => void this.clear() }, h("gux-icon", { "icon-name": "close", decorative: true }))));
+        } }, this.matchCountResult()), h("div", { class: "gux-navigation-buttons" }, h("button", { type: "button", class: "gux-previous-button", title: this.i18n('navigatePreviousBtn'), "aria-label": this.i18n('navigatePreviousBtn'), onClick: () => this.previousClick(), disabled: disableNavigationPanel }, h("gux-icon", { decorative: true, "icon-name": "arrow-solid-up" })), h("button", { type: "button", class: "gux-next-button", title: this.i18n('navigateNextBtn'), "aria-label": this.i18n('navigateNextBtn'), onClick: () => this.nextClick(), disabled: disableNavigationPanel }, h("gux-icon", { decorative: true, "icon-name": "arrow-solid-down" }))), h("div", { class: "gux-navigation-divider" })), h("button", { class: "gux-clear-button", tabIndex: -1, type: "button", title: this.i18n('clear'), onClick: () => void this.clear(), disabled: disableNavigationPanel }, h("gux-icon", { "icon-name": "close", decorative: true }))));
     }
     return null;
   }

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

@@ -4,6 +4,11 @@ const axeExclusions = [
     issueId: 'color-contrast',
     target: 'gux-content-search,span',
     exclusionReason: 'WCAG 1.4.3 Contrast (Minimum), inactive user interface components do not need to meet contrast minimum'
+  },
+  {
+    issueId: 'color-contrast',
+    target: 'gux-content-search,.gux-navigation-result',
+    exclusionReason: 'To be addressed in COMUI-2389. New violation picked up after upgrading from axe-core v4.4.2 to v4.8.2'
   }
 ];
 describe('gux-content-search', () => {

package/dist/collection/components/stable/gux-context-menu/gux-context-menu.css

@@ -1,6 +1,7 @@
 :host {
   display: block;
   max-width: fit-content;
+  white-space: normal;
 }
 
 gux-icon {