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 <[email protected]>

source/_patterns/01-elements/chips/_chip.hbs

@@ -1,39 +1,29 @@
 {{! 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"
 		id="chip-single-{{ variant }}{{ id-suffix }}"
 		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 }}

source/_patterns/01-elements/chips/_chip.json

@@ -0,0 +1,3 @@
+{
+	"label": "Title"
+}

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);
 	}
 }