From f6d084cb9b345db0da96eb3bebbc8e5a5b36e697 Mon Sep 17 00:00:00 2001
From: Tringa Krasniqi <tkasniqi@microsoft.com>
Date: Sun, 28 May 2023 22:11:40 +0200
Subject: [PATCH] A11y fixes and other minor issues

---
 components/Nav/SidebarMenus.tsx               |  2 +-
 components/Slider/Navigation.tsx              |  4 ++--
 pages/releases.tsx                            |  2 --
 pages/showcase.tsx                            |  2 +-
 sections/api/helpers/is-styled-component.mdx  |  2 +-
 sections/api/primary/styled.mdx               |  2 +-
 sections/api/supported-css.mdx                |  2 +-
 sections/basics/extending-styles.mdx          |  8 ++++----
 .../NavBar/__snapshots__/index.spec.tsx.snap  | 20 ++++++++++++++-----
 .../__snapshots__/DocsLayout.spec.tsx.snap    | 20 ++++++++++++++-----
 10 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/components/Nav/SidebarMenus.tsx b/components/Nav/SidebarMenus.tsx
index 6b55d037..8635be67 100644
--- a/components/Nav/SidebarMenus.tsx
+++ b/components/Nav/SidebarMenus.tsx
@@ -75,7 +75,7 @@ export const DocsSidebarMenu = (props: DocsSidebarMenuProps) => {
   return (
     <MenuInner>
       {pages.map(({ title, pathname, sections }) => (
-        <Section>
+        <Section key={title}>
           <SectionTitle>
             <Link href={`/docs/${pathname}`}>{title}</Link>
           </SectionTitle>
diff --git a/components/Slider/Navigation.tsx b/components/Slider/Navigation.tsx
index fb17d2cf..f6d0d3d7 100644
--- a/components/Slider/Navigation.tsx
+++ b/components/Slider/Navigation.tsx
@@ -26,7 +26,7 @@ export default function Navigation({ prev, next }: NavigationProps) {
               return (
                 <TransitionGroup>
                   <CSSTransition key={props.src} timeout={100} classNames="fade">
-                    <img src={prev.src} />
+                    <img src={prev.src} role="presentation" />
                   </CSSTransition>
                 </TransitionGroup>
               );
@@ -47,7 +47,7 @@ export default function Navigation({ prev, next }: NavigationProps) {
               return (
                 <TransitionGroup>
                   <CSSTransition key={props.src} timeout={100} classNames="fade">
-                    <img src={next.src} />
+                    <img src={next.src} role="presentation" />
                   </CSSTransition>
                 </TransitionGroup>
               );
diff --git a/pages/releases.tsx b/pages/releases.tsx
index 99134537..5c7bff7a 100644
--- a/pages/releases.tsx
+++ b/pages/releases.tsx
@@ -55,8 +55,6 @@ Releases.getInitialProps = async ({ res }: { res: ServerResponse }): Promise<Rel
     res.setHeader('cache-control', 's-maxage=30,stale-while-revalidate');
   }
 
-  console.log(releases[0]);
-
   return {
     releases,
     sidebarPages: releases.map(release => ({
diff --git a/pages/showcase.tsx b/pages/showcase.tsx
index 8b138165..98a31dcc 100644
--- a/pages/showcase.tsx
+++ b/pages/showcase.tsx
@@ -69,7 +69,7 @@ export default function Showcase() {
                   return (
                     <TransitionGroup>
                       <CSSTransition key={src} timeout={500} classNames="fade">
-                        <img {...props} />
+                        <img {...props} role="presentation" />
                       </CSSTransition>
                     </TransitionGroup>
                   );
diff --git a/sections/api/helpers/is-styled-component.mdx b/sections/api/helpers/is-styled-component.mdx
index fbdca428..cf8b8aed 100644
--- a/sections/api/helpers/is-styled-component.mdx
+++ b/sections/api/helpers/is-styled-component.mdx
@@ -32,7 +32,7 @@ const ParentComponent = styled.div`
   color: royalblue;
 
   ${TargetedComponent} {
-    color: tomato;
+    color: #E42200;
   }
 `
 ```
diff --git a/sections/api/primary/styled.mdx b/sections/api/primary/styled.mdx
index 58a517dc..28812f95 100644
--- a/sections/api/primary/styled.mdx
+++ b/sections/api/primary/styled.mdx
@@ -30,7 +30,7 @@ const Button = styled.button`
 `
 
 const TomatoButton = styled(Button)`
-  background: tomato;
+  background: #E42200;
 `
 
 render(
diff --git a/sections/api/supported-css.mdx b/sections/api/supported-css.mdx
index 315a67d0..e94344d0 100644
--- a/sections/api/supported-css.mdx
+++ b/sections/api/supported-css.mdx
@@ -16,7 +16,7 @@ const Example = styled.div`
 
   /* media queries are no problem */
   @media (max-width: 600px) {
-    background: tomato;
+    background: #E42200;
 
     /* nested rules work as expected */
     &:hover {
diff --git a/sections/basics/extending-styles.mdx b/sections/basics/extending-styles.mdx
index f1382cac..6299b3a1 100644
--- a/sections/basics/extending-styles.mdx
+++ b/sections/basics/extending-styles.mdx
@@ -17,8 +17,8 @@ const Button = styled.button`
 
 // A new component based on Button, but with some override styles
 const TomatoButton = styled(Button)`
-  color: tomato;
-  border-color: tomato;
+  color: #E42200;
+  border-color: #E42200;
 `;
 
 render(
@@ -48,8 +48,8 @@ const Button = styled.button`
 `;
 
 const TomatoButton = styled(Button)`
-  color: tomato;
-  border-color: tomato;
+  color: #E42200;
+  border-color: #E42200;
 `;
 
 render(
diff --git a/test/components/NavBar/__snapshots__/index.spec.tsx.snap b/test/components/NavBar/__snapshots__/index.spec.tsx.snap
index 313e1ada..69464799 100644
--- a/test/components/NavBar/__snapshots__/index.spec.tsx.snap
+++ b/test/components/NavBar/__snapshots__/index.spec.tsx.snap
@@ -813,7 +813,9 @@ exports[`Nav renders correctly 1`] = `
               <div
                 className="c21"
               >
-                <styled.div>
+                <styled.div
+                  key="Basics"
+                >
                   <div
                     className="c22"
                   >
@@ -1039,7 +1041,9 @@ exports[`Nav renders correctly 1`] = `
                     </styled.h5>
                   </div>
                 </styled.div>
-                <styled.div>
+                <styled.div
+                  key="Advanced"
+                >
                   <div
                     className="c22"
                   >
@@ -1211,7 +1215,9 @@ exports[`Nav renders correctly 1`] = `
                     </styled.h5>
                   </div>
                 </styled.div>
-                <styled.div>
+                <styled.div
+                  key="API Reference"
+                >
                   <div
                     className="c22"
                   >
@@ -1347,7 +1353,9 @@ exports[`Nav renders correctly 1`] = `
                     </styled.h5>
                   </div>
                 </styled.div>
-                <styled.div>
+                <styled.div
+                  key="Tooling"
+                >
                   <div
                     className="c22"
                   >
@@ -1501,7 +1509,9 @@ exports[`Nav renders correctly 1`] = `
                     </styled.h5>
                   </div>
                 </styled.div>
-                <styled.div>
+                <styled.div
+                  key="FAQs"
+                >
                   <div
                     className="c22"
                   >
diff --git a/test/components/__snapshots__/DocsLayout.spec.tsx.snap b/test/components/__snapshots__/DocsLayout.spec.tsx.snap
index 3a695d69..69cebbd9 100644
--- a/test/components/__snapshots__/DocsLayout.spec.tsx.snap
+++ b/test/components/__snapshots__/DocsLayout.spec.tsx.snap
@@ -898,7 +898,9 @@ exports[`DocsLayout renders correctly 1`] = `
                     <div
                       className="c22"
                     >
-                      <styled.div>
+                      <styled.div
+                        key="Basics"
+                      >
                         <div
                           className="c23"
                         >
@@ -1124,7 +1126,9 @@ exports[`DocsLayout renders correctly 1`] = `
                           </styled.h5>
                         </div>
                       </styled.div>
-                      <styled.div>
+                      <styled.div
+                        key="Advanced"
+                      >
                         <div
                           className="c23"
                         >
@@ -1296,7 +1300,9 @@ exports[`DocsLayout renders correctly 1`] = `
                           </styled.h5>
                         </div>
                       </styled.div>
-                      <styled.div>
+                      <styled.div
+                        key="API Reference"
+                      >
                         <div
                           className="c23"
                         >
@@ -1432,7 +1438,9 @@ exports[`DocsLayout renders correctly 1`] = `
                           </styled.h5>
                         </div>
                       </styled.div>
-                      <styled.div>
+                      <styled.div
+                        key="Tooling"
+                      >
                         <div
                           className="c23"
                         >
@@ -1586,7 +1594,9 @@ exports[`DocsLayout renders correctly 1`] = `
                           </styled.h5>
                         </div>
                       </styled.div>
-                      <styled.div>
+                      <styled.div
+                        key="FAQs"
+                      >
                         <div
                           className="c23"
                         >