Skip to content

🎨 Palette: Add aria-labels to icon-only buttons #36

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

Open
fatelessdev wants to merge 1 commit into
base: master
Choose a base branch
from
Open

🎨 Palette: Add aria-labels to icon-only buttons #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 4 additions & 3 deletions app/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,21 +124,21 @@ export function Navbar() {
/>

<Link href="/orders">
<Button variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground hover:text-foreground transition-colors duration-300">
<Button variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground hover:text-foreground transition-colors duration-300" aria-label="Orders">
<Package className="h-4 w-4" />
<span className="sr-only">Orders</span>
</Button>
</Link>

<Link href="/account" className="hidden sm:block">
<Button variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground hover:text-foreground transition-colors duration-300">
<Button variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground hover:text-foreground transition-colors duration-300" aria-label="Account">
<User className="h-4 w-4" />
<span className="sr-only">Account</span>
</Button>
</Link>

<Link href="/wishlist">
<Button variant="ghost" size="icon" className="h-9 w-9 relative text-muted-foreground hover:text-foreground transition-colors duration-300">
<Button variant="ghost" size="icon" className="h-9 w-9 relative text-muted-foreground hover:text-foreground transition-colors duration-300" aria-label="Wishlist">
<Heart className="h-4 w-4" />
{wishlistItems.length > 0 && (
<span className="absolute -top-0.5 -right-0.5 h-4 w-4 rounded-full bg-red-accent text-white text-[10px] flex items-center justify-center font-semibold">
Expand All @@ -154,6 +154,7 @@ export function Navbar() {
size="icon"
className="h-9 w-9 relative text-muted-foreground hover:text-foreground transition-colors duration-300"
onClick={() => setIsOpen(true)}
aria-label="Cart"
>
<ShoppingBag className="h-4 w-4" />
{totalItems > 0 && (
Expand Down
10 changes: 5 additions & 5 deletions components/layout/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,10 @@ export function Navbar() {
autoFocus
className="h-9 w-32 md:w-48 px-3 bg-secondary/50 border border-input rounded-none text-sm focus:outline-none focus:ring-1 focus:ring-ring"
/>
<Button type="submit" variant="ghost" size="icon" className="h-9 w-9">
<Button type="submit" variant="ghost" size="icon" className="h-9 w-9" aria-label="Submit search">
<Search className="h-4 w-4" />
</Button>
<Button type="button" variant="ghost" size="icon" className="h-9 w-9" onClick={() => setShowSearch(false)}>
<Button type="button" variant="ghost" size="icon" className="h-9 w-9" onClick={() => setShowSearch(false)} aria-label="Close search">
<X className="h-4 w-4" />
</Button>
</form>
Expand All @@ -87,7 +87,7 @@ export function Navbar() {

{/* Wishlist */}
<Link href="/wishlist">
<Button variant="ghost" size="icon" className="h-9 w-9 relative">
<Button variant="ghost" size="icon" className="h-9 w-9 relative" aria-label="Wishlist">
<Heart className="h-4 w-4" />
{wishlistItems.length > 0 && (
<span className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-foreground text-background text-xs flex items-center justify-center">
Expand All @@ -100,14 +100,14 @@ export function Navbar() {

{/* Account */}
<Link href="/account">
<Button variant="ghost" size="icon" className="h-9 w-9">
<Button variant="ghost" size="icon" className="h-9 w-9" aria-label="Account">
<User className="h-4 w-4" />
<span className="sr-only">Account</span>
</Button>
</Link>

{/* Cart */}
<Button variant="ghost" size="icon" className="h-9 w-9 relative" onClick={() => setIsOpen(true)}>
<Button variant="ghost" size="icon" className="h-9 w-9 relative" onClick={() => setIsOpen(true)} aria-label="Cart">
<ShoppingBag className="h-4 w-4" />
{totalItems > 0 && (
<span className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-foreground text-background text-xs flex items-center justify-center">
Expand Down
1 change: 1 addition & 0 deletions components/ui/theme-toggle-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export default function ThemeToggleButton({
size="icon"
className="w-9 p-0 h-9 relative group"
name="Theme Toggle Button"
aria-label="Toggle theme"
>
<SunIcon className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<MoonIcon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
Expand Down