diff --git a/packages/react/cypress-image-diff-screenshots/baseline/IcToggleButton.cy.tsx/dark-theme-checked-focused.png b/packages/react/cypress-image-diff-screenshots/baseline/IcToggleButton.cy.tsx/dark-theme-checked-focused.png new file mode 100755 index 0000000000..41a793f931 Binary files /dev/null and b/packages/react/cypress-image-diff-screenshots/baseline/IcToggleButton.cy.tsx/dark-theme-checked-focused.png differ diff --git a/packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx b/packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx index 55d773fbbc..e1fa564b3b 100644 --- a/packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx +++ b/packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx @@ -328,10 +328,8 @@ describe("IcToggleButton visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, undefined, TOGGLE_BUTTON_AXE_OPTIONS); cy.compareSnapshot({ - name: "light-theme-monochrome", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.049), name: "/light-theme-monochrome", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.037), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.049), }); }); @@ -341,10 +339,28 @@ describe("IcToggleButton visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, undefined, TOGGLE_BUTTON_AXE_OPTIONS); cy.compareSnapshot({ - name: "dark-theme-monochrome", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.049), name: "/dark-theme-monochrome", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.033), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.049), + }); + }); + + it("should render checked and focused toggle button with dark theme", () => { + mount( +
+ +
+ ); + cy.checkHydrated(IC_TOGGLE_BUTTON_SELECTOR); + + cy.findShadowEl(IC_TOGGLE_BUTTON_SELECTOR, "ic-button") + .shadow() + .find("button") + .focus(); + + cy.checkA11yWithWait(undefined, undefined, TOGGLE_BUTTON_AXE_OPTIONS); + cy.compareSnapshot({ + name: "/dark-theme-checked-focused", + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.007), }); }); }); diff --git a/packages/web-components/src/components/ic-toggle-button/ic-toggle-button.css b/packages/web-components/src/components/ic-toggle-button/ic-toggle-button.css index 8aeb3d9ac3..c345665d52 100644 --- a/packages/web-components/src/components/ic-toggle-button/ic-toggle-button.css +++ b/packages/web-components/src/components/ic-toggle-button/ic-toggle-button.css @@ -154,7 +154,8 @@ } :host(.ic-toggle-button-checked) ::part(button):focus { - box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white), + box-shadow: inset 0 0 0 var(--ic-space-xxxs) + var(--ic-toggle-button-selected-border-focus), var(--ic-border-focus); } diff --git a/packages/web-components/src/global/color-mode.css b/packages/web-components/src/global/color-mode.css index 917374a011..61a6bfed48 100644 --- a/packages/web-components/src/global/color-mode.css +++ b/packages/web-components/src/global/color-mode.css @@ -1237,6 +1237,9 @@ ic-theme, ); --ic-toggle-button-selected-text-disabled: var(--ic-color-brand-text); --ic-toggle-button-selected-icon-disabled: var(--ic-color-icon-brand); + --ic-toggle-button-selected-border-focus: var( + --ic-color-border-neutral-white + ); --ic-toggle-button-unselected-border-monochrome: var( --ic-color-border-neutral-black ); @@ -2630,6 +2633,9 @@ ic-theme, --ic-color-text-tertiary-light ); --ic-toggle-button-selected-icon-disabled: var(--ic-color-icon-disabled); + --ic-toggle-button-selected-border-focus: var( + --ic-color-border-neutral-black + ); --ic-toggle-button-unselected-border-monochrome: var( --ic-color-border-neutral-white ); @@ -3956,6 +3962,9 @@ ic-theme, --ic-color-text-tertiary-light ); --ic-toggle-button-selected-icon-disabled: var(--ic-color-icon-disabled); + --ic-toggle-button-selected-border-focus: var( + --ic-color-border-neutral-black + ); --ic-toggle-button-unselected-border-monochrome: var( --ic-color-border-neutral-white );