[a11y] Skeleton loaders have no ARIA attributes -- screen reader users get no loading feedback

[smirk-dev]

Problem

When the DevTrack dashboard loads data, skeleton loader components are displayed as placeholders. These skeletons have no ARIA attributes, so assistive technology users (screen reader users) receive zero feedback that the page is loading. When data populates and the skeletons are replaced, there is also no announcement to indicate the content is ready.

This is a standard accessibility gap that affects any user relying on VoiceOver, NVDA, TalkBack, or similar tools.

Steps to Reproduce

1. Open DevTrack with a screen reader enabled (VoiceOver on macOS or NVDA on Windows)
2. Navigate to the dashboard while data is loading
3. The skeleton placeholders render but nothing is announced
4. When data loads and components replace skeletons, there is no announcement

Expected Behaviour

• While loading: screen reader announces something like "Loading dashboard data" or similar
• After load: screen reader announces that content is available

Proposed Fix

• Add role="status" and aria-label="Loading" to skeleton wrapper components so assistive technology announces the loading state
• Add aria-live="polite" to the main content container so when widgets load in, the change is announced without being disruptive
• Ensure skeletons have aria-hidden="true" so the animated placeholder divs themselves are not read out, only the status message is

Scope

This is a purely additive change -- no existing functionality is touched. It only adds ARIA attributes to existing components. No visual changes required.

Testing

Verify with VoiceOver (macOS): open dashboard, hear "Loading" announced on load, hear content announced when data populates.

I am happy to implement this fix.

[github-actions]

Thanks for opening your first issue on DevTrack! 🎉

A maintainer will take a look shortly. In the meantime:

• Check the Contributing guide if you are planning to work on this
• Browse Discussions for Q&A and ideas
• Look for good first issue if you want somewhere to start

[Harish-SS56]

Hi @smirk-dev,

I would like to work on this issue under GSSoC 2026

I can improve the accessibility of the skeleton loading states by adding appropriate ARIA attributes such as role="status", aria-label, aria-live, and aria-hidden to ensure proper screen reader feedback during loading and content updates

I’ll also verify the behavior with keyboard and screen reader accessibility considerations while keeping the implementation non-intrusive and visually unchanged

Please assign this issue to me

Thank you

[smirk-dev]

@Harish-SS56 even i am a contributor, please read CONTRIBUTION.md and learn the best practices, i found the issue and i have started contributing, I will raise a pr for this, please do find bugs and create your own issues and then contribute