Skip to content

Commit 90be16a

Browse files
jonaskuskemfranzke
andcommitted
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]>
1 parent 4276aac commit 90be16a

File tree

3 files changed

+21
-13
lines changed

3 files changed

+21
-13
lines changed
+2-12
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,29 @@
11
{{! TODO: This would need to get enhanced later on by the additional possible attributes }}
22
{{#if selection}}
3-
<!-- [html-validate-disable-next input-missing-label -- label get read out on the input field already and could get aria hidden] -->
43
<input
54
class="elm-chip"
65
type="radio"
76
id="chip-single-{{ variant }}{{ id-suffix }}"
87
name="{{ name }}"
98
data-type="selection"
109
{{#if disabled }} disabled{{/if }}>
11-
<!-- [html-validate-disable-next prefer-native-element -- TODO: Evaluate again on this HTML] -->
1210
<label
1311
for="chip-single-{{ variant }}{{ id-suffix }}"
14-
role="button"
1512
{{#if variant }} data-variant="{{ variant }}"{{/if }}
1613
{{#if icon }} data-icon="{{ icon }}"{{/if }}
1714
{{#if iconAfter }} data-icon-after="{{ iconAfter }}"{{/if }}
18-
tabindex="0"
19-
aria-hidden="true"
2015
>{{ label }}</label>
2116
{{else}}
22-
<!-- [html-validate-disable-next input-missing-label -- label get read out on the input field already and could get aria hidden] -->
2317
<input
2418
class="elm-chip"
2519
type="checkbox"
26-
id="chip-multiple-{{ variant }}{{ id-suffix }}"
20+
id="chip-multiple{{#if disabled }}-disabled{{/if}}-{{ variant }}{{ id-suffix }}"
2721
data-type="filter"
2822
{{#if disabled }} disabled{{/if }}>
29-
<!-- [html-validate-disable-next prefer-native-element -- TODO: Evaluate again on this HTML] -->
3023
<label
31-
for="chip-multiple-{{ variant }}{{ id-suffix }}"
32-
role="button"
24+
for="chip-multiple{{#if disabled }}-disabled{{/if}}-{{ variant }}{{ id-suffix }}"
3325
{{#if variant }} data-variant="{{ variant }}"{{/if }}
3426
{{#if icon }} data-icon="{{ icon }}"{{/if }}
3527
{{#if iconAfter }} data-icon-after="{{ iconAfter }}"{{/if }}
36-
tabindex="0"
37-
aria-hidden="true"
3828
>{{ label }}</label>
3929
{{/if }}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"label": "Title"
3+
}

source/_patterns/01-elements/chips/chip.scss

+16-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
@import "../../../css/partials.meta";
12
@import "chip.variables";
23

34
.elm-chip {
45
& + label {
6+
--db-focus-outline-size: max(2px, 0.08em);
7+
58
align-items: center;
69
border: solid 1px $db-color-cool-gray-400;
710
border-radius: $chip---radius;
@@ -116,8 +119,20 @@
116119
}
117120
}
118121

122+
&:focus-visible {
123+
& + label {
124+
outline: var(--db-focus-outline-size)
125+
var(--db-focus-outline-style, solid)
126+
var(--db-focus-outline-color, currentColor);
127+
outline-offset: var(
128+
--db-focus-outline-offset,
129+
var(--db-focus-outline-size)
130+
);
131+
}
132+
}
133+
119134
&[type="checkbox"],
120135
&[type="radio"] {
121-
display: none;
136+
@include a11y-visually-hidden($partial: $partial);
122137
}
123138
}

0 commit comments

Comments
 (0)