From fa15a5b86c9456f0ab769f88b5c7daeb2b9f66c3 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <jonas.kuske@deutschebahn.com>
Date: Tue, 16 Jul 2024 07:42:36 +0200
Subject: [PATCH 1/3] fix(chips): add focus styles, make input focusable &
 expose label

---
 source/_patterns/01-elements/chips/_chip.hbs | 10 ++--------
 source/_patterns/01-elements/chips/chip.scss | 16 +++++++++++++++-
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/source/_patterns/01-elements/chips/_chip.hbs b/source/_patterns/01-elements/chips/_chip.hbs
index 3441b5e148..945e985506 100755
--- a/source/_patterns/01-elements/chips/_chip.hbs
+++ b/source/_patterns/01-elements/chips/_chip.hbs
@@ -11,29 +11,23 @@
 	<!-- [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.scss b/source/_patterns/01-elements/chips/chip.scss
index 362acdfae6..8d2bb8cbf4 100644
--- a/source/_patterns/01-elements/chips/chip.scss
+++ b/source/_patterns/01-elements/chips/chip.scss
@@ -2,6 +2,8 @@
 
 .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 +118,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);
 	}
 }

From ed3e74191d5dd91d87c8b9e592fd3eb58839870d Mon Sep 17 00:00:00 2001
From: Jonas Kuske <jonas.kuske@deutschebahn.com>
Date: Wed, 24 Jul 2024 14:27:17 +0200
Subject: [PATCH 2/3] chore(chips): remove html lint ignores, add label for
 single-chip entry in patternlab

---
 source/_patterns/01-elements/chips/_chip.hbs  | 4 ----
 source/_patterns/01-elements/chips/_chip.json | 3 +++
 2 files changed, 3 insertions(+), 4 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 945e985506..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,7 +7,6 @@
 		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 }}"
 		{{#if variant }} data-variant="{{ variant }}"{{/if }}
@@ -16,14 +14,12 @@
 		{{#if iconAfter }} data-icon-after="{{ iconAfter }}"{{/if }}
 		>{{ 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{{#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{{#if disabled }}-disabled{{/if}}-{{ variant }}{{ id-suffix }}"
 		{{#if variant }} data-variant="{{ variant }}"{{/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"
+}

From 6e16fc810692ee493878513f6175b84b66e0b2c5 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Thu, 25 Jul 2024 06:26:22 +0200
Subject: [PATCH 3/3] Update chip.scss

---
 source/_patterns/01-elements/chips/chip.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/_patterns/01-elements/chips/chip.scss b/source/_patterns/01-elements/chips/chip.scss
index 8d2bb8cbf4..87a954ba25 100644
--- a/source/_patterns/01-elements/chips/chip.scss
+++ b/source/_patterns/01-elements/chips/chip.scss
@@ -1,3 +1,4 @@
+@import "../../../css/partials.meta";
 @import "chip.variables";
 
 .elm-chip {