mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-22 19:05:41 +00:00
Fix minor accessibility issue
This commit is contained in:
parent
3246c60a30
commit
3960b9eb16
@ -3,12 +3,13 @@ import {ElementType} from 'react'
|
|||||||
|
|
||||||
type SocialLink = {
|
type SocialLink = {
|
||||||
href: string
|
href: string
|
||||||
|
ariaLabel: string
|
||||||
icon: ElementType
|
icon: ElementType
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SocialLink({icon: Icon, href}: SocialLink) {
|
export function SocialLink({icon: Icon, href, ariaLabel}: SocialLink) {
|
||||||
return (
|
return (
|
||||||
<Link className="group -m-1 p-1" href={href}>
|
<Link className="group -m-1 p-1" href={href} aria-label={ariaLabel}>
|
||||||
<Icon
|
<Icon
|
||||||
className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"/>
|
className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"/>
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -222,17 +222,17 @@ export default function Home({articles}: { articles: Article[] }) {
|
|||||||
<div className="mt-6 flex gap-6">
|
<div className="mt-6 flex gap-6">
|
||||||
<SocialLink
|
<SocialLink
|
||||||
href="https://github.com/r-freeman"
|
href="https://github.com/r-freeman"
|
||||||
aria-label="Follow on GitHub"
|
ariaLabel="Follow on GitHub"
|
||||||
icon={GitHubIcon}
|
icon={GitHubIcon}
|
||||||
/>
|
/>
|
||||||
<SocialLink
|
<SocialLink
|
||||||
href="https://linkedin.com/in/r-freeman/"
|
href="https://linkedin.com/in/r-freeman/"
|
||||||
aria-label="Follow on LinkedIn"
|
ariaLabel="Follow on LinkedIn"
|
||||||
icon={LinkedInIcon}
|
icon={LinkedInIcon}
|
||||||
/>
|
/>
|
||||||
<SocialLink
|
<SocialLink
|
||||||
href="https://twitter.com/freemry"
|
href="https://twitter.com/freemry"
|
||||||
aria-label="Follow on Twitter"
|
ariaLabel="Follow on Twitter"
|
||||||
icon={TwitterIcon}
|
icon={TwitterIcon}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -83,7 +83,7 @@ export default function Projects() {
|
|||||||
<p className="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-indigo-500 dark:text-zinc-200">
|
<p className="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-indigo-500 dark:text-zinc-200">
|
||||||
<SocialLink
|
<SocialLink
|
||||||
href={project.link.href}
|
href={project.link.href}
|
||||||
aria-label={`Checkout ${project.name} on GitHub`}
|
ariaLabel={`Checkout ${project.name} on GitHub`}
|
||||||
icon={GitHubIcon}
|
icon={GitHubIcon}
|
||||||
/>
|
/>
|
||||||
<span className="ml-2">{project.link.label}</span>
|
<span className="ml-2">{project.link.label}</span>
|
||||||
|
Loading…
Reference in New Issue
Block a user