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
);