feat: enable color contrast and fix issues with components (#2647)

* feat: enable color contrast and fix issues with components

* fix: issue with axe and force colors

* chore: update snapshots for high contrast

* chore: add icon colors for button

.xo-config.cjs

@@ -44,6 +44,12 @@ module.exports = {
 				'import/no-extraneous-dependencies': 0 // foundation and component.css are inside this repo
 			}
 		},
+		{
+			files: ['./showcases/e2e/**'],
+			rules: {
+				'@typescript-eslint/no-loop-func': 0 // this is fine for playwright testing
+			}
+		},
 		{
 			files: ['./**/*.spec.ts'],
 			rules: {

packages/components/src/components/checkbox/checkbox.scss

@@ -39,5 +39,22 @@
 		&:indeterminate {
 			@include icons.set-icon("minus");
 		}
+
+		@media (forced-colors: active) {
+			&:indeterminate,
+			&:checked {
+				--db-check-element-border-color: #{colors.$db-current-color-on-bg-enabled};
+
+				border-width: form-components.$check-border-size;
+
+				&::before {
+					align-content: center;
+					font-size: calc(
+						var(--db-icon-font-size) - 2 * #{form-components.$check-border-size}
+					);
+					padding: #{form-components.$check-border-size};
+				}
+			}
+		}
 	}
 }

packages/components/src/components/switch/switch.scss

@@ -72,10 +72,13 @@ $checked-active-transition-size: calc(
 
 		// thumb
 		&::before {
-			content: "";
+			content: "O";
+			text-align: center;
+			align-content: center;
 			aspect-ratio: 1;
 			block-size: $switch-inactive-thumb-size;
 			background-color: colors.$db-current-color-on-bg-enabled;
+			color: colors.$db-current-color-on-bg-enabled;
 			border-radius: variables.$db-border-radius-full;
 			transform: translateX(var(--thumb-offset-x));
 			margin-inline-end: calc(
@@ -119,6 +122,7 @@ $checked-active-transition-size: calc(
 			&::before {
 				block-size: $switch-active-thumb-size;
 				background-color: colors.$db-current-color-bg-lvl-1-enabled;
+				color: colors.$db-current-color-bg-lvl-1-enabled;
 				margin: 0;
 			}
 		}
@@ -182,11 +186,13 @@ $checked-active-transition-size: calc(
 
 				&::before {
 					background-color: colors.$db-current-color-on-contrast-enabled;
+					color: colors.$db-current-color-on-contrast-enabled;
 				}
 			}
 
 			&::before {
 				background-color: colors.$db-current-color-on-contrast-enabled;
+				color: colors.$db-current-color-on-contrast-enabled;
 				block-size: $switch-active-thumb-size;
 				margin: 0;
 			}

packages/components/src/styles/_db-puls.scss

@@ -54,13 +54,21 @@
 	&::after {
 		block-size: variables.$db-border-height-xs;
 		inline-size: 100%;
+
+		@media (forced-colors: active) {
+			border: calc(#{variables.$db-border-height-xs} - 1px) solid;
+		}
 	}
 }
 
 @mixin show-db-puls-vertical() {
 	&::after {
 		block-size: 100%;
 		inline-size: variables.$db-border-height-xs;
+
+		@media (forced-colors: active) {
+			border: calc(#{variables.$db-border-height-xs} - 1px) solid;
+		}
 	}
 }
 

packages/components/src/styles/_form-components.scss

@@ -30,6 +30,8 @@ $input-types: "button", "checkbox", "color", "date", "datetime-local", "email",
 	"file", "hidden", "image", "month", "number", "password", "radio", "range",
 	"reset", "search", "submit", "tel", "text", "time", "url", "week";
 
+$check-border-size: min(#{variables.$db-border-height-2xs}, 2px);
+
 %dropdown-icon {
 	@include icons.set-icon("chevron_down", "after");
 
@@ -364,6 +366,7 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden"
 					1
 				) - 1px
 		);
+		color: colors.$db-current-color-on-bg-enabled;
 	}
 
 	&::before {
@@ -464,8 +467,7 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden"
 		place-content: center center;
 		appearance: none;
 		aspect-ratio: 1;
-		border: min(#{variables.$db-border-height-2xs}, 2px) solid
-			var(--db-check-element-border-color, currentColor);
+		border: #{$check-border-size} solid var(--db-check-element-border-color, currentColor);
 		block-size: $font-size-height;
 
 		// TODO: probably extract this to an overwrite or external file

packages/foundations/scss/helpers/_divider.scss

@@ -43,4 +43,10 @@
 			inset-block: 0;
 		}
 	}
+
+	@media (forced-colors: active) {
+		// border is the better implementation, but border height changes in windows based on pixel density
+		// we use it as a fallback for color contrast
+		border: variables.$db-border-height-3xs solid var(--db-divider-bg-color);
+	}
 }

showcases/e2e/default.ts

@@ -100,13 +100,25 @@ export const getDefaultScreenshotTest = ({
 	for (const color of COLORS) {
 		test(`should not have any A11y issues for color ${color}`, async ({
 			page
-		}) => {
+		}, { project }) => {
 			if (skipA11y) {
 				test.skip();
 			}
 
 			await gotoPage(page, path, color, fixedHeight);
 
+			// This is a workaround for axe for browsers using forcedColors
+			// see https://github.com/dequelabs/axe-core-npm/issues/1067
+			await page.evaluate(($project) => {
+				if ($project.use.contextOptions?.forcedColors === 'active') {
+					const style = document.createElement('style');
+					document.head.append(style);
+					const textColor =
+						$project.use.colorScheme === 'dark' ? '#fff' : '#000';
+					style.textContent = `* {-webkit-text-stroke-color:${textColor}!important;-webkit-text-fill-color:${textColor}!important;}`;
+				}
+			}, project);
+
 			if (preA11y) {
 				await preA11y(page);
 			}

showcases/playwright.config.ts

@@ -49,21 +49,26 @@ const config: PlaywrightTestConfig = {
 				...devices['Desktop Chrome']
 			}
 		},
-
+		{
+			name: 'chromium-highContrast',
+			use: {
+				browserName: 'chromium',
+				colorScheme: 'dark',
+				contextOptions: { forcedColors: 'active' }
+			}
+		},
 		{
 			name: 'firefox',
 			use: {
 				...devices['Desktop Firefox']
 			}
 		},
-
 		{
 			name: 'webkit',
 			use: {
 				...devices['Desktop Safari']
 			}
 		},
-
 		/* Test against mobile viewports. */
 		{
 			name: 'mobile_chrome',