Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tooltip to progress meters #47

Closed
wants to merge 4 commits into from
Closed

Add tooltip to progress meters #47

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8e70861
first pass at tooltip
at-the-vr Mar 9, 2024
5319bc9
fix: minor pass at making tooltip mobile accessible
at-the-vr Mar 10, 2024
55a933b
formatting and aria
at-the-vr Mar 10, 2024
ea63289
fading transitions
at-the-vr Mar 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/components/achievements/Stat.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,16 @@ const query = `${subPath}?q=${isType}+${userFilter}`
class="pl-2"
>
<span
class="block w-[var(--bar-w)] min-w-[2px] bg-blue-purple-gradient h-2 rounded-full"
class="block w-[var(--bar-w)] min-w-[2px] bg-blue-purple-gradient h-2 rounded-full group relative"
style={`--bar-w: ${percentage}%;`}
>
<span class="sr-only">{repoCount} {type}</span>
<span
aria-hidden="true"
class="invisible absolute z-50 -mt-8 rounded bg-gray-100 p-1 text-neutral-700 opacity-0 transition-opacity duration-300 ease-in-out group-hover:visible group-hover:opacity-100"
>
{repoCount.toString()}
</span>
Comment on lines 50 to +56
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it might be good to use the existing sr-only element here instead of adding an extra one as the current approach impacts accessibility: a screenreader would read for example something like “starlight 22 reviews 22” instead of the current “starlight 22 reviews”.

Tailwind has a not-sr-only class for undoing sr-only styles, so you could probably use a similar approach to what you have now, but applying that class when the hover kicks in.

</span>
</span>
</li>
Expand Down
Loading