fix(VSkeletonLoader): remove aria-label when loading finished

Author: KaelWD

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."
   }

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>