improve a11y of help text

shopware · Sep 25, 2024 · 6d32afa · 6d32afa
1 parent 07e243a
commit 6d32afa
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/.changeset/serious-avocados-destroy.md b/.changeset/serious-avocados-destroy.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Improve a11y of help text
diff --git a/packages/component-library/src/components/form/mt-help-text/mt-help-text.vue b/packages/component-library/src/components/form/mt-help-text/mt-help-text.vue
@@ -1,5 +1,5 @@
 <template>
-  <span
+  <button
     v-tooltip="{
       message: text,
       width: width,
@@ -11,8 +11,9 @@
     aria-label="help-text"
   >
     <mt-icon data-testid="mt-help-text__icon" name="solid-question-circle-s" />
+
     <span class="mt-help-text__tooltip-text">{{ text }}</span>
-  </span>
+  </button>
 </template>
 
 <script lang="ts">
@@ -71,16 +72,36 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style scoped>
 .mt-help-text {
-  color: $color-shopware-brand-500;
+  color: var(--color-icon-brand-default);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  pointer-events: auto;
+  position: relative;
+  border-radius: var(--border-radius-round);
+
+  &:focus-visible {
+    outline-offset: 0.25rem;
+    outline: 2px solid var(--color-border-brand-selected);
+  }
 
-  &__tooltip-text {
-    display: none;
+  &:where(:hover, :focus-visible) {
+    color: var(--color-icon-brand-hover);
   }
 }
+
+.mt-help-text::after {
+  content: "";
+  display: block;
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-icon-static-default);
+  z-index: -1;
+  border-radius: var(--border-radius-round);
+}
+
+.mt-help-text__tooltip-text {
+  display: none;
+}
 </style>