From 6de52535590771a77812042e93b352cf9281fe49 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Sat, 17 Jun 2023 23:15:38 +0900
Subject: [PATCH] feat(blog): add aria-label attributes to improve
 accessibility

---
 apps/blog/src/components/GithubLinkIcon.tsx                | 7 ++++++-
 apps/blog/src/components/Header/Buttons/SearchButton.tsx   | 7 ++++++-
 .../src/components/Header/Buttons/ThemeToggleButton.tsx    | 1 +
 apps/blog/src/components/Header/Header.tsx                 | 4 ++--
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/blog/src/components/GithubLinkIcon.tsx b/apps/blog/src/components/GithubLinkIcon.tsx
index 819b8d7..e723ee4 100644
--- a/apps/blog/src/components/GithubLinkIcon.tsx
+++ b/apps/blog/src/components/GithubLinkIcon.tsx
@@ -22,7 +22,12 @@ interface Props {
 
 export default ({ link, size, children }: Props) => {
 	return (
-		<StyledGithubLink size={size} href={link} target="_blank">
+		<StyledGithubLink
+			aria-label="GitHub repository"
+			size={size}
+			href={link}
+			target="_blank"
+		>
 			<FontAwesomeIcon icon={faGithub} />
 			{children}
 		</StyledGithubLink>
diff --git a/apps/blog/src/components/Header/Buttons/SearchButton.tsx b/apps/blog/src/components/Header/Buttons/SearchButton.tsx
index 1b27225..79c7d45 100644
--- a/apps/blog/src/components/Header/Buttons/SearchButton.tsx
+++ b/apps/blog/src/components/Header/Buttons/SearchButton.tsx
@@ -9,7 +9,12 @@ const SearchButton = () => {
 	return (
 		<>
 			<div>
-				<Link data-tip data-for="search" to="/search">
+				<Link
+					data-tip
+					data-for="search"
+					to="/search"
+					aria-label="go to search page"
+				>
 					<HeaderButton>
 						<FontAwesomeIcon icon={faSearch} />
 					</HeaderButton>
diff --git a/apps/blog/src/components/Header/Buttons/ThemeToggleButton.tsx b/apps/blog/src/components/Header/Buttons/ThemeToggleButton.tsx
index d969de8..68241a4 100644
--- a/apps/blog/src/components/Header/Buttons/ThemeToggleButton.tsx
+++ b/apps/blog/src/components/Header/Buttons/ThemeToggleButton.tsx
@@ -26,6 +26,7 @@ const ThemeToggleButton = () => {
 		<>
 			<StyledThemeButton
 				data-tip
+				aria-label="theme toggle"
 				data-for="theme"
 				onClick={() =>
 					dispatch({
diff --git a/apps/blog/src/components/Header/Header.tsx b/apps/blog/src/components/Header/Header.tsx
index 286cdbb..f85c8d8 100644
--- a/apps/blog/src/components/Header/Header.tsx
+++ b/apps/blog/src/components/Header/Header.tsx
@@ -45,8 +45,8 @@ export default () => {
 	return (
 		<Header>
 			<Container>
-				<Link to="/">
-					<Icon src="/icon/icon_circle.svg" />
+				<Link to="/" aria-label="homepage">
+					<Icon src="/icon/icon_circle.svg" alt="logo" />
 				</Link>
 				<Nav />
 				<Buttons />