From f2139fe57f9c1bc4869c47c730e852fa6954392c Mon Sep 17 00:00:00 2001
From: Mishel Ghukasyan <mishelghukasyan@Mishels-Mini.lan>
Date: Mon, 24 Apr 2023 18:42:26 -0700
Subject: [PATCH 1/6] added aria labels on Navbar logo and social links

---
 components/Nav/Navbar.js | 5 +++--
 components/Nav/Social.js | 9 +++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/Nav/Navbar.js b/components/Nav/Navbar.js
index 4052027aa..b248c726f 100644
--- a/components/Nav/Navbar.js
+++ b/components/Nav/Navbar.js
@@ -150,9 +150,10 @@ class ModalContainer extends PureComponent {
   }
 }
 
-const LogoLink = styled(Link).attrs((/* props */) => ({
+const LogoLink = styled(Link).attrs(({ ariaLabel }) => ({
   unstyled: true,
   href: '/',
+  'aria-label': ariaLabel,
 }))`
   display: inline-block;
   vertical-align: center;
@@ -172,7 +173,7 @@ class Navbar extends PureComponent {
       <Wrapper $transparent={transparent}>
         <NormalNavbar>
           <StartWrapper>
-            <LogoLink>
+            <LogoLink ariaLabel="Home Page">
               <Logo />
             </LogoLink>
             <NavLinks />
diff --git a/components/Nav/Social.js b/components/Nav/Social.js
index d0e8eaff7..2d6c07194 100644
--- a/components/Nav/Social.js
+++ b/components/Nav/Social.js
@@ -11,8 +11,9 @@ const Wrapper = styled.nav`
   flex: 1 1 auto;
 `;
 
-const SocialLink = styled(Link).attrs((/* props */) => ({
+const SocialLink = styled(Link).attrs(props => ({
   unstyled: true,
+  'aria-label': props.ariaLabel,
 }))`
   display: flex;
   margin-right: ${rem(20)};
@@ -75,16 +76,16 @@ const Spectrum = () => (
 
 const Social = props => (
   <Wrapper {...props}>
-    <SocialLink href="https://spectrum.chat/styled-components/">
+    <SocialLink href="https://spectrum.chat/styled-components/" ariaLabel="Spectrum Chat">
       <Spectrum />
     </SocialLink>
     {/* <SocialLink href="https://twitter.com/someone">
       <Twitter />
     </SocialLink> */}
-    <SocialLink href="https://github.com/styled-components">
+    <SocialLink href="https://github.com/styled-components" ariaLabel="GitHub">
       <StyledIcon as={Github} height="18" />
     </SocialLink>
-    <SocialLink href="https://medium.com/styled-components">
+    <SocialLink href="https://medium.com/styled-components" ariaLabel="Medium.com">
       <StyledIcon as={MediumM} height="18" />
     </SocialLink>
   </Wrapper>

From bd7f52d51587393be3edcc6555e7091cd88a9746 Mon Sep 17 00:00:00 2001
From: Mishel Ghukasyan <mishelghukasyan@Mishels-Mini.lan>
Date: Mon, 24 Apr 2023 20:29:51 -0700
Subject: [PATCH 2/6] added aria labels on mobile Nav buttons and icons

---
 components/Nav/MobileNavbar.js | 10 +++++++---
 components/Nav/Navbar.js       |  2 +-
 components/Nav/Search.js       |  2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/Nav/MobileNavbar.js b/components/Nav/MobileNavbar.js
index 3bd01c100..323307493 100644
--- a/components/Nav/MobileNavbar.js
+++ b/components/Nav/MobileNavbar.js
@@ -85,7 +85,7 @@ const StyledIcon = styled.div`
 
 const MobileNavbar = props => {
   const { isSideFolded, isMobileNavFolded, onSideToggle, onMobileNavToggle, showSideNav, onSearchButtonClick } = props;
-
+  console.log(isMobileNavFolded);
   return (
     <Wrapper>
       {showSideNav !== false && (
@@ -98,11 +98,15 @@ const MobileNavbar = props => {
         <Logo $compact />
       </LogoLink>
       <div>
-        <NavButton onClick={onSearchButtonClick}>
+        <NavButton aria-label="Search" onClick={onSearchButtonClick}>
           <StyledIcon as={Search} size={28} />
         </NavButton>
 
-        <NavButton onClick={onMobileNavToggle} $active={!isMobileNavFolded}>
+        <NavButton
+          onClick={onMobileNavToggle}
+          $active={!isMobileNavFolded}
+          aria-label={!isMobileNavFolded ? 'Close Navigation' : 'Open Navigation'}
+        >
           <ArrowWrapper $shouldRotate={!isMobileNavFolded}>
             <StyledIcon as={KeyboardArrowDown} size={36} />
           </ArrowWrapper>
diff --git a/components/Nav/Navbar.js b/components/Nav/Navbar.js
index b248c726f..1294bfe84 100644
--- a/components/Nav/Navbar.js
+++ b/components/Nav/Navbar.js
@@ -136,7 +136,7 @@ class ModalContainer extends PureComponent {
     return (
       <>
         <AlgoliaModalHeader $isOpen={this.props.isOpen}>
-          <button onClick={this.onCloseButtonClick}>
+          <button onClick={this.onCloseButtonClick} aria-label="Close Search Bar">
             <StyledModalCloseIcon />
           </button>
         </AlgoliaModalHeader>
diff --git a/components/Nav/Search.js b/components/Nav/Search.js
index 25d5cccfa..85498dabf 100644
--- a/components/Nav/Search.js
+++ b/components/Nav/Search.js
@@ -164,7 +164,7 @@ const Search = ({ isDocs, className }) => {
   return (
     <Wrapper className={className}>
       <GlobalStyles />
-      <Button>
+      <Button aria-label="Search">
         <StyledSearchIcon />
       </Button>
       <Input id={INPUT_ID} placeholder={isDocs ? `Search ...` : `Search docs ...`} ref={searchInput} type="search" />

From 6b1de25593233c73aba6093f5bbf75b61131ba29 Mon Sep 17 00:00:00 2001
From: Mishel Ghukasyan <mishelghukasyan@Mishels-Mini.lan>
Date: Mon, 24 Apr 2023 21:34:55 -0700
Subject: [PATCH 3/6] added aria labels on mobile Nav buttons/icons, and slider

---
 components/Nav/MobileNavbar.js    | 8 ++++++--
 components/Nav/Navbar.js          | 2 +-
 components/Slider/Navigation.js   | 4 ++--
 components/Slider/ShowcaseBody.js | 4 ++--
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/components/Nav/MobileNavbar.js b/components/Nav/MobileNavbar.js
index 323307493..fc72474b0 100644
--- a/components/Nav/MobileNavbar.js
+++ b/components/Nav/MobileNavbar.js
@@ -85,11 +85,15 @@ const StyledIcon = styled.div`
 
 const MobileNavbar = props => {
   const { isSideFolded, isMobileNavFolded, onSideToggle, onMobileNavToggle, showSideNav, onSearchButtonClick } = props;
-  console.log(isMobileNavFolded);
+
   return (
     <Wrapper>
       {showSideNav !== false && (
-        <NavButton $active={!isSideFolded} onClick={onSideToggle}>
+        <NavButton
+          $active={!isSideFolded}
+          onClick={onSideToggle}
+          aria-label={!isSideFolded ? 'Close side menu' : 'Open side menu'}
+        >
           {isSideFolded ? <FoldIcon /> : <CloseIcon />}
         </NavButton>
       )}
diff --git a/components/Nav/Navbar.js b/components/Nav/Navbar.js
index 1294bfe84..6b1025947 100644
--- a/components/Nav/Navbar.js
+++ b/components/Nav/Navbar.js
@@ -173,7 +173,7 @@ class Navbar extends PureComponent {
       <Wrapper $transparent={transparent}>
         <NormalNavbar>
           <StartWrapper>
-            <LogoLink ariaLabel="Home Page">
+            <LogoLink ariaLabel="Styled Components Home Page">
               <Logo />
             </LogoLink>
             <NavLinks />
diff --git a/components/Slider/Navigation.js b/components/Slider/Navigation.js
index 524949de3..34cbf2d97 100644
--- a/components/Slider/Navigation.js
+++ b/components/Slider/Navigation.js
@@ -102,7 +102,7 @@ const Navigation = ({ prev, next }) => {
   return (
     <SlideNav>
       <ShowcaseLink item={prev}>
-        <NavButton>
+        <NavButton role="button" aria-label="previous image">
           <Image
             width={1920}
             height={1080}
@@ -123,7 +123,7 @@ const Navigation = ({ prev, next }) => {
       </ShowcaseLink>
 
       <ShowcaseLink item={next}>
-        <NavButton>
+        <NavButton role="button" aria-label="next image">
           <Image
             width={1920}
             height={1080}
diff --git a/components/Slider/ShowcaseBody.js b/components/Slider/ShowcaseBody.js
index 2c8cc396e..6213cba30 100644
--- a/components/Slider/ShowcaseBody.js
+++ b/components/Slider/ShowcaseBody.js
@@ -91,12 +91,12 @@ const ShowcaseBody = ({ title, owner, description, link, repo }) => (
       {description && <p>{description}</p>}
     </div>
     <SlideMetaLinks>
-      <SlideMetaLink href={link} target="_blank">
+      <SlideMetaLink href={link} target="_blank" aria-label={`${title} website`}>
         <span>Go to website</span>
         <Globe />
       </SlideMetaLink>
       {repo && (
-        <SlideMetaLink href={repo} target="_blank">
+        <SlideMetaLink href={repo} target="_blank" aria-label={`${title} repository`}>
           <span>Go to repository</span>
           <RepoIcon url={repo} />
         </SlideMetaLink>

From cf32982e9829b7c2ea4d1ef7d8ebed9fc0e8d51a Mon Sep 17 00:00:00 2001
From: Mishel Ghukasyan <55681212+Mish2j@users.noreply.github.com>
Date: Sat, 6 May 2023 18:42:54 -0700
Subject: [PATCH 4/6] Update Navbar.js... added aria-label directly on LogoLink

---
 components/Nav/Navbar.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/Nav/Navbar.js b/components/Nav/Navbar.js
index 6b1025947..30d1455ad 100644
--- a/components/Nav/Navbar.js
+++ b/components/Nav/Navbar.js
@@ -150,10 +150,9 @@ class ModalContainer extends PureComponent {
   }
 }
 
-const LogoLink = styled(Link).attrs(({ ariaLabel }) => ({
+const LogoLink = styled(Link).attrs((/* props */) => ({
   unstyled: true,
   href: '/',
-  'aria-label': ariaLabel,
 }))`
   display: inline-block;
   vertical-align: center;
@@ -173,7 +172,7 @@ class Navbar extends PureComponent {
       <Wrapper $transparent={transparent}>
         <NormalNavbar>
           <StartWrapper>
-            <LogoLink ariaLabel="Styled Components Home Page">
+            <LogoLink aria-label="Styled Components Home Page">
               <Logo />
             </LogoLink>
             <NavLinks />

From d1f74c21dfc5108f0e5cbc1ed91640e98c8ecf59 Mon Sep 17 00:00:00 2001
From: Mishel Ghukasyan <55681212+Mish2j@users.noreply.github.com>
Date: Sat, 6 May 2023 18:45:01 -0700
Subject: [PATCH 5/6] Update Social.js... added aria-label directly on
 SocialLink

---
 components/Nav/Social.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/Nav/Social.js b/components/Nav/Social.js
index 2d6c07194..caf908e1e 100644
--- a/components/Nav/Social.js
+++ b/components/Nav/Social.js
@@ -13,7 +13,6 @@ const Wrapper = styled.nav`
 
 const SocialLink = styled(Link).attrs(props => ({
   unstyled: true,
-  'aria-label': props.ariaLabel,
 }))`
   display: flex;
   margin-right: ${rem(20)};
@@ -76,16 +75,16 @@ const Spectrum = () => (
 
 const Social = props => (
   <Wrapper {...props}>
-    <SocialLink href="https://spectrum.chat/styled-components/" ariaLabel="Spectrum Chat">
+    <SocialLink href="https://spectrum.chat/styled-components/" aria-label="Spectrum Chat">
       <Spectrum />
     </SocialLink>
     {/* <SocialLink href="https://twitter.com/someone">
       <Twitter />
     </SocialLink> */}
-    <SocialLink href="https://github.com/styled-components" ariaLabel="GitHub">
+    <SocialLink href="https://github.com/styled-components" aria-label="GitHub">
       <StyledIcon as={Github} height="18" />
     </SocialLink>
-    <SocialLink href="https://medium.com/styled-components" ariaLabel="Medium.com">
+    <SocialLink href="https://medium.com/styled-components" aria-label="Medium.com">
       <StyledIcon as={MediumM} height="18" />
     </SocialLink>
   </Wrapper>

From 29cea647d2872e1979dafa46dd6bfd2e09ce41a6 Mon Sep 17 00:00:00 2001
From: Mishel Ghukasyan <55681212+Mish2j@users.noreply.github.com>
Date: Sat, 6 May 2023 18:48:00 -0700
Subject: [PATCH 6/6] Update Social.js

---
 components/Nav/Social.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Nav/Social.js b/components/Nav/Social.js
index caf908e1e..e79f80c27 100644
--- a/components/Nav/Social.js
+++ b/components/Nav/Social.js
@@ -11,7 +11,7 @@ const Wrapper = styled.nav`
   flex: 1 1 auto;
 `;
 
-const SocialLink = styled(Link).attrs(props => ({
+const SocialLink = styled(Link).attrs((/* props */) => ({
   unstyled: true,
 }))`
   display: flex;