Merge pull request #13277 from rak-phillip/task/12812-alert-role

Add missing alert roles to User Retention, Create User, & Health Scale
rancher · Feb 5, 2025 · 8355788 · 8355788
2 parents 5a83c03 + 68e964d
commit 8355788
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
@@ -400,6 +400,8 @@ export default defineComponent({
     >
       <div
         v-if="cronHint"
+        role="alert"
+        :aria-label="cronHint"
       >
         {{ cronHint }}
       </div>

diff --git a/shell/components/GrowlManager.vue b/shell/components/GrowlManager.vue
@@ -87,7 +87,10 @@ export default {
     <div class="growl-list">
       <div
         v-for="(growl, idx) in stack"
-        :key="idx"
+        :key="growl.id"
+        role="alert"
+        :aria-labelledby="`growl-title-${ growl.id }`"
+        :aria-describedby="`growl-message-${ growl.id }`"
         :data-testid="`growl-list-item-${idx}`"
         :class="{'growl': true, ['bg-'+growl.color]: true}"
       >
@@ -103,11 +106,15 @@ export default {
               class="close hand icon icon-close"
               @click="close(growl)"
             />
-            <div class="growl-text-title">
+            <div
+              :id="`growl-title-${ growl.id }`"
+              class="growl-text-title"
+            >
               {{ growl.title }}
             </div>
             <p
               v-if="growl.message"
+              :id="`growl-message-${ growl.id }`"
               :class="{ 'has-title': !!growl.title }"
             >
               {{ growl.message }}

diff --git a/shell/components/form/ChangePassword.vue b/shell/components/form/ChangePassword.vue
@@ -407,6 +407,8 @@ export default {
         <Banner
           v-for="(err, i) in errorMessages"
           :key="i"
+          role="alert"
+          :aria-label="err"
           color="error"
           :label="err"
           class="mb-0"