feat(blog): add aria-label attributes to improve accessibility

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>

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>

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({

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