From 867b2abee41c5786f25a1e789216fa829eeafcf0 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 31 Jul 2024 23:33:49 +1000
Subject: [PATCH] fix(VSkeletonLoader): remove aria-label when loading finished

---
 .../api-generator/src/locale/en/VSkeletonLoader.json   |  1 +
 .../src/components/VSkeletonLoader/VSkeletonLoader.tsx | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VSkeletonLoader.json b/packages/api-generator/src/locale/en/VSkeletonLoader.json
index c78b20dfd02..293d00ac878 100644
--- a/packages/api-generator/src/locale/en/VSkeletonLoader.json
+++ b/packages/api-generator/src/locale/en/VSkeletonLoader.json
@@ -2,6 +2,7 @@
   "props": {
     "boilerplate": "Remove the loading animation from the skeleton.",
     "loading": "Applies a loading animation with a on-hover loading cursor. A value of **false** will only work when there is content in the `default` slot.",
+    "loadingText": "aria-label for the element in a loading state.",
     "type": "A string delimited list of skeleton components to create such as `type=\"text@3\"` or `type=\"card, list-item\"`. Will recursively generate a corresponding skeleton from the provided string. Also supports short-hand for multiple elements such as **article@3** and **paragraph@2** which will generate 3 _article_ skeletons and 2 _paragraph_ skeletons. Please see below for a list of available pre-defined options.",
     "types": "A custom types object that will be combined with the pre-defined options. For a list of available pre-defined options, see the **type** prop."
   }
diff --git a/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.tsx b/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.tsx
index 6d1616a80a3..363f1163b09 100644
--- a/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.tsx
+++ b/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.tsx
@@ -143,6 +143,11 @@ export const VSkeletonLoader = genericComponent()({
 
     useRender(() => {
       const isLoading = !slots.default || props.loading
+      const loadingProps = (props.boilerplate || !isLoading) ? {} : {
+        ariaLive: 'polite',
+        ariaLabel: t(props.loadingText),
+        role: 'alert',
+      }
 
       return (
         <div
@@ -159,10 +164,7 @@ export const VSkeletonLoader = genericComponent()({
             backgroundColorStyles.value,
             isLoading ? dimensionStyles.value : {},
           ]}
-          aria-busy={ !props.boilerplate ? isLoading : undefined }
-          aria-live={ !props.boilerplate ? 'polite' : undefined }
-          aria-label={ !props.boilerplate ? t(props.loadingText) : undefined }
-          role={ !props.boilerplate ? 'alert' : undefined }
+          { ...loadingProps }
         >
           { isLoading ? items.value : slots.default?.() }
         </div>