fix: checkbox button semantic (#5654)

public-ui · Nov 28, 2023 · 72f3239 · 72f3239
2 parents 707439b + f798699
commit 72f3239
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 8 deletions.
diff --git a/packages/components/src/components/a11y.css b/packages/components/src/components/a11y.css
@@ -71,3 +71,19 @@
 		font-size: inherit;
 	}
 }
+
+/**
+ * Sometimes we need the semantic element for accessibility reasons,
+ * but we don't want to show it.
+ *
+ * - https://www.a11yproject.com/posts/how-to-hide-content/
+ */
+.visually-hidden {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
diff --git a/packages/components/src/components/input-checkbox/button.css b/packages/components/src/components/input-checkbox/button.css
@@ -4,14 +4,11 @@
 		grid-template-columns: var(--a11y-min-size) auto;
 		grid-template-areas: 'error error' 'input label' 'hint hint';
 	}
-
-	.button[tabindex]:focus {
+	.button:focus-within {
 		/* override global `[tabindex]:focus` style */
 		cursor: inherit;
-	}
-
-	.button input {
-		display: none;
+		outline-color: black;
+		outline-style: solid;
 	}
 
 	.button > .error {

diff --git a/packages/components/src/components/input-checkbox/component.tsx b/packages/components/src/components/input-checkbox/component.tsx
@@ -59,7 +59,6 @@ export class KolInputCheckbox implements API {
 					}}
 					data-role={this.state._variant === 'button' ? 'button' : undefined}
 					onKeyPress={this.state._variant === 'button' ? this.onChange : undefined}
-					tabIndex={this.state._variant === 'button' && !this.state._disabled ? 0 : undefined}
 					_accessKey={this.state._accessKey}
 					_alert={this.state._alert}
 					_disabled={this.state._disabled}
@@ -97,6 +96,7 @@ export class KolInputCheckbox implements API {
 							_label=""
 						/>
 						<input
+							class={this.state._variant === 'button' ? 'visually-hidden' : undefined}
 							ref={this.catchRef}
 							title=""
 							accessKey={this.state._accessKey} // by checkbox?!

diff --git a/packages/themes/bmf/src/index.ts b/packages/themes/bmf/src/index.ts
@@ -1992,6 +1992,13 @@ export const BMF = KoliBri.createTheme('bmf', {
 		:host kol-input.button .icon {
 			height: auto;
 		}
+		.button:focus-within {
+			border-radius: var(--a11y-min-size);
+			outline-color: var(--color-ocean);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 3px;
+		}
 	`,
 	'KOL-INPUT-RADIO': css`
 		/* INPUT */

diff --git a/packages/themes/bzst-v2/src/components/input-checkbox.scss b/packages/themes/bzst-v2/src/components/input-checkbox.scss
@@ -160,4 +160,8 @@
 	.disabled {
 		opacity: 0.33;
 	}
+
+	.button:focus-within {
+		outline: var(--color-focus) solid 2px;
+	}
 }
diff --git a/packages/themes/bzst/src/components/input-checkbox.scss b/packages/themes/bzst/src/components/input-checkbox.scss
@@ -133,3 +133,7 @@ input[type='checkbox']:checked {
 .disabled {
 	opacity: 0.33;
 }
+.button:focus-within {
+	outline: var(--focusOutline);
+	outline-offset: 2px;
+}
diff --git a/packages/themes/default/src/index.ts b/packages/themes/default/src/index.ts
@@ -1764,6 +1764,13 @@ export const DEFAULT = KoliBri.createTheme('default', {
 		:host .disabled {
 			opacity: 0.33;
 		}
+		.button:focus-within {
+			border-radius: var(--border-radius);
+			outline-color: var(--color-primary-variant);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: calc(var(--border-width) * 2);
+		}
 	`,
 	'KOL-INPUT-RADIO': css`
 		label {

diff --git a/packages/themes/ecl/src/ecl-ec.ts b/packages/themes/ecl/src/ecl-ec.ts
@@ -689,6 +689,12 @@ export const ECL_EC = KoliBri.createTheme('ecl-ec', {
 		.hint {
 			font-size: 0.875rem;
 		}
+		.button:focus-within {
+			outline-color: var(--color-blue);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 2px;
+		}
 	`,
 	'KOL-INPUT-COLOR': css`
 		kol-input {

diff --git a/packages/themes/ecl/src/ecl-eu.ts b/packages/themes/ecl/src/ecl-eu.ts
@@ -839,6 +839,11 @@ export const ECL_EU = KoliBri.createTheme('ecl-eu', {
 		.hint {
 			font-size: 0.875rem;
 		}
+		.button:focus-within {
+			outline-color: var(--color-blue-130);
+			outline-style: solid;
+			outline-width: 2px;
+		}
 	`,
 	'KOL-INPUT-COLOR': css`
 		kol-input {

diff --git a/packages/themes/itzbund/src/index.ts b/packages/themes/itzbund/src/index.ts
@@ -1467,6 +1467,13 @@ export const ITZBund = KoliBri.createTheme('itzbund', {
 			order: 3;
 			padding: 0 var(--spacing);
 		}
+		.button:focus-within {
+			border-radius: 2rem;
+			outline-color: var(--color-achat) !important;
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 3px;
+		}
 	`,
 	'KOL-INPUT-RADIO': `/* INPUT */
 	:host input:focus {

diff --git a/packages/themes/mfm/src/index.ts b/packages/themes/mfm/src/index.ts
@@ -1804,7 +1804,15 @@ export const MFM = KoliBri.createTheme('mfm', {
 		}
 		:host .disabled {
 			opacity: 0.33;
-		}`,
+		}
+		.button:focus-within {
+			border-radius: 0.25rem;
+			outline-color: var(--color-ocean);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 3px;
+		}
+	`,
 	'KOL-INPUT-RADIO': `/* INPUT */
 		kol-input {
 			display: grid;

diff --git a/packages/themes/zoll/src/mapz.ts b/packages/themes/zoll/src/mapz.ts
@@ -1026,6 +1026,13 @@ export const MAPZ = KoliBri.createTheme('mapz', {
 		.disabled {
 			opacity: 0.33;
 		}
+		.button:focus-within {
+			border-radius: var(--kolibri-border-radius);
+			outline-color: var(--kolibri-color-outline);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 3px;
+		}
 	`,
 	'KOL-INPUT-RADIO': css`
 		label {

diff --git a/packages/themes/zoll/src/v3/components/checkbox.ts b/packages/themes/zoll/src/v3/components/checkbox.ts
@@ -161,4 +161,9 @@ export default css`
 	kol-input.button {
 		grid-template-areas: 'input label' 'error error' 'hint hint';
 	}
+
+	.button:focus-within {
+		outline: 0.125rem solid var(--color-blau);
+		outline-offset: 0.125rem;
+	}
 `;
diff --git a/packages/themes/zoll/src/zoll-v2.ts b/packages/themes/zoll/src/zoll-v2.ts
@@ -931,6 +931,13 @@ export const ZOLLv2 = KoliBri.createTheme('zoll-v2', {
 		.disabled {
 			opacity: 0.33;
 		}
+		.button:focus-within {
+			border-radius: var(--border-radius);
+			outline-color: var(--color-blau-dark);
+			outline-offset: 0.125rem;
+			outline-style: solid;
+			outline-width: 0.125rem;
+		}
 	`,
 	'KOL-INPUT-RADIO': css`
 		/* ALL INPUT, SELECT, TEXTAREA */