From eab480cd4b1aa336b3b1e3429f5d7a9be9f63903 Mon Sep 17 00:00:00 2001
From: Ricardo Casares <84963+ricardocasares@users.noreply.github.com>
Date: Wed, 10 Feb 2021 19:28:05 +0100
Subject: [PATCH] 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   |  3 ++-
 src/components/Header/index.tsx | 12 ++++++++----
 src/components/Header/style.ts  | 13 +++----------
 src/components/Player/index.tsx |  6 +++---
 src/css/utils.ts                | 10 ++++++++++
 5 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
index 3961ee30..7d8809df 100644
--- a/src/components/Card/index.tsx
+++ b/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}
         >
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 1dc64ccf..e3d963d1 100644
--- a/src/components/Header/index.tsx
+++ b/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>
diff --git a/src/components/Header/style.ts b/src/components/Header/style.ts
index f5f9d06c..f672ee82 100644
--- a/src/components/Header/style.ts
+++ b/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}
 `;
diff --git a/src/components/Player/index.tsx b/src/components/Player/index.tsx
index 044466a7..c84ba1dd 100644
--- a/src/components/Player/index.tsx
+++ b/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>
diff --git a/src/css/utils.ts b/src/css/utils.ts
index 2e324ecc..860d024c 100644
--- a/src/css/utils.ts
+++ b/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;
+`;