From 1e8cb2f9181b0818435604d32ca764074347b1e1 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Mon, 4 Nov 2024 15:13:56 +0100
Subject: [PATCH 1/5] migrate mt-field-error to custom i18n

---
 .../mt-field-error/mt-field-error.vue         | 102 +++++++++---------
 1 file changed, 50 insertions(+), 52 deletions(-)

diff --git a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
index d9c7c26df..2f92f5bad 100644
--- a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
+++ b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
@@ -13,52 +13,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 import MtIcon from "../../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
+import { useI18n } from "@/composables/useI18n";
 
 export default defineComponent({
   name: "MtFieldError",
 
-  i18n: {
-    messages: {
-      en: {
-        "mt-field-error": {
-          FRAMEWORK__MISSING_PRIVILEGE_ERROR: "Missing permissions",
-          FRAMEWORK__DELETE_RESTRICTED: "Deletion failed",
-          INVALID_MEDIA_URL: "Please enter a valid URL to upload a file.",
-          CONTENT__MISSING_RULE_TYPE_EXCEPTION: "You must choose a type for this rule.",
-          CONTENT__INVALID_CATEGORY_TYPE_AS_ENTRY_POINT:
-            "The type can not be assigned while category is an entry point.",
-          SHOPWARE_INVALID_IP: "Please enter a valid IP address.",
-          INVALID_URL: "Please enter a valid url.",
-          INVALID_MAIL: "Please enter a valid email address.",
-          FRAMEWORK__RATE_LIMIT_EXCEEDED:
-            "Too many requests. Please wait {seconds} seconds before trying again.",
-          DUPLICATED_URL: "This URL is already in use. Please choose another URL.",
-          "c1051bb4-d103-4f74-8988-acbcafc7fdc3": "This field must not be empty.",
-        },
-      },
-      de: {
-        "mt-field-error": {
-          FRAMEWORK__MISSING_PRIVILEGE_ERROR: "Fehlende Berechtigungen",
-          FRAMEWORK__DELETE_RESTRICTED: "Löschen fehlgeschlagen",
-          INVALID_MEDIA_URL: "Bitte gib eine gültige URL ein, um eine Datei hochzuladen.",
-          CONTENT__MISSING_RULE_TYPE_EXCEPTION: "Du musst einen Typ für diese Regel auswählen.",
-          CONTENT__INVALID_CATEGORY_TYPE_AS_ENTRY_POINT:
-            "Dieser Typ kann nicht gewählt werden, während die Kategorie als Einstiegspunkt festgelegt ist.",
-          SHOPWARE_INVALID_IP: "Bitte gib eine gültige IP-Adresse ein.",
-          INVALID_URL: "Bitte gib eine gültige URL ein.",
-          INVALID_MAIL: "Bitte gib eine gültige E-Mail-Adresse ein.",
-          FRAMEWORK__RATE_LIMIT_EXCEEDED:
-            "Zu viele Anfragen. Bitte warten Sie {seconds} Sekunden, bevor Sie es erneut versuchen.",
-          DUPLICATED_URL: "Diese URL wird bereits genutzt. Bitte wähle eine andere Domain.",
-          "c1051bb4-d103-4f74-8988-acbcafc7fdc3": "Dieses Feld darf nicht leer sein",
-        },
-      },
-    },
-  },
-
   components: {
     "mt-icon": MtIcon,
     "mt-text": MtText,
@@ -72,20 +34,56 @@ export default defineComponent({
     },
   },
 
-  computed: {
-    errorMessage(): string {
-      if (!this.error) {
-        return "";
-      }
+  setup(props) {
+    const errorMessage = computed(() => {
+      if (!props.error) return "";
 
-      const translationKey = `mt-field-error.${this.error.code}`;
-      const translation = this.$tc(translationKey, 1, this.error.parameters || {});
+      const translation = t(props.error.code, props.error.parameters || {});
+      const noTranslationFound = translation === props.error.code;
 
-      if (translation === translationKey) {
-        return this.error.detail;
-      }
-      return translation;
-    },
+      return noTranslationFound ? props.error.detail : translation;
+    });
+
+    const { t } = useI18n({
+      messages: {
+        en: {
+          "mt-field-error": {
+            FRAMEWORK__MISSING_PRIVILEGE_ERROR: "Missing permissions",
+            FRAMEWORK__DELETE_RESTRICTED: "Deletion failed",
+            INVALID_MEDIA_URL: "Please enter a valid URL to upload a file.",
+            CONTENT__MISSING_RULE_TYPE_EXCEPTION: "You must choose a type for this rule.",
+            CONTENT__INVALID_CATEGORY_TYPE_AS_ENTRY_POINT:
+              "The type can not be assigned while category is an entry point.",
+            SHOPWARE_INVALID_IP: "Please enter a valid IP address.",
+            INVALID_URL: "Please enter a valid url.",
+            INVALID_MAIL: "Please enter a valid email address.",
+            FRAMEWORK__RATE_LIMIT_EXCEEDED:
+              "Too many requests. Please wait {seconds} seconds before trying again.",
+            DUPLICATED_URL: "This URL is already in use. Please choose another URL.",
+            "c1051bb4-d103-4f74-8988-acbcafc7fdc3": "This field must not be empty.",
+          },
+        },
+        de: {
+          "mt-field-error": {
+            FRAMEWORK__MISSING_PRIVILEGE_ERROR: "Fehlende Berechtigungen",
+            FRAMEWORK__DELETE_RESTRICTED: "Löschen fehlgeschlagen",
+            INVALID_MEDIA_URL: "Bitte gib eine gültige URL ein, um eine Datei hochzuladen.",
+            CONTENT__MISSING_RULE_TYPE_EXCEPTION: "Du musst einen Typ für diese Regel auswählen.",
+            CONTENT__INVALID_CATEGORY_TYPE_AS_ENTRY_POINT:
+              "Dieser Typ kann nicht gewählt werden, während die Kategorie als Einstiegspunkt festgelegt ist.",
+            SHOPWARE_INVALID_IP: "Bitte gib eine gültige IP-Adresse ein.",
+            INVALID_URL: "Bitte gib eine gültige URL ein.",
+            INVALID_MAIL: "Bitte gib eine gültige E-Mail-Adresse ein.",
+            FRAMEWORK__RATE_LIMIT_EXCEEDED:
+              "Zu viele Anfragen. Bitte warten Sie {seconds} Sekunden, bevor Sie es erneut versuchen.",
+            DUPLICATED_URL: "Diese URL wird bereits genutzt. Bitte wähle eine andere Domain.",
+            "c1051bb4-d103-4f74-8988-acbcafc7fdc3": "Dieses Feld darf nicht leer sein",
+          },
+        },
+      },
+    });
+
+    return { errorMessage };
   },
 });
 </script>

From 5df5585fcc17e25c8267974f22742c5e3eca91b5 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Mon, 4 Nov 2024 15:16:50 +0100
Subject: [PATCH 2/5] migrate mt-field-error to composition api

---
 .../mt-field-error/mt-field-error.vue         | 109 ++++++++----------
 1 file changed, 46 insertions(+), 63 deletions(-)

diff --git a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
index 2f92f5bad..5daebc71a 100644
--- a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
+++ b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
@@ -12,78 +12,61 @@
   </mt-text>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
 import MtIcon from "../../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
 import { useI18n } from "@/composables/useI18n";
 
-export default defineComponent({
-  name: "MtFieldError",
+const props = defineProps<{
+  error?: Record<string, any> | null;
+}>();
 
-  components: {
-    "mt-icon": MtIcon,
-    "mt-text": MtText,
-  },
-
-  props: {
-    error: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-  },
-
-  setup(props) {
-    const errorMessage = computed(() => {
-      if (!props.error) return "";
+const errorMessage = computed(() => {
+  if (!props.error) return "";
 
-      const translation = t(props.error.code, props.error.parameters || {});
-      const noTranslationFound = translation === props.error.code;
+  const translation = t(props.error.code, props.error.parameters || {});
+  const noTranslationFound = translation === props.error.code;
 
-      return noTranslationFound ? props.error.detail : translation;
-    });
+  return noTranslationFound ? props.error.detail : translation;
+});
 
-    const { t } = useI18n({
-      messages: {
-        en: {
-          "mt-field-error": {
-            FRAMEWORK__MISSING_PRIVILEGE_ERROR: "Missing permissions",
-            FRAMEWORK__DELETE_RESTRICTED: "Deletion failed",
-            INVALID_MEDIA_URL: "Please enter a valid URL to upload a file.",
-            CONTENT__MISSING_RULE_TYPE_EXCEPTION: "You must choose a type for this rule.",
-            CONTENT__INVALID_CATEGORY_TYPE_AS_ENTRY_POINT:
-              "The type can not be assigned while category is an entry point.",
-            SHOPWARE_INVALID_IP: "Please enter a valid IP address.",
-            INVALID_URL: "Please enter a valid url.",
-            INVALID_MAIL: "Please enter a valid email address.",
-            FRAMEWORK__RATE_LIMIT_EXCEEDED:
-              "Too many requests. Please wait {seconds} seconds before trying again.",
-            DUPLICATED_URL: "This URL is already in use. Please choose another URL.",
-            "c1051bb4-d103-4f74-8988-acbcafc7fdc3": "This field must not be empty.",
-          },
-        },
-        de: {
-          "mt-field-error": {
-            FRAMEWORK__MISSING_PRIVILEGE_ERROR: "Fehlende Berechtigungen",
-            FRAMEWORK__DELETE_RESTRICTED: "Löschen fehlgeschlagen",
-            INVALID_MEDIA_URL: "Bitte gib eine gültige URL ein, um eine Datei hochzuladen.",
-            CONTENT__MISSING_RULE_TYPE_EXCEPTION: "Du musst einen Typ für diese Regel auswählen.",
-            CONTENT__INVALID_CATEGORY_TYPE_AS_ENTRY_POINT:
-              "Dieser Typ kann nicht gewählt werden, während die Kategorie als Einstiegspunkt festgelegt ist.",
-            SHOPWARE_INVALID_IP: "Bitte gib eine gültige IP-Adresse ein.",
-            INVALID_URL: "Bitte gib eine gültige URL ein.",
-            INVALID_MAIL: "Bitte gib eine gültige E-Mail-Adresse ein.",
-            FRAMEWORK__RATE_LIMIT_EXCEEDED:
-              "Zu viele Anfragen. Bitte warten Sie {seconds} Sekunden, bevor Sie es erneut versuchen.",
-            DUPLICATED_URL: "Diese URL wird bereits genutzt. Bitte wähle eine andere Domain.",
-            "c1051bb4-d103-4f74-8988-acbcafc7fdc3": "Dieses Feld darf nicht leer sein",
-          },
-        },
+const { t } = useI18n({
+  messages: {
+    en: {
+      "mt-field-error": {
+        FRAMEWORK__MISSING_PRIVILEGE_ERROR: "Missing permissions",
+        FRAMEWORK__DELETE_RESTRICTED: "Deletion failed",
+        INVALID_MEDIA_URL: "Please enter a valid URL to upload a file.",
+        CONTENT__MISSING_RULE_TYPE_EXCEPTION: "You must choose a type for this rule.",
+        CONTENT__INVALID_CATEGORY_TYPE_AS_ENTRY_POINT:
+          "The type can not be assigned while category is an entry point.",
+        SHOPWARE_INVALID_IP: "Please enter a valid IP address.",
+        INVALID_URL: "Please enter a valid url.",
+        INVALID_MAIL: "Please enter a valid email address.",
+        FRAMEWORK__RATE_LIMIT_EXCEEDED:
+          "Too many requests. Please wait {seconds} seconds before trying again.",
+        DUPLICATED_URL: "This URL is already in use. Please choose another URL.",
+        "c1051bb4-d103-4f74-8988-acbcafc7fdc3": "This field must not be empty.",
       },
-    });
-
-    return { errorMessage };
+    },
+    de: {
+      "mt-field-error": {
+        FRAMEWORK__MISSING_PRIVILEGE_ERROR: "Fehlende Berechtigungen",
+        FRAMEWORK__DELETE_RESTRICTED: "Löschen fehlgeschlagen",
+        INVALID_MEDIA_URL: "Bitte gib eine gültige URL ein, um eine Datei hochzuladen.",
+        CONTENT__MISSING_RULE_TYPE_EXCEPTION: "Du musst einen Typ für diese Regel auswählen.",
+        CONTENT__INVALID_CATEGORY_TYPE_AS_ENTRY_POINT:
+          "Dieser Typ kann nicht gewählt werden, während die Kategorie als Einstiegspunkt festgelegt ist.",
+        SHOPWARE_INVALID_IP: "Bitte gib eine gültige IP-Adresse ein.",
+        INVALID_URL: "Bitte gib eine gültige URL ein.",
+        INVALID_MAIL: "Bitte gib eine gültige E-Mail-Adresse ein.",
+        FRAMEWORK__RATE_LIMIT_EXCEEDED:
+          "Zu viele Anfragen. Bitte warten Sie {seconds} Sekunden, bevor Sie es erneut versuchen.",
+        DUPLICATED_URL: "Diese URL wird bereits genutzt. Bitte wähle eine andere Domain.",
+        "c1051bb4-d103-4f74-8988-acbcafc7fdc3": "Dieses Feld darf nicht leer sein",
+      },
+    },
   },
 });
 </script>

From 29a9334f49d27798d1a1c8e2fa8edb6feaf47c6e Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Mon, 4 Nov 2024 15:19:53 +0100
Subject: [PATCH 3/5] migrate mt-field-error over to plain css

---
 .../_internal/mt-field-error/mt-field-error.vue  | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
index 5daebc71a..e6b696dce 100644
--- a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
+++ b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
@@ -1,14 +1,15 @@
 <template>
   <mt-text
+    v-if="!!error"
     as="span"
     size="2xs"
     color="color-text-critical-default"
-    v-if="!!error"
     class="mt-field__error"
     aria-label="Error message"
   >
-    <mt-icon name="solid-exclamation-circle" />
-    {{ errorMessage }}
+    <mt-icon name="solid-exclamation-circle" size="0.75rem" />
+
+    <span>{{ errorMessage }}</span>
   </mt-text>
 </template>
 
@@ -71,17 +72,12 @@ const { t } = useI18n({
 });
 </script>
 
-<style lang="scss">
+<style scoped>
 .mt-field__error {
   display: flex;
   align-items: center;
   gap: 4px;
   margin-top: 4px;
-
-  #meteor-icon-kit__solid-exclamation-circle {
-    width: 12px;
-    height: 12px;
-    color: var(--color-icon-critical-default);
-  }
+  color: var(--color-icon-critical-default);
 }
 </style>

From 7ca86a27d61627710f577684911b95779a2c84c0 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Mon, 4 Nov 2024 15:23:48 +0100
Subject: [PATCH 4/5] improve accessibility of the mt-field-error

---
 .changeset/rude-shoes-rush.md                                | 5 +++++
 .../form/_internal/mt-field-error/mt-field-error.vue         | 3 +--
 2 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/rude-shoes-rush.md

diff --git a/.changeset/rude-shoes-rush.md b/.changeset/rude-shoes-rush.md
new file mode 100644
index 000000000..36ec2ecf0
--- /dev/null
+++ b/.changeset/rude-shoes-rush.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Improve accessibility of mt-field-error
diff --git a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
index e6b696dce..09bfcf57b 100644
--- a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
+++ b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
@@ -5,9 +5,8 @@
     size="2xs"
     color="color-text-critical-default"
     class="mt-field__error"
-    aria-label="Error message"
   >
-    <mt-icon name="solid-exclamation-circle" size="0.75rem" />
+    <mt-icon name="solid-exclamation-circle" size="0.75rem" aria-hidden="true" />
 
     <span>{{ errorMessage }}</span>
   </mt-text>

From 6fac62599813051e3fd83f31bd2ea5135fea0413 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Mon, 4 Nov 2024 16:05:32 +0100
Subject: [PATCH 5/5] remove unnecessary play test

---
 .../mt-progress-bar.interactive.stories.ts                | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/component-library/src/components/feedback-indicator/mt-progress-bar/mt-progress-bar.interactive.stories.ts b/packages/component-library/src/components/feedback-indicator/mt-progress-bar/mt-progress-bar.interactive.stories.ts
index bb6c3e245..72a4f29d2 100644
--- a/packages/component-library/src/components/feedback-indicator/mt-progress-bar/mt-progress-bar.interactive.stories.ts
+++ b/packages/component-library/src/components/feedback-indicator/mt-progress-bar/mt-progress-bar.interactive.stories.ts
@@ -83,14 +83,6 @@ export const VisualTestError: MtProgressBarStory = {
       detail: "Error while sending variants",
     },
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const errorMessage = canvas.getByLabelText("Error message");
-
-    expect(errorMessage).toBeDefined();
-    expect(errorMessage.innerText).toContain("Error while sending variants");
-  },
 };
 
 export const VisualTestLabel: MtProgressBarStory = {