fix: add aria-label attrs to buttons (#53)

* fix: add aria-label to buttons

* fix: add visually hidden descriptions for links

src/components/Card/index.tsx

@@ -19,7 +19,7 @@ export const Card: FC<Card> = memo(
   ({ hash, title, subtitle, onPlay, onFaved, onUnFaved, isFaved }) => (
     <Container data-test-card={hash}>
       <Cover hash={hash}>
-        <Button onClick={onPlay}>
+        <Button onClick={onPlay} aria-label={`Play ${title}`}>
           <PlayCircle size={64} />
         </Button>
       </Cover>
@@ -29,6 +29,7 @@ export const Card: FC<Card> = memo(
           <Subtitle>{subtitle || DEFAULT_SUBTITLE}</Subtitle>
         </div>
         <Button
+          aria-label={`Add ${title} to favorites`}
           onClick={!isFaved ? onFaved : onUnFaved}
           data-test-card-fave-button={hash}
         >

src/components/Header/index.tsx

@@ -1,30 +1,34 @@
 import Link from "next/link";
 import { Logo } from "@/components/Logo";
 import { HeartFill, Search, Sliders } from "@geist-ui/react-icons";
-import { Container, Navigation } from "./style";
+import { Container, Navigation, Hidden } from "./style";
 
 export const Header = () => (
   <Container>
     <Link href="/">
       <a>
         <Logo />
+        <Hidden>Home</Hidden>
       </a>
     </Link>
 
     <Navigation>
       <Link href="/search">
         <a>
-          <Search />
+          <Search aria-hidden="true" />
+          <Hidden>Search</Hidden>
         </a>
       </Link>
       <Link href="/favorites">
         <a>
-          <HeartFill color="var(--highlight-magenta)" />
+          <HeartFill color="var(--highlight-magenta)" aria-hidden="true" />
+          <Hidden>Favorites</Hidden>
         </a>
       </Link>
       <Link href="/settings">
         <a>
-          <Sliders />
+          <Sliders aria-hidden="true" />
+          <Hidden>Settings</Hidden>
         </a>
       </Link>
     </Navigation>

src/components/Header/style.ts

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { hidden } from "@/css/utils";
 
 export const Container = styled.header`
   display: grid;
@@ -20,14 +21,6 @@ export const Navigation = styled.nav`
   padding: 0;
 `;
 
-export const Toggle = styled.button`
-  border: none;
-  outline: none;
-  cursor: pointer;
-  appearance: none;
-  background: none;
-  color: var(--foreground);
-  padding: 0;
-  margin: 0;
-  font-size: 20px;
+export const Hidden = styled.span`
+  ${hidden}
 `;

src/components/Player/index.tsx

@@ -26,17 +26,17 @@ export const Player = () => {
       {!loading && <Title>{station.name}</Title>}
       <Controls>
         {playing && (
-          <Button onClick={() => pause()}>
+          <Button onClick={() => pause()} aria-label={`Pause ${station.name}`}>
             <Pause />
           </Button>
         )}
         {!playing && (
-          <Button onClick={async () => await play()}>
+          <Button onClick={async () => await play()} aria-label={`Play ${station.name}`}>
             <Play />
           </Button>
         )}
 
-        <Button onClick={() => stop()}>
+        <Button onClick={() => stop()} aria-label={`Stop playing ${station.name}`}>
           <Square />
         </Button>
       </Controls>

src/css/utils.ts

@@ -5,3 +5,13 @@ export const truncate = css`
   white-space: nowrap;
   text-overflow: ellipsis;
 `;
+
+export const hidden = css`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;