Skip to content

fix(a11y): add aria-hidden to skeleton component#10159

Open
Vegapunk-debug wants to merge 7 commits intoshadcn-ui:mainfrom
Vegapunk-debug:fix/skeleton-aria-hidden
Open

fix(a11y): add aria-hidden to skeleton component#10159
Vegapunk-debug wants to merge 7 commits intoshadcn-ui:mainfrom
Vegapunk-debug:fix/skeleton-aria-hidden

Conversation

@Vegapunk-debug
Copy link
Copy Markdown

fix(a11y): add aria-hidden to skeleton component

Description

The Skeleton component is a decorative loading placeholder and should be hidden from assistive technologies. This PR adds aria-hidden="true" to all Skeleton variants to prevent screen readers from unnecessarily announcing these elements.

This approach is consistent with how other decorative elements in the codebase, such as breadcrumb separators and navigation menu indicators, are already handled.

Changes

Added the aria-hidden attribute to the root div of the Skeleton component. It is placed before the prop spread to ensure developers can still override it if an edge case requires visibility.

@@ -1,6 +1,7 @@
 <div
   data-slot="skeleton"
+  aria-hidden="true"
   className={cn("animate-pulse rounded-md bg-accent", className)}
   {...props}
 />

Affected Files

Variant / Context File Path
Primary Registry registry/new-york-v4/ui/skeleton.tsx
Base Registry registry/bases/base/ui/skeleton.tsx
Radix Registry registry/bases/radix/ui/skeleton.tsx
Base Example examples/base/ui/skeleton.tsx
Radix Example examples/radix/ui/skeleton.tsx
Base RTL Example examples/base/ui-rtl/skeleton.tsx
Radix RTL Example examples/radix/ui-rtl/skeleton.tsx

Verification

  • Lint passes (pnpm lint -- 1 task successful, 0 errors)
  • Change applied consistently across all 7 skeleton variants
  • No functional behavior change -- purely an accessibility attribute addition
  • Follows existing codebase conventions for decorative elements

THANK YOU

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 24, 2026

@Vegapunk-debug is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

@Vegapunk-debug
Copy link
Copy Markdown
Author

@HardikDewra Thanks for the review! Let me know if there's anything else needed from my end!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant