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

Author: jonaskuske

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

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