diff --git a/source/_patterns/01-elements/chips/_chip.hbs b/source/_patterns/01-elements/chips/_chip.hbs
index 3441b5e148..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}}
-
-
{{else}}
-
-
{{/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"
+}
diff --git a/source/_patterns/01-elements/chips/chip.scss b/source/_patterns/01-elements/chips/chip.scss
index 362acdfae6..87a954ba25 100644
--- a/source/_patterns/01-elements/chips/chip.scss
+++ b/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);
}
}