arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Skeleton): improve accessibility (#3613)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
kyyy
2025-04-23 03:06:05 +07:00
committed by GitHub
parent 80dfa88ea4
commit 3484832822
4 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/runtime/components/Skeleton.vue
View File

@@ -29,7 +29,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.skeleton ||
</script>
<template>
<Primitive :as="as" :class="ui({ class: props.class })">
<Primitive
:as="as"
aria-busy="true"
aria-label="loading"
aria-live="polite"
role="alert"
:class="ui({ class: props.class })"
>
<slot />
</Primitive>
</template>

2
src/theme/skeleton.ts
View File

@@ -1,3 +1,3 @@
export default {
base: 'animate-pulse rounded-md bg-elevated'
base: 'animate-pulse rounded-md bg-elevated aria-busy:cursor-progress'
}

4
test/components/__snapshots__/Skeleton-vue.spec.ts.snap
View File

@@ -1,5 +1,5 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Skeleton > renders with as correctly 1`] = `"<span class="animate-pulse rounded-md bg-elevated"></span>"`;
exports[`Skeleton > renders with as correctly 1`] = `"<span aria-busy="true" aria-label="loading" aria-live="polite" role="alert" class="animate-pulse rounded-md bg-elevated aria-busy:cursor-progress"></span>"`;
exports[`Skeleton > renders with class correctly 1`] = `"<div class="animate-pulse bg-elevated rounded-full size-12"></div>"`;
exports[`Skeleton > renders with class correctly 1`] = `"<div aria-busy="true" aria-label="loading" aria-live="polite" role="alert" class="animate-pulse bg-elevated aria-busy:cursor-progress rounded-full size-12"></div>"`;

4
test/components/__snapshots__/Skeleton.spec.ts.snap
View File

@@ -1,5 +1,5 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Skeleton > renders with as correctly 1`] = `"<span class="animate-pulse rounded-md bg-elevated"></span>"`;
exports[`Skeleton > renders with as correctly 1`] = `"<span aria-busy="true" aria-label="loading" aria-live="polite" role="alert" class="animate-pulse rounded-md bg-elevated aria-busy:cursor-progress"></span>"`;
exports[`Skeleton > renders with class correctly 1`] = `"<div class="animate-pulse bg-elevated rounded-full size-12"></div>"`;
exports[`Skeleton > renders with class correctly 1`] = `"<div aria-busy="true" aria-label="loading" aria-live="polite" role="alert" class="animate-pulse bg-elevated aria-busy:cursor-progress rounded-full size-12"></div>"`;