feat(switch): enhance component's colors for a11y and usability #11951

aPreciado88 · 2025-04-14T19:46:23Z

Related Issue: #10483

Summary

Increase contrast and visual presence of idle state.
Simplify track and handle to one color and remove strokes.
Simplify hover & focus state: remove hover and focus ring on the handle.

…ciado88/10483-switch-enhance-component-colors-for-a11y-and-usability

aPreciado88 · 2025-04-14T19:57:43Z

@ashetland @SkyeSeitz Can you please take a look?

SkyeSeitz · 2025-04-14T21:05:59Z

@ashetland @SkyeSeitz Can you please take a look?

Updates look great! ✨

driskull · 2025-04-15T00:25:12Z

packages/calcite-components/src/components/switch/switch.scss

@@ -4,11 +4,12 @@
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-switch-background-color: Specifies the component's background color.
- * @prop --calcite-switch-border-color: Specifies the component's border color.
+ * @prop --calcite-switch-background-color-hover: Specifies the component's background color when hovered or pressed.
+ * @prop --calcite-switch-border-color: [Deprecated] Specifies the component's border color.


Should we specify any deprecation reasoning or what they should use instead?

We don't have other similar references across our CSS doc, but since the border is no longer applicable, maybe we could go with:

Suggested change

* @prop --calcite-switch-border-color: [Deprecated] Specifies the component's border color.

* @prop --calcite-switch-border-color: [Deprecated] No longer necessary. Specifies the component's border color.

cc @DitwanP

driskull · 2025-04-15T00:25:32Z

packages/calcite-components/src/components/switch/switch.scss

-    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
-    box-shadow: var(--calcite-switch-handle-shadow, inset 0 0 0 1px var(--calcite-color-brand));
+    border-color: var(--calcite-switch-handle-border-color);
+    box-shadow: var(--calcite-switch-handle-shadow, inset 0 0 0 0);


Do we still need to set box-shadow here?

I removed this, thanks for catching it!

driskull · 2025-04-15T00:25:39Z

packages/calcite-components/src/components/switch/switch.scss

-      border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand-hover));
-      box-shadow: var(--calcite-switch-handle-shadow, inset 0 0 0 1px var(--calcite-color-brand-hover));
+      border-color: var(--calcite-switch-handle-border-color);
+      box-shadow: var(--calcite-switch-handle-shadow, inset 0 0 0 0);


Do we still need to set box-shadow here?

…ciado88/10483-switch-enhance-component-colors-for-a11y-and-usability

packages/calcite-components/src/components/switch/switch.scss

driskull · 2025-04-15T21:46:47Z

packages/calcite-components/src/components/switch/switch.scss

    transition-all
    duration-150
    ease-in-out;
-  inset-block-start: -1px;
-  inset-inline: -1px theme("inset.auto");
+  inset-block-start: 2px;


Is there a platform design token that can be used here? Maybe a border width one?

I updated this to use --calcite-border-width-md

driskull · 2025-04-15T21:47:04Z

packages/calcite-components/src/components/switch/switch.scss

-  inset-block-start: -1px;
-  inset-inline: -1px theme("inset.auto");
+  inset-block-start: 2px;
+  inset-inline: 2px theme("inset.auto");


can the theme() be replaced with a css var?

I couldn't find a css var with auto as a value, but I replaced theme("inset.auto") with just "auto".

driskull · 2025-04-15T21:47:27Z

packages/calcite-components/src/components/switch/switch.scss

    background-color: var(--calcite-switch-background-color, var(--calcite-color-brand));
  }
  .handle {
-    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
-    inset-inline: theme("inset.auto") -1px;
+    inset-inline: theme("inset.auto") 2px;


Is there a platform design token that can be used here? Maybe a border width one? can the theme() be replaced with a css var?

I think theme("inset.auto") can just be replaced with auto

I think the inset-inline could be calc(var(--calcite-spacing-base) * -1)

driskull · 2025-04-15T22:18:15Z

packages/calcite-components/src/components/switch/switch.scss

    background-color: var(--calcite-switch-background-color, var(--calcite-color-brand));
  }
  .handle {
-    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
-    inset-inline: theme("inset.auto") -1px;
+    inset-inline: theme("inset.auto") 2px;


I think theme("inset.auto") can just be replaced with auto

driskull · 2025-04-15T22:20:27Z

packages/calcite-components/src/components/switch/switch.scss

    background-color: var(--calcite-switch-background-color, var(--calcite-color-brand));
  }
  .handle {
-    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
-    inset-inline: theme("inset.auto") -1px;
+    inset-inline: theme("inset.auto") 2px;


I think the inset-inline could be calc(var(--calcite-spacing-base) * -1)

driskull · 2025-04-15T22:47:06Z

packages/calcite-components/src/components/switch/switch.scss

    transition-all
    duration-150
    ease-in-out;
-  inset-block-start: -1px;
-  inset-inline: -1px theme("inset.auto");
+  inset-block-start: var(--calcite-border-width-md);


@aPreciado88 this should be a negative value right? Also, I think a spacing value is better since its not a border.

We need a positive value now, since we removed the border. I'm updating this to inset-block-start: var(--calcite-spacing-base);

driskull · 2025-04-15T22:47:14Z

packages/calcite-components/src/components/switch/switch.scss

    background-color: var(--calcite-switch-background-color, var(--calcite-color-brand));
  }
  .handle {
-    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
-    inset-inline: theme("inset.auto") -1px;
+    inset-inline: auto var(--calcite-border-width-md);


@aPreciado88 this should be a negative value right? Also, I think a spacing value is better since its not a border.

We also need a positive value here, since the border is now gone. I'm updating this to inset-inline: auto var(--calcite-spacing-base);

…ciado88/10483-switch-enhance-component-colors-for-a11y-and-usability

driskull · 2025-04-15T23:04:52Z

packages/calcite-components/src/components/switch/switch.e2e.ts

@@ -151,9 +151,10 @@ describe("calcite-switch", () => {
          shadowSelector: `.${CSS.track}`,
          targetProp: "backgroundColor",
        },
-        "--calcite-switch-border-color": {
+        "--calcite-switch-background-color-hover": {


Can you add this var to the switch custom theme story tokens?

I added this, thanks for catching it!

driskull

👍

driskull · 2025-04-15T23:13:59Z

packages/calcite-components/src/components/switch/switch.scss

-  inset-block-start: -1px;
-  inset-inline: -1px theme("inset.auto");
+  inset-block-start: var(--calcite-spacing-base);
+  inset-inline: var(--calcite-border-width-md) auto;


Are you sure this should be using a border var and not a spacing one?

My bad, I missed this. Updating it now!

…gis-deps * origin/dev: (31 commits) chore: add workflow manager to team issue templates (#11971) chore: release next feat(accordion-item): enhance component's interactivity states (#11935) chore: release next build(deps): update dependency lerna to v8.2.2 (#11948) feat(switch): enhance component's colors for a11y and usability (#11951) chore: release next ci: remove redundant test mode environment variable (#11958) fix(input-date-picker): allow clearing invalid date value (#11937) build: update browserslist db (#11946) feat(notice): add token for close icon and title text color (#11938) fix(list, block-group): fix drag handle events when lists or blocks are nested (#11816) chore: release next build(deps): update dependency vite to v5.4.18 (#11949) ci: default to stable tests when experimental mode is not set (#11957) fix(input-number): cancel arrow down event (#11956) refactor: tidy up (#11945) docs(checkbox): update icon color prop context (#11950) build(deps): bump node minor version (#11927) chore: release next ...

feat(switch): enhance component's colors for a11y and usability

756f5db

github-actions bot assigned aPreciado88 Apr 14, 2025

github-actions bot added the enhancement Issues tied to a new feature or request. label Apr 14, 2025

aPreciado88 added this to the 2025-04-29 - Apr Milestone milestone Apr 14, 2025

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

116f709

…ciado88/10483-switch-enhance-component-colors-for-a11y-and-usability

aPreciado88 added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Apr 14, 2025

driskull reviewed Apr 15, 2025

View reviewed changes

aPreciado88 added 2 commits April 15, 2025 14:38

feat(switch): update css token descriptions and remove unneeded css

b878f6c

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

4b4f726

…ciado88/10483-switch-enhance-component-colors-for-a11y-and-usability

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Apr 15, 2025

aPreciado88 requested a review from driskull April 15, 2025 21:43

driskull reviewed Apr 15, 2025

View reviewed changes

packages/calcite-components/src/components/switch/switch.scss Show resolved Hide resolved

driskull reviewed Apr 15, 2025

View reviewed changes

feat(switch): replace hardcoded px value with css var

40131f1

driskull reviewed Apr 15, 2025

View reviewed changes

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

f740256

…ciado88/10483-switch-enhance-component-colors-for-a11y-and-usability

driskull reviewed Apr 15, 2025

View reviewed changes

feat(switch): replace border css var with spacing css var

4812e82

aPreciado88 requested a review from driskull April 15, 2025 23:11

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Apr 15, 2025

driskull approved these changes Apr 15, 2025

View reviewed changes

feat(switch): replace border css var with spacing css var

3ad5381

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Apr 15, 2025

aPreciado88 merged commit 52886ef into dev Apr 15, 2025
17 checks passed

aPreciado88 deleted the aPreciado88/10483-switch-enhance-component-colors-for-a11y-and-usability branch April 15, 2025 23:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(switch): enhance component's colors for a11y and usability #11951

feat(switch): enhance component's colors for a11y and usability #11951

aPreciado88 commented Apr 14, 2025

aPreciado88 commented Apr 14, 2025

SkyeSeitz commented Apr 14, 2025

driskull Apr 15, 2025

geospatialem Apr 15, 2025

driskull Apr 15, 2025

aPreciado88 Apr 15, 2025

driskull Apr 15, 2025

driskull Apr 15, 2025

aPreciado88 Apr 15, 2025

driskull Apr 15, 2025

aPreciado88 Apr 15, 2025

driskull Apr 15, 2025

driskull Apr 15, 2025

driskull Apr 15, 2025

driskull Apr 15, 2025

driskull Apr 15, 2025

driskull Apr 15, 2025

aPreciado88 Apr 15, 2025

driskull Apr 15, 2025

aPreciado88 Apr 15, 2025 •

edited

Loading

driskull Apr 15, 2025

aPreciado88 Apr 15, 2025

driskull left a comment

driskull Apr 15, 2025

aPreciado88 Apr 15, 2025

	* @prop --calcite-switch-border-color: [Deprecated] Specifies the component's border color.
	* @prop --calcite-switch-border-color: [Deprecated] No longer necessary. Specifies the component's border color.

feat(switch): enhance component's colors for a11y and usability #11951

feat(switch): enhance component's colors for a11y and usability #11951

Conversation

aPreciado88 commented Apr 14, 2025

Summary

aPreciado88 commented Apr 14, 2025

SkyeSeitz commented Apr 14, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aPreciado88 Apr 15, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

driskull left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aPreciado88 Apr 15, 2025 •

edited

Loading