Merge branch 'main' into remove-default-margin-from-base-field

shopware · Sep 25, 2024 · 3c17ac0 · 3c17ac0
2 parents bea59e6 + bb5c326
commit 3c17ac0
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 87 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>
diff --git a/packages/component-library/src/components/navigation/mt-link/mt-link.interactive.stories.ts b/packages/component-library/src/components/navigation/mt-link/mt-link.interactive.stories.ts
@@ -1,5 +1,4 @@
-import { within } from "@storybook/test";
-import { expect } from "@storybook/test";
+import { expect, userEvent, within } from "@storybook/test";
 
 import meta, { type MtLinkMeta, type MtLinkStory } from "./mt-link.stories";
 
@@ -27,11 +26,11 @@ export const VisualTestRenderExternalLinkDisabled: MtLinkStory = {
   args: {
     disabled: true,
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
 
-    const link = canvas.getByText("Link");
+    await userEvent.click(canvas.getByRole("link"));
 
-    expect(getComputedStyle(link).pointerEvents).toEqual("none");
+    expect(args.click).not.toHaveBeenCalled();
   },
 };
diff --git a/packages/component-library/src/components/navigation/mt-link/mt-link.stories.ts b/packages/component-library/src/components/navigation/mt-link/mt-link.stories.ts
@@ -4,13 +4,13 @@ import { fn } from "@storybook/test";
 import MtLink from "./mt-link.vue";
 import type { SlottedMeta } from "@/_internal/story-helper";
 
-export type MtLinkMeta = SlottedMeta<typeof MtLink, "default" | "close">;
+export type MtLinkMeta = SlottedMeta<typeof MtLink, "default" | "close" | "click">;
 
 export default {
   title: "Components/Navigation/mt-link",
   component: MtLink,
   args: {
-    as: "router-link",
+    as: "a",
     default: "Link",
     to: "/",
     variant: "primary",

diff --git a/packages/component-library/src/components/navigation/mt-link/mt-link.vue b/packages/component-library/src/components/navigation/mt-link/mt-link.vue
@@ -1,88 +1,41 @@
 <template>
   <component
     :is="as"
-    class="mt-link"
-    :class="linkClasses"
+    :class="[
+      'mt-link',
+      `mt-link--${variant}`,
+      {
+        'mt-link--disabled': disabled,
+      },
+    ]"
     :aria-disabled="disabled"
+    role="link"
     :tabindex="disabled ? -1 : 0"
     v-bind="to ? { ...$attrs, to } : $attrs"
-    @click="onClick"
+    @click="disabled ? undefined : $emit('click', $event)"
   >
     <slot />
   </component>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import type { PropType } from "vue";
-
-export default defineComponent({
-  name: "MtLink",
-
-  props: {
-    /**
-     * Set the element type of the link
-     */
-    as: {
-      type: String,
-      required: false,
-      default: "router-link",
-    },
-
-    /**
-     * Set the to prop of the router/nuxt-link
-     */
-    to: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-
-    /**
-     * Render the link in various styles
-     */
-    variant: {
-      type: String as PropType<"primary" | "critical">,
-      required: false,
-      default: "primary",
-      validator(value: string) {
-        if (!value.length) {
-          return true;
-        }
-        return ["primary", "critical"].includes(value);
-      },
-    },
-
-    /**
-     * Make the link unclickable
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    linkClasses() {
-      return {
-        [`mt-link--${this.variant}`]: !!this.variant,
-        "mt-link--disabled": this.disabled,
-      };
-    },
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    to?: string;
+    as?: string;
+    variant?: "primary" | "critical";
+    disabled?: boolean;
+  }>(),
+  {
+    as: "router-link",
+    variant: "primary",
+    disabled: false,
   },
+);
 
-  methods: {
-    onClick(event: MouseEvent) {
-      if (this.disabled) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        return;
-      }
-
-      this.$emit("click", event);
-    },
-  },
-});
+defineEmits<{
+  (e: "click", event: MouseEvent): void;
+}>();
 </script>
 
 <style scoped>
@@ -99,7 +52,6 @@ export default defineComponent({
 
 .mt-link:is(:disabled, .mt-link--disabled) {
   cursor: not-allowed;
-  pointer-events: none;
 }
 
 .mt-link--primary {