fix(a11y): define whole input details as live instead of just messages

vuetifyjs · Sep 4, 2024 · 8fe9193 · 8fe9193
1 parent 970f827
commit 8fe9193
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/packages/vuetify/src/components/VInput/VInput.tsx b/packages/vuetify/src/components/VInput/VInput.tsx
@@ -209,9 +209,13 @@ export const VInput = genericComponent<new <T>(
           )}
 
           { hasDetails && (
-            <div class="v-input__details">
+            <div
+              id={ messagesId.value }
+              class="v-input__details"
+              role="alert"
+              aria-live="polite"
+            >
               <VMessages
-                id={ messagesId.value }
                 active={ hasMessages }
                 messages={ messages.value }
                 v-slots={{ message: slots.message }}

diff --git a/packages/vuetify/src/components/VMessages/VMessages.tsx b/packages/vuetify/src/components/VMessages/VMessages.tsx
@@ -64,8 +64,6 @@ export const VMessages = genericComponent<VMessagesSlots>()({
           textColorStyles.value,
           props.style,
         ]}
-        role="alert"
-        aria-live="polite"
       >
         { props.active && (
           messages.value.map((message, i) => (