From 6d32afa7750d86738d4fce0de64dbcf0f4bbea65 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 24 Sep 2024 09:20:57 +0200
Subject: [PATCH] improve a11y of help text

---
 .changeset/serious-avocados-destroy.md        |  5 +++
 .../form/mt-help-text/mt-help-text.vue        | 35 +++++++++++++++----
 2 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/serious-avocados-destroy.md

diff --git a/.changeset/serious-avocados-destroy.md b/.changeset/serious-avocados-destroy.md
new file mode 100644
index 000000000..e3aef71bd
--- /dev/null
+++ 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
index 58dc6c153..726ba49c2 100644
--- 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>