395: pr feedback

it-at-m · Jan 22, 2025 · 98d442a · 98d442a
1 parent de45ab0
commit 98d442a
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 10 deletions.
diff --git a/src/components/Form/MucCheckbox.vue b/src/components/Form/MucCheckbox.vue
@@ -28,7 +28,7 @@ const modelValue = defineModel<boolean>({ default: false });
 
 const { label } = defineProps<{
   /**
-   * id of checkbox
+   *  Unique identifier for the checkbox. Required property used to associate the checkbox with its label and hint text for accessibility.
    */
   id: string;
   /**

diff --git a/src/components/Form/MucInput.vue b/src/components/Form/MucInput.vue
@@ -32,7 +32,7 @@
         class="m-input autocomplete-input"
         :type="type"
         v-model="modelValue"
-        :aria-describedby="'input-hint-' + id"
+        :aria-describedby="hint ? 'input-hint-' + id : undefined"
         :placeholder="placeholder"
         :required="required"
       />
@@ -67,6 +67,8 @@
       id="text-input-error"
       v-if="errorMsg"
       tabindex="0"
+      role="alert"
+      aria-live="polite"
     >
       {{ errorMsg }}
     </form-error-message>
@@ -100,7 +102,7 @@ const {
   dataList = [] as string[],
 } = defineProps<{
   /**
-   * id of input
+   *  Unique identifier for the input. Required property used to associate the input with its label and hint text for accessibility.
    */
   id: string;
   /**

diff --git a/src/components/Form/MucRadioButton.vue b/src/components/Form/MucRadioButton.vue
@@ -7,7 +7,7 @@
       :id="'radio-' + id"
       class="m-radios__input"
       type="radio"
-      :aria-describedby="'radio-hint-' + id"
+      :aria-describedby="hint ? 'radio-hint-' + id : undefined"
       :checked="isChecked"
       :disabled="isDisabled"
       @click.stop="clicked"
@@ -35,7 +35,7 @@ import { RadioButtonGroupKey } from "./MucRadioButtonTypes";
 
 const { value, disabled = false } = defineProps<{
   /**
-   * id of radiobutton
+   *  Unique identifier for the radiobutton. Required property used to associate the radiobutton with its label and hint text for accessibility.
    */
   id: string;
   /**

diff --git a/src/components/Form/MucSelect.vue b/src/components/Form/MucSelect.vue
@@ -25,7 +25,7 @@
         :id="'select-' + id"
         type="text"
         class="m-input m-combobox m-combobox--single"
-        :aria-describedby="'select-hint-' + id"
+        :aria-describedby="hint ? 'select-hint-' + id : undefined"
         v-model="searchValue"
         @click="openItemList"
       />
@@ -119,7 +119,7 @@ const {
   itemTitle = "title",
 } = defineProps<{
   /**
-   * id of select
+   * Unique identifier for the select. Required property used to associate the select with its label and hint text for accessibility.
    */
   id: string;
   /**

diff --git a/src/components/Form/MucTextArea.stories.ts b/src/components/Form/MucTextArea.stories.ts
@@ -43,7 +43,7 @@ export const Required = {
 export const BigTextArea = {
   args: {
     ...Default.args,
-    id: "big-test-area",
+    id: "big-text-area",
     rows: 7,
     label: "Big textarea",
     hint: "Write a lot of text",

diff --git a/src/components/Form/MucTextArea.vue b/src/components/Form/MucTextArea.vue
@@ -22,7 +22,7 @@
       <textarea
         :id="'textarea-' + id"
         class="m-textarea"
-        :aria-describedby="'textarea-hint-' + id"
+        :aria-describedby="hint ? 'textarea-hint-' + id : undefined"
         :rows="rows"
         :placeholder="placeholder"
         v-model="modelValue"
@@ -31,6 +31,8 @@
     <form-error-message
       v-if="errorMsg"
       tabindex="0"
+      role="alert"
+      aria-live="polite"
     >
       {{ errorMsg }}
     </form-error-message>
@@ -51,7 +53,7 @@ const {
   required = false,
 } = defineProps<{
   /**
-   * id of textarea
+   * Unique identifier for the textarea. Required property used  to associate the textarea with its label and hint text for accessibility.
    */
   id: string;
   /**