r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-22 23:45:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix minor accessibility issue

Browse Source
This commit is contained in:
r-freeman 2023-01-22 00:12:13 +00:00
parent 3246c60a30
commit 3960b9eb16
3 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/SocialLink.tsx
View File

@ -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>

6
pages/index.tsx
View File

@ -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>

2
pages/projects.tsx
View File

@ -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>