Merge pull request #3250 from mi6/2913-fix-toggle-button-focus-border

2913 fix toggle button focus border
mi6 · Feb 25, 2025 · 0af2fdc · 0af2fdc
2 parents 2629dd2 + 5c681a1
commit 0af2fdc
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 7 deletions.
diff --git a/...-diff-screenshots/baseline/IcToggleButton.cy.tsx/dark-theme-checked-focused.png b/...-diff-screenshots/baseline/IcToggleButton.cy.tsx/dark-theme-checked-focused.png
diff --git 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(
+      <div style={{ padding: "10px" }}>
+        <IcToggleButton label="Test" theme="dark" checked />
+      </div>
+    );
+    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
@@ -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
@@ -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
   );