genesys-spark-components 4.63.0 → 4.63.2

package/dist/cjs/gux-table.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-7fb02c8c.js');
 const index$1 = require('./index-a1a48d79.js');
 const whenEventIsFrom = require('./when-event-is-from-dd77a8d3.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-570ab290.js');
+const usage = require('./usage-07fa60e1.js');
 const en = require('./en-807a354e.js');
 require('./get-closest-element-9e41d6b9.js');
 

package/dist/cjs/gux-tabs-advanced.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-570ab290.js');
+const usage = require('./usage-07fa60e1.js');
 
 const GuxTabsAdvanced = class {
     constructor(hostRef) {

package/dist/cjs/gux-tabs.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-570ab290.js');
+const usage = require('./usage-07fa60e1.js');
 
 const guxTabsCss = ":host{display:flex;flex-direction:column}:host .gux-tabs{display:flex;height:100%}:host .gux-tabs:not(.gux-vertical){flex-direction:column}:host .gux-panel-container{display:flex;flex-direction:column;height:100%;min-height:0}";
 const GuxTabsStyle0 = guxTabsCss;

package/dist/cjs/gux-tag.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
 const index$1 = require('./index-a1a48d79.js');
-const usage = require('./usage-570ab290.js');
+const usage = require('./usage-07fa60e1.js');
 require('./get-closest-element-9e41d6b9.js');
 
 const tag = "tag with label: {label}";

package/dist/cjs/gux-text-highlight.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-570ab290.js');
+const usage = require('./usage-07fa60e1.js');
 
 const conversion = /[ +]/g;
 const expressions = new Map();

package/dist/cjs/gux-time-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-570ab290.js');
+const usage = require('./usage-07fa60e1.js');
 const getValidTimezone = require('./get-valid-timezone-52eac7fa.js');
 const useRegionalDates = require('./use-regional-dates-34243a86.js');
 const index$1 = require('./index-a1a48d79.js');

package/dist/cjs/gux-time-picker.cjs.entry.js

@@ -7,7 +7,7 @@ const onClickOutside = require('./on-click-outside-6db914c3.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 const index = require('./index-a1a48d79.js');
-const usage = require('./usage-570ab290.js');
+const usage = require('./usage-07fa60e1.js');
 const useRegionalDates = require('./use-regional-dates-34243a86.js');
 require('./get-closest-element-9e41d6b9.js');
 

package/dist/cjs/gux-time-zone-picker-beta.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
 const index$1 = require('./index-a1a48d79.js');
-const usage = require('./usage-570ab290.js');
+const usage = require('./usage-07fa60e1.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 require('./get-closest-element-9e41d6b9.js');
 

package/dist/cjs/gux-toast.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-570ab290.js');
+const usage = require('./usage-07fa60e1.js');
 const hasSlot = require('./has-slot-3edae188.js');
 
 const guxToastCss = ".gux-toast{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-toast-gap);place-content:stretch flex-start;align-items:flex-start;width:var(--gse-ui-toast-wrappingWidth);padding:var(--gse-ui-toast-margin);margin-bottom:var(--gse-ui-toast-stacking-gap);border-radius:var(--gse-ui-toast-borderRadius);box-shadow:var(--gse-ui-toast-boxShadow-x) var(--gse-ui-toast-boxShadow-y) var(--gse-ui-toast-boxShadow-blur) var(--gse-ui-toast-boxShadow-spread) var(--gse-ui-toast-boxShadow-color)}.gux-toast .gux-icon ::slotted(gux-icon){width:var(--gse-ui-toast-icon) !important;height:var(--gse-ui-toast-icon) !important}.gux-toast .gux-icon gux-icon{width:var(--gse-ui-toast-icon) !important;height:var(--gse-ui-toast-icon) !important}.gux-toast .gux-icon.gux-icon-error{color:var(--gse-ui-toast-error-iconColor)}.gux-toast .gux-icon.gux-icon-warning{color:var(--gse-ui-toast-warning-iconColor)}.gux-toast .gux-icon.gux-icon-success{color:var(--gse-ui-toast-success-iconColor)}.gux-toast .gux-icon.gux-icon-info{color:var(--gse-ui-toast-info-iconColor)}.gux-toast .gux-icon.gux-icon-action{color:var(--gse-ui-toast-action-iconColor)}.gux-toast .gux-content{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;gap:var(--gse-ui-toast-gapButton);place-content:stretch flex-start;align-items:flex-start;align-self:auto;order:0}.gux-toast .gux-content .gux-message{display:flex;flex-direction:column;gap:var(--gse-ui-toast-gapText)}.gux-toast .gux-content .gux-message .gux-message-title{font-family:var(--gse-ui-toast-heading-fontFamily);font-size:var(--gse-ui-toast-heading-fontSize);font-weight:var(--gse-ui-toast-heading-fontWeight);line-height:var(--gse-ui-toast-heading-lineHeight)}.gux-toast .gux-content .gux-message .gux-message-body{font-family:var(--gse-ui-toast-text-fontFamily);font-size:var(--gse-ui-toast-text-fontSize);line-height:var(--gse-ui-toast-text-lineHeight)}.gux-toast .gux-content .gux-buttons-bar{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-toast-buttonBar-gap);justify-content:flex-start}.gux-toast .gux-content .gux-buttons-bar ::slotted(a){font-family:var(--gse-ui-link-inLine-medium-underlinedText-fontFamily);font-size:var(--gse-ui-link-inLine-medium-underlinedText-fontSize);font-weight:var(--gse-ui-link-inLine-medium-underlinedText-fontWeight);line-height:var(--gse-ui-link-inLine-medium-underlinedText-lineHeight)}.gux-toast.gux-toast-success{background-color:var(--gse-ui-toast-success-backgroundColor)}.gux-toast.gux-toast-success .gux-message{color:var(--gse-ui-toast-success-foregroundColor)}.gux-toast.gux-toast-warning{background-color:var(--gse-ui-toast-warning-backgroundColor)}.gux-toast.gux-toast-warning .gux-message{color:var(--gse-ui-toast-warning-foregroundColor)}.gux-toast.gux-toast-error{background-color:var(--gse-ui-toast-error-backgroundColor)}.gux-toast.gux-toast-error .gux-message{color:var(--gse-ui-toast-error-foregroundColor)}.gux-toast.gux-toast-info{background-color:var(--gse-ui-toast-info-backgroundColor)}.gux-toast.gux-toast-info .gux-message{color:var(--gse-ui-toast-info-foregroundColor)}.gux-toast.gux-toast-action{background-color:var(--gse-ui-toast-action-backgroundColor)}.gux-toast.gux-toast-action .gux-message{color:var(--gse-ui-toast-action-foregroundColor)}";

package/dist/cjs/gux-toggle.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-570ab290.js');
+const usage = require('./usage-07fa60e1.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
 const index$1 = require('./index-a1a48d79.js');
 require('./get-closest-element-9e41d6b9.js');

package/dist/cjs/gux-tooltip-base-beta.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7fb02c8c.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-f8b4cd90.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-570ab290.js');
+const usage = require('./usage-07fa60e1.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 
 const guxTooltipBaseCss = ":host{position:fixed;z-index:var(--gse-semantic-zIndex-tooltip);display:none;width:max-content;max-width:250px;pointer-events:none;border-radius:var(--gse-ui-tooltip-borderRadius);box-shadow:var(--gse-ui-tooltip-boxShadow-x) var(--gse-ui-tooltip-boxShadow-y) var(--gse-ui-tooltip-boxShadow-blur) var(--gse-ui-tooltip-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);opacity:0}:host(.gux-show){display:block;animation-name:fade-in;animation-duration:250ms;animation-delay:1s;animation-fill-mode:forwards}.gux-container{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--gse-ui-tooltip-gap);place-content:center flex-start;padding:var(--gse-ui-tooltip-padding);font-family:var(--gse-ui-tooltip-text-fontFamily);font-size:var(--gse-ui-tooltip-text-fontSize);font-weight:var(--gse-ui-tooltip-text-fontWeight);line-height:var(--gse-ui-tooltip-text-lineHeight);color:var(--gse-ui-tooltip-light-foregroundColor);background-color:var(--gse-ui-tooltip-light-backgroundColor);border:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-radius:var(--gse-ui-tooltip-borderRadius)}.gux-container ::slotted(gux-icon){align-self:center;width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-tooltip-light-iconColor)}.gux-container ::slotted(*){width:100%;overflow-wrap:break-word;white-space:normal}.gux-container.gux-dark{color:var(--gse-ui-tooltip-dark-foregroundColor);background-color:var(--gse-ui-tooltip-dark-backgroundColor);border-color:var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark ::slotted(gux-icon){align-self:center;width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-tooltip-dark-iconColor)}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}";

package/dist/cjs/gux-tooltip-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-570ab290.js');
+const usage = require('./usage-07fa60e1.js');
 const findElementById = require('./find-element-by-id-fde17c92.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
 

package/dist/cjs/gux-tooltip.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7fb02c8c.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-f8b4cd90.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-570ab290.js');
+const usage = require('./usage-07fa60e1.js');
 const findElementById = require('./find-element-by-id-fde17c92.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 

package/dist/cjs/{usage-570ab290.js → usage-07fa60e1.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const name = "genesys-spark-components";
-const version = "4.63.0";
+const version = "4.63.2";
 const description = "Common webcomponents";
 const license = "MIT";
 const main = "dist/stencil-wrapper.js";

package/dist/collection/components/beta/gux-time-zone-picker/tests/gux-time-zone-picker.e2e.js

@@ -1,4 +1,11 @@
 import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+const axeExclusions = [
+    {
+        issueId: 'target-size',
+        target: 'gux-time-zone-picker-beta,gux-dropdown,button',
+        exclusionReason: 'COMUI-2944 Fix any of the following: Target has insufficient size (20px by 18px, should be at least 24px by 24px); Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 20px instead of at least 24px.'
+    }
+];
 async function openWithClick(page) {
     const dropdownButtonElement = await page.find('pierce/.gux-field');
     await dropdownButtonElement.click();
@@ -20,9 +27,9 @@ describe('gux-time-zone-picker-beta', () => {
     it('filters the list', async () => {
         const html = `<gux-time-zone-picker-beta></gux-time-zone-picker-beta>`;
         const page = await newSparkE2EPage({ html });
-        await a11yCheck(page);
+        await a11yCheck(page, axeExclusions);
         await openWithClick(page);
-        await a11yCheck(page);
+        await a11yCheck(page, axeExclusions);
         let visibleItems = await unfilteredOptions(page);
         expect(visibleItems.length).toBe(478);
         await page.keyboard.press('a');
@@ -36,9 +43,9 @@ describe('gux-time-zone-picker-beta', () => {
     it('includes generic zones', async () => {
         const html = `<gux-time-zone-picker-beta></gux-time-zone-picker-beta>`;
         const page = await newSparkE2EPage({ html });
-        await a11yCheck(page);
+        await a11yCheck(page, axeExclusions);
         await openWithClick(page);
-        await a11yCheck(page);
+        await a11yCheck(page, axeExclusions);
         let visibleItems = await unfilteredOptions(page);
         expect(visibleItems.length).toBe(478);
         await page.keyboard.press('e');

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: 'target-size',
+        target: 'input',
+        exclusionReason: 'COMUI-2945 Fix any of the following: Target has insufficient size (134px by 14px, should be at least 24px by 24px); Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 0px instead of at least 24px.'
     }
 ];
 describe('gux-content-search', () => {

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

@@ -1,4 +1,21 @@
 import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+const axeExclusions = [
+    {
+        issueId: 'target-size',
+        target: 'gux-datepicker,.gux-calendar-toggle-button',
+        exclusionReason: 'COMUI-2946 Fix any of the following: Target has insufficient size (16px by 18px, should be at least 24px by 24px); Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px.'
+    },
+    {
+        issueId: 'target-size',
+        target: 'gux-datepicker,.gux-datepicker-field:nth-child(1) > .gux-datepicker-field-input > .gux-datepicker-field-text-input > .gux-calendar-toggle-button[aria-label="Toggle calendar view"]',
+        exclusionReason: 'COMUI-2946 Fix any of the following: Target has insufficient size (16px by 18px, should be at least 24px by 24px); Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px.'
+    },
+    {
+        issueId: 'target-size',
+        target: 'gux-datepicker,.gux-datepicker-field:nth-child(2) > .gux-datepicker-field-input > .gux-datepicker-field-text-input > .gux-calendar-toggle-button[aria-label="Toggle calendar view"]',
+        exclusionReason: 'COMUI-2946 Fix any of the following: Target has insufficient size (16px by 18px, should be at least 24px by 24px); Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px.'
+    }
+];
 describe('gux-datepicker', () => {
     it('renders', async () => {
         const page = await newSparkE2EPage({
@@ -27,7 +44,7 @@ describe('gux-datepicker', () => {
         await page.waitForChanges();
         const input = await element.find('pierce/input');
         const value = await input.getProperty('value');
-        await a11yCheck(page);
+        await a11yCheck(page, axeExclusions);
         expect(value).toBe('12/01/1985');
     });
     it('opens the calendar when the input is clicked', async () => {
@@ -39,7 +56,7 @@ describe('gux-datepicker', () => {
         const input = await datepickerContainer.find('input');
         await input.click();
         await page.waitForChanges();
-        await a11yCheck(page);
+        await a11yCheck(page, axeExclusions);
         expect(datepickerContainer.className).toContain('gux-active');
     });
     it('opens and closes the calendar when the button is clicked', async () => {
@@ -78,13 +95,13 @@ describe('gux-datepicker', () => {
         });
         const element = await page.find('gux-datepicker');
         const labels = await page.findAll('pierce/.gux-datepicker-field-label');
-        await a11yCheck(page);
+        await a11yCheck(page, axeExclusions);
         expect(labels.length).toBe(1);
         expect(labels[0].textContent).toEqual('Date');
         expect(labels[0].className).toContain('gux-sr-only');
         element.setAttribute('label', 'test');
         await page.waitForChanges();
-        await a11yCheck(page);
+        await a11yCheck(page, axeExclusions);
         expect(labels[0].textContent).toEqual('test');
         expect(labels[0].className).not.toContain('gux-sr-only');
     });
@@ -98,7 +115,7 @@ describe('gux-datepicker', () => {
         });
         const labels = await page.findAll('pierce/.gux-datepicker-field-label');
         await page.waitForChanges();
-        await a11yCheck(page);
+        await a11yCheck(page, axeExclusions);
         expect(labels.length).toBe(2);
         expect(labels[0].textContent).toBe('Start');
         expect(labels[0].className).not.toContain('gux-sr-only');

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

@@ -1,4 +1,11 @@
 import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+const axeExclusions = [
+    {
+        issueId: 'target-size',
+        target: 'gux-dropdown,button',
+        exclusionReason: 'COMUI-2947 Target has insufficient size (20px by 18px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 20px instead of at least 24px.'
+    }
+];
 testWithOptionType('gux-option', `
 <gux-option value="a">Ant</gux-option>
 <gux-option value="b">Bear<span slot="subtext">Large</span></gux-option>
@@ -28,9 +35,9 @@ function testWithOptionType(optionType, listboxContent) {
             });
             it('opens dropdown on click', async () => {
                 const { page } = await render(filterablePrefixDropdown(listboxContent));
-                await a11yCheck(page, [], 'before opening dropdown with filter');
+                await a11yCheck(page, axeExclusions, 'before opening dropdown with filter');
                 await openWithClick(page);
-                await a11yCheck(page, [], 'after opening dropdown with filter');
+                await a11yCheck(page, axeExclusions, 'after opening dropdown with filter');
                 const dropMenu = await page.find('pierce/.gux-popup-container');
                 expect(dropMenu.className.split(' ')).toContain('gux-expanded');
             });
@@ -60,9 +67,9 @@ function testWithOptionType(optionType, listboxContent) {
         describe('click', () => {
             it('opens drop down on click', async () => {
                 const { page } = await render(nonFilterableDropdown(listboxContent));
-                await a11yCheck(page, [], 'before opening dropdown');
+                await a11yCheck(page, axeExclusions, 'before opening dropdown');
                 await openWithClick(page);
-                await a11yCheck(page, [], 'after opening dropdown');
+                await a11yCheck(page, axeExclusions, 'after opening dropdown');
                 await expectDropdownToBeOpen(page);
             });
         });

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

@@ -1,4 +1,11 @@
 import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+const axeExclusions = [
+    {
+        issueId: 'target-size',
+        target: 'gux-dropdown-multi,button',
+        exclusionReason: 'COMUI-2948 Fix any of the following: Target has insufficient size (20px by 18px, should be at least 24px by 24px); Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 20px instead of at least 24px.'
+    }
+];
 describe('gux-dropdown-multi', () => {
     const html = `
     <gux-dropdown-multi lang="en">
@@ -26,11 +33,11 @@ describe('gux-dropdown-multi', () => {
         it('opens drop down on click', async () => {
             const page = await newSparkE2EPage({ html });
             await page.waitForChanges();
-            await a11yCheck(page, [], 'before opening dropdown');
+            await a11yCheck(page, axeExclusions, 'before opening dropdown');
             const dropdownButtonElement = await page.find('pierce/.gux-field');
             await dropdownButtonElement.click();
             await page.waitForChanges();
-            await a11yCheck(page, [], 'after opening dropdown');
+            await a11yCheck(page, axeExclusions, 'after opening dropdown');
             const dropMenu = await page.find('pierce/.gux-popup-container');
             expect(dropMenu.className.split(' ')).toContain('gux-expanded');
         });
@@ -204,7 +211,7 @@ describe('gux-dropdown-multi', () => {
                 const { page, dropdown } = await setupPage(creatableDropdown);
                 await inputFilter(page, dropdown, 'bee');
                 const createAction = await getCreateAction(dropdown);
-                await a11yCheck(page);
+                await a11yCheck(page, axeExclusions);
                 expect(createAction).not.toBeNull();
                 expect(createAction).not.toHaveClass('gux-filtered');
             });

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/gux-form-field-radio.js

@@ -50,7 +50,7 @@ export class GuxFormFieldRadio {
         return (h(Host, { key: 'b3bdb321adb2df6184a7b8e2518f250b6c3b4a70', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '593ff429e5998fe9a9d5579eae21c1f5d5b4a6c7', class: "gux-form-field-container" }, h("div", { key: '5d2b47c3b1c045e80ff50d90eefc5370a2591da2', class: "gux-input-label" }, h("div", { key: 'e59a25c30b99564c2e432f30e564e00f1cf9895a', class: "gux-input" }, h("slot", { key: '56a0276b975cc21e0f3c8977524c9596f4480843', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'f86c193274ad7ae2caeb507e348ecb1f53da9362', class: "gux-label", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '9050d15bbbcba270aef5d47e557fc755ce1b78b9', name: "label" }))), h("div", { key: '08ee94d23e2d203983a8b6e05586588491e79d81', class: "error-and-help-text" }, h(GuxFormFieldError, { key: 'f9d0f3e44ee30657e024a0a3a0e58559c48460f1', show: this.hasError }, h("slot", { key: 'a2fff1638ae5f2ab11b3ae58d0d33669eabc0b17', name: "error" })), h(GuxFormFieldHelp, { key: '4fd527bd64df6b614ae1efd46b8bd71135276967', show: !this.hasError && this.hasHelp }, h("slot", { key: '8b5ad1cc3502feb6014407011688765061bb1c1b', name: "help" }))))));
+            } }, h("div", { key: '6f4d6bebe6aada0b06df3afef88616a625bd0b27', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'c139782a489eb88a223312a909bb46b47d06a132', class: "gux-input-label" }, h("div", { key: 'cae2121349b56cd2e49c5e4982581d1512daba5a', class: "gux-input" }, h("slot", { key: '52c097c30fa30c08d7347dfe121beea42c57a812', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'a1020cd4b7c262de6a0b021b7ca823708beb563a', class: "gux-label" }, h("slot", { key: '31b0e62ff7000247385f4484b91fce73776f110c', name: "label" }))), h("div", { key: 'c071368fb3df0ab2bc9764d1a1eb9d43c613da01', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '8bc289e3d7d1b16a0cff1fb3317458ded3dcd2b1', show: this.hasError }, h("slot", { key: 'e1585457772bd61239b7ba5252923458174653a6', name: "error" })), h(GuxFormFieldHelp, { key: 'acc371fd134857b1d0fbfb402d2f7ccf55bfe132', show: !this.hasError && this.hasHelp }, h("slot", { key: '4888bfa5b03bfb7ad5c88faa2c53e0a23056bb79', name: "help" }))))));
     }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="radio"][slot="input"]');

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/tests/gux-form-field-radio.e2e.js

@@ -1,6 +1,11 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { newSparkE2EPage, a11yCheck } from "../../../../../../test/e2eTestUtils";
-const axeExclusions = [];
+const axeExclusions = [
+    {
+        issueId: 'target-size',
+        exclusionReason: 'COMUI-2949 Fix any of the following: Target has insufficient size (16px by 16px, should be at least 24px by 24px); Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 20px instead of at least 24px.]'
+    }
+];
 async function newNonrandomE2EPage({ html }) {
     const page = await newE2EPage();
     await page.evaluateOnNewDocument(() => {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio-group/gux-form-field-radio-group.js

@@ -67,7 +67,7 @@ export class GuxFormFieldRadioGroupBeta {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'c52620a843e56279c233ea956eab118209b1de76', labelPosition: "above" }, h(GuxFormFieldLegendLabel, { key: 'df748d43471935891c27956092b6c156da949b08', position: "above", required: false, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'd5e72af0ca62ff94b984fa1e60d2cf4188eec4f6', name: "group-label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp)), h("slot", { key: '76b588f1a1d88c999475179292aec02918c8044c' }), h(GuxFormFieldError, { key: '104df403f74a4f090154a7ed35149c59835b6e88', show: this.hasGroupError }, h("slot", { key: 'bfccb965c27825e7dce5545a098a79a58f6dba61', name: "group-error" })), h(GuxFormFieldHelp, { key: '58dc5a9e65b19e514c9064cd029b09f01d96171a', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '3e8d7dda7eb16049d454baeb2201ed160e1b68c8', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: '19228b0bcab52c0526996d7d0f6d31ef0ababd24', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldLegendLabel, { key: 'f772a428e7144532036205cf8315cec1a33b8cf9', position: "above", required: false, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '9245e721f752b56153bd48f55be1bbe1d2ccd70b', name: "group-label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp)), h("slot", { key: 'a67a2bdfdc770c5bd168603697a297638025fb9b' }), h(GuxFormFieldError, { key: '44552902197a66af19c006c0698868e49a866db3', show: this.hasGroupError }, h("slot", { key: '6036ceddfb54947f96568effde76a10d40373287', name: "group-error" })), h(GuxFormFieldHelp, { key: '859aa51e629873dbfe1613cd395494116139e534', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '3a36b35266d4d4e7f5ca91ea0b6135ccb07fa909', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio-group/tests/gux-form-field-radio-group.e2e.js

@@ -2,14 +2,8 @@ import { newE2EPage } from "@stencil/core/testing";
 import { newSparkE2EPage, a11yCheck } from "../../../../../../test/e2eTestUtils";
 const axeExclusions = [
     {
-        issueId: 'color-contrast',
-        target: 'gux-form-field-radio-group-beta,span',
-        exclusionReason: 'WCAG 1.4.3 Contrast (Minimum), inactive user interface components do not need to meet contrast minimum'
-    },
-    {
-        issueId: 'color-contrast',
-        target: 'gux-form-field-radio-group-beta,span[role="presentation"]',
-        exclusionReason: 'WCAG 1.4.3 Contrast (Minimum), inactive user interface components do not need to meet contrast minimum'
+        issueId: 'target-size',
+        exclusionReason: 'COMUI-2949 Fix any of the following: Target has insufficient size (16px by 16px, should be at least 24px by 24px); Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 20px instead of at least 24px.'
     }
 ];
 async function newNonrandomE2EPage({ html }) {
@@ -25,105 +19,109 @@ describe('gux-form-field-radio-group-beta', () => {
     describe('#render', () => {
         [
             `
-      <gux-form-field-radio-group-beta>
-        <label slot="group-label">Food</label>
-        <gux-form-field-radio>
-          <input slot="input" type="radio" name="food-1" value="pizza"/>
-          <label slot="label">Pizza</label>
-        </gux-form-field-radio>
-      </gux-form-field-radio-group-beta>
-       `,
+        <gux-form-field-radio-group-beta>
+          <label slot="group-label">Food</label>
+          <gux-form-field-radio>
+            <input slot="input" type="radio" name="food-1" value="pizza"/>
+            <label slot="label">Pizza</label>
+          </gux-form-field-radio>
+        </gux-form-field-radio-group-beta>
+      `,
+            `
+        <gux-form-field-radio-group-beta>
+          <label slot="group-label">Food</label>
+
+          <gux-form-field-radio>
+            <input slot="input" type="radio" name="food-1" value="pizza" />
+            <label slot="label">Pizza</label>
+          </gux-form-field-radio>
+
+          <gux-form-field-radio>
+            <input
+              slot="input"
+              type="radio"
+              name="food-1"
+              value="sandwich"
+              disabled
+            />
+            <label slot="label">Sandwich</label>
+          </gux-form-field-radio>
+
+          <gux-form-field-radio>
+            <input slot="input" type="radio" name="food-1" value="spaghetti" />
+            <label slot="label">Spaghetti</label>
+            <span slot="help">This is a help message</span>
+          </gux-form-field-radio>
+          <span slot="group-error">Subject to availibility</span>
+        </gux-form-field-radio-group-beta>
+      `,
             `
-       <gux-form-field-radio-group-beta>
-       <label slot="group-label">Food</label>
-   
-       <gux-form-field-radio>
-         <input slot="input" type="radio" name="food-1" value="pizza" />
-         <label slot="label">Pizza</label>
-       </gux-form-field-radio>
-   
-       <gux-form-field-radio>
-         <input
-           slot="input"
-           type="radio"
-           name="food-1"
-           value="sandwich"
-           disabled
-         />
-         <label slot="label">Sandwich</label>
-       </gux-form-field-radio>
-   
-       <gux-form-field-radio>
-         <input slot="input" type="radio" name="food-1" value="spaghetti" />
-         <label slot="label">Spaghetti</label>
-         <span slot="help">This is a help message</span>
-       </gux-form-field-radio>
-       <span slot="group-error">Subject to availibility</span>
-     </gux-form-field-radio-group-beta>
-       `,
-            `<gux-form-field-radio-group-beta>
-       <label slot="group-label">Food</label>
-   
-       <gux-form-field-radio>
-         <input slot="input" type="radio" name="food-1" value="pizza" />
-         <label slot="label">Pizza</label>
-       </gux-form-field-radio>
-   
-       <gux-form-field-radio>
-         <input
-           slot="input"
-           type="radio"
-           name="food-1"
-           value="sandwich"
-           disabled
-         />
-         <label slot="label">Sandwich</label>
-       </gux-form-field-radio>
-   
-       <gux-form-field-radio>
-         <input slot="input" type="radio" name="food-1" value="sushi" />
-         <label slot="label">Sushi</label>
-         <span slot="error">Subject to availibility</span>
-       </gux-form-field-radio>
-   
-       <gux-form-field-radio>
-         <input slot="input" type="radio" name="food-1" value="spaghetti" />
-         <label slot="label">Spaghetti</label>
-         <span slot="help">This is a help message</span>
-       </gux-form-field-radio>
-       <span slot="group-help">This is a group help message</span>
-     </gux-form-field-radio-group-beta>`,
-            ` <gux-form-field-radio-group-beta disabled>
-     <label slot="group-label">Food</label>
- 
-     <gux-form-field-radio>
-       <input slot="input" type="radio" name="food-1" value="pizza" />
-       <label slot="label">Pizza</label>
-     </gux-form-field-radio>
- 
-     <gux-form-field-radio>
-       <input
-         slot="input"
-         type="radio"
-         name="food-1"
-         value="sandwich"
-         disabled
-       />
-       <label slot="label">Sandwich</label>
-     </gux-form-field-radio>
- 
-     <gux-form-field-radio>
-       <input slot="input" type="radio" name="food-1" value="sushi" />
-       <label slot="label">Sushi</label>
-       <span slot="error">Subject to availibility</span>
-     </gux-form-field-radio>
- 
-     <gux-form-field-radio>
-       <input slot="input" type="radio" name="food-1" value="spaghetti" />
-       <label slot="label">Spaghetti</label>
-       <span slot="help">This is a help message</span>
-     </gux-form-field-radio>
-   </gux-form-field-radio-group-beta>`
+        <gux-form-field-radio-group-beta>
+          <label slot="group-label">Food</label>
+
+          <gux-form-field-radio>
+            <input slot="input" type="radio" name="food-1" value="pizza" />
+            <label slot="label">Pizza</label>
+          </gux-form-field-radio>
+
+          <gux-form-field-radio>
+            <input
+              slot="input"
+              type="radio"
+              name="food-1"
+              value="sandwich"
+              disabled
+            />
+            <label slot="label">Sandwich</label>
+          </gux-form-field-radio>
+
+          <gux-form-field-radio>
+            <input slot="input" type="radio" name="food-1" value="sushi" />
+            <label slot="label">Sushi</label>
+            <span slot="error">Subject to availibility</span>
+          </gux-form-field-radio>
+
+          <gux-form-field-radio>
+            <input slot="input" type="radio" name="food-1" value="spaghetti" />
+            <label slot="label">Spaghetti</label>
+            <span slot="help">This is a help message</span>
+          </gux-form-field-radio>
+          <span slot="group-help">This is a group help message</span>
+        </gux-form-field-radio-group-beta>
+      `,
+            `
+        <gux-form-field-radio-group-beta disabled>
+          <label slot="group-label">Food</label>
+
+          <gux-form-field-radio>
+            <input slot="input" type="radio" name="food-1" value="pizza" />
+            <label slot="label">Pizza</label>
+          </gux-form-field-radio>
+
+          <gux-form-field-radio>
+            <input
+              slot="input"
+              type="radio"
+              name="food-1"
+              value="sandwich"
+              disabled
+            />
+            <label slot="label">Sandwich</label>
+          </gux-form-field-radio>
+
+          <gux-form-field-radio>
+            <input slot="input" type="radio" name="food-1" value="sushi" />
+            <label slot="label">Sushi</label>
+            <span slot="error">Subject to availibility</span>
+          </gux-form-field-radio>
+
+          <gux-form-field-radio>
+            <input slot="input" type="radio" name="food-1" value="spaghetti" />
+            <label slot="label">Spaghetti</label>
+            <span slot="help">This is a help message</span>
+          </gux-form-field-radio>
+        </gux-form-field-radio-group-beta>
+      `
         ].forEach((html, index) => {
             it(`should render component as expected (${index + 1})`, async () => {
                 const page = await newNonrandomE2EPage({ html });

package/dist/collection/components/stable/gux-form-field/functional-components/gux-form-field-fieldset-container/gux-form-field-fieldset-container.js

@@ -1,7 +1,13 @@
 import { h } from "@stencil/core";
-export const GuxFormFieldFieldsetContainer = ({ labelPosition }, children) => {
+export const GuxFormFieldFieldsetContainer = ({ labelPosition, disabled }, children) => {
+    if (disabled) {
+        return (h("fieldset", { class: {
+                'gux-form-field-fieldset-container': true,
+                [`gux-${labelPosition}`]: Boolean(labelPosition)
+            }, "aria-disabled": "true" }, children));
+    }
     return (h("fieldset", { class: {
             'gux-form-field-fieldset-container': true,
-            [`gux-${labelPosition}`]: true
+            [`gux-${labelPosition}`]: Boolean(labelPosition)
         } }, children));
 };