From 90be16a03629ca0a3c6218c92be67cfaed4910df Mon Sep 17 00:00:00 2001
From: Jonas Kuske <mail@jonaskuske.com>
Date: Tue, 6 Aug 2024 11:28:56 +0200
Subject: [PATCH] fix(chips): use built-in radiogroup / checkbox behavior for
 a11y (#890)

* fix(chips): add focus styles, make input focusable & expose label

* chore(chips): remove html lint ignores, add label for single-chip entry in patternlab

* Update chip.scss

---------

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
---
 source/_patterns/01-elements/chips/_chip.hbs  | 14 ++------------
 source/_patterns/01-elements/chips/_chip.json |  3 +++
 source/_patterns/01-elements/chips/chip.scss  | 17 ++++++++++++++++-
 3 files changed, 21 insertions(+), 13 deletions(-)
 create mode 100644 source/_patterns/01-elements/chips/_chip.json

diff --git a/source/_patterns/01-elements/chips/_chip.hbs b/source/_patterns/01-elements/chips/_chip.hbs
index 3441b5e148..69ef0d3100 100755
--- a/source/_patterns/01-elements/chips/_chip.hbs
+++ b/source/_patterns/01-elements/chips/_chip.hbs
@@ -1,6 +1,5 @@
 {{! TODO: This would need to get enhanced later on by the additional possible attributes }}
 {{#if selection}}
-	<!-- [html-validate-disable-next input-missing-label -- label get read out on the input field already and could get aria hidden] -->
 	<input
 		class="elm-chip"
 		type="radio"
@@ -8,32 +7,23 @@
 		name="{{ name }}"
 		data-type="selection"
 		{{#if disabled }} disabled{{/if }}>
-	<!-- [html-validate-disable-next prefer-native-element -- TODO: Evaluate again on this HTML] -->
 	<label
 		for="chip-single-{{ variant }}{{ id-suffix }}"
-		role="button"
 		{{#if variant }} data-variant="{{ variant }}"{{/if }}
 		{{#if icon }} data-icon="{{ icon }}"{{/if }}
 		{{#if iconAfter }} data-icon-after="{{ iconAfter }}"{{/if }}
-		tabindex="0"
-		aria-hidden="true"
 		>{{ label }}</label>
 {{else}}
-	<!-- [html-validate-disable-next input-missing-label -- label get read out on the input field already and could get aria hidden] -->
 	<input
 		class="elm-chip"
 		type="checkbox"
-		id="chip-multiple-{{ variant }}{{ id-suffix }}"
+		id="chip-multiple{{#if disabled }}-disabled{{/if}}-{{ variant }}{{ id-suffix }}"
 		data-type="filter"
 		{{#if disabled }} disabled{{/if }}>
-	<!-- [html-validate-disable-next prefer-native-element -- TODO: Evaluate again on this HTML] -->
 	<label
-		for="chip-multiple-{{ variant }}{{ id-suffix }}"
-		role="button"
+		for="chip-multiple{{#if disabled }}-disabled{{/if}}-{{ variant }}{{ id-suffix }}"
 		{{#if variant }} data-variant="{{ variant }}"{{/if }}
 		{{#if icon }} data-icon="{{ icon }}"{{/if }}
 		{{#if iconAfter }} data-icon-after="{{ iconAfter }}"{{/if }}
-		tabindex="0"
-		aria-hidden="true"
 		>{{ label }}</label>
 {{/if }}
diff --git a/source/_patterns/01-elements/chips/_chip.json b/source/_patterns/01-elements/chips/_chip.json
new file mode 100644
index 0000000000..62ffdd62ed
--- /dev/null
+++ b/source/_patterns/01-elements/chips/_chip.json
@@ -0,0 +1,3 @@
+{
+	"label": "Title"
+}
diff --git a/source/_patterns/01-elements/chips/chip.scss b/source/_patterns/01-elements/chips/chip.scss
index 362acdfae6..87a954ba25 100644
--- a/source/_patterns/01-elements/chips/chip.scss
+++ b/source/_patterns/01-elements/chips/chip.scss
@@ -1,7 +1,10 @@
+@import "../../../css/partials.meta";
 @import "chip.variables";
 
 .elm-chip {
 	& + label {
+		--db-focus-outline-size: max(2px, 0.08em);
+
 		align-items: center;
 		border: solid 1px $db-color-cool-gray-400;
 		border-radius: $chip---radius;
@@ -116,8 +119,20 @@
 		}
 	}
 
+	&:focus-visible {
+		& + label {
+			outline: var(--db-focus-outline-size)
+				var(--db-focus-outline-style, solid)
+				var(--db-focus-outline-color, currentColor);
+			outline-offset: var(
+				--db-focus-outline-offset,
+				var(--db-focus-outline-size)
+			);
+		}
+	}
+
 	&[type="checkbox"],
 	&[type="radio"] {
-		display: none;
+		@include a11y-visually-hidden($partial: $partial);
 	}
 }