File tree 3 files changed +21
-13
lines changed
source/_patterns/01-elements/chips
3 files changed +21
-13
lines changed Original file line number Diff line number Diff line change 1
1
{{! TODO: This would need to get enhanced later on by the additional possible attributes }}
2
2
{{ #if selection }}
3
- <!-- [html-validate-disable-next input-missing-label -- label get read out on the input field already and could get aria hidden] -->
4
3
<input
5
4
class =" elm-chip"
6
5
type =" radio"
7
6
id =" chip-single-{{ variant }}{{ id-suffix }} "
8
7
name =" {{ name }} "
9
8
data-type =" selection"
10
9
{{ #if disabled }} disabled{{ /if }} >
11
- <!-- [html-validate-disable-next prefer-native-element -- TODO: Evaluate again on this HTML] -->
12
10
<label
13
11
for =" chip-single-{{ variant }}{{ id-suffix }} "
14
- role =" button"
15
12
{{ #if variant }} data-variant =" {{ variant }} " {{ /if }}
16
13
{{ #if icon }} data-icon =" {{ icon }} " {{ /if }}
17
14
{{ #if iconAfter }} data-icon-after =" {{ iconAfter }} " {{ /if }}
18
- tabindex =" 0"
19
- aria-hidden =" true"
20
15
>{{ label }} </label >
21
16
{{ else }}
22
- <!-- [html-validate-disable-next input-missing-label -- label get read out on the input field already and could get aria hidden] -->
23
17
<input
24
18
class =" elm-chip"
25
19
type =" checkbox"
26
- id =" chip-multiple-{{ variant }}{{ id-suffix }} "
20
+ id =" chip-multiple{{ #if disabled }} -disabled {{ /if }} -{{ variant }}{{ id-suffix }} "
27
21
data-type =" filter"
28
22
{{ #if disabled }} disabled{{ /if }} >
29
- <!-- [html-validate-disable-next prefer-native-element -- TODO: Evaluate again on this HTML] -->
30
23
<label
31
- for =" chip-multiple-{{ variant }}{{ id-suffix }} "
32
- role =" button"
24
+ for =" chip-multiple{{ #if disabled }} -disabled{{ /if }} -{{ variant }}{{ id-suffix }} "
33
25
{{ #if variant }} data-variant =" {{ variant }} " {{ /if }}
34
26
{{ #if icon }} data-icon =" {{ icon }} " {{ /if }}
35
27
{{ #if iconAfter }} data-icon-after =" {{ iconAfter }} " {{ /if }}
36
- tabindex =" 0"
37
- aria-hidden =" true"
38
28
>{{ label }} </label >
39
29
{{ /if }}
Original file line number Diff line number Diff line change
1
+ {
2
+ "label" : " Title"
3
+ }
Original file line number Diff line number Diff line change
1
+ @import " ../../../css/partials.meta" ;
1
2
@import " chip.variables" ;
2
3
3
4
.elm-chip {
4
5
& + label {
6
+ --db-focus-outline-size : max (2px , 0.08em );
7
+
5
8
align-items : center ;
6
9
border : solid 1px $db-color-cool-gray-400 ;
7
10
border-radius : $chip---radius ;
116
119
}
117
120
}
118
121
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
+
119
134
& [type = " checkbox" ],
120
135
& [type = " radio" ] {
121
- display : none ;
136
+ @include a11y-visually-hidden ( $partial : $partial ) ;
122
137
}
123
138
}
You can’t perform that action at this time.
0 commit comments