Skip to content

Commit

Permalink
fix(VSkeletonLoader): remove aria-label when loading finished
Browse files Browse the repository at this point in the history
  • Loading branch information
KaelWD committed Jul 31, 2024
1 parent 48ca6ea commit 867b2ab
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 4 deletions.
1 change: 1 addition & 0 deletions packages/api-generator/src/locale/en/VSkeletonLoader.json
Original file line number Diff line number Diff line change
Expand Up @@ -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."
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down

0 comments on commit 867b2ab

Please sign in to comment.