From 6fee23c98fc931ef1d2b913aac6276e25afb0ab3 Mon Sep 17 00:00:00 2001
From: Mikkel Laursen <mlaursen03@gmail.com>
Date: Wed, 16 Dec 2020 19:18:23 -0700
Subject: [PATCH] fix(docs): fixed some a11y issues in documentation site

---
 .../src/components/CodePreference/CodePreferenceToggle.tsx  | 3 ++-
 .../documentation/src/components/Heading/HeadingLink.tsx    | 3 +--
 packages/documentation/src/components/Markdown/utils.ts     | 6 +++++-
 packages/documentation/src/icons/GithubSVGIcon.tsx          | 2 +-
 packages/documentation/src/icons/MaterialDesignSVGIcon.tsx  | 2 +-
 packages/documentation/src/icons/ReactSVGIcon.tsx           | 2 +-
 6 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/documentation/src/components/CodePreference/CodePreferenceToggle.tsx b/packages/documentation/src/components/CodePreference/CodePreferenceToggle.tsx
index 3372e47869..c93527b817 100644
--- a/packages/documentation/src/components/CodePreference/CodePreferenceToggle.tsx
+++ b/packages/documentation/src/components/CodePreference/CodePreferenceToggle.tsx
@@ -43,6 +43,7 @@ export function CodePreferenceToggle({
           toggle();
         }}
         id={`${PREFIX}${id}`}
+        aria-label="Preferred Coding Language"
         aria-pressed={isJs}
         buttonType="icon"
         tooltip={tooltip}
@@ -65,7 +66,7 @@ export function CodePreferenceToggle({
 
         toggle();
       }}
-      primaryText="Preferred Codinging Language"
+      primaryText="Preferred Coding Language"
       secondaryText={`Current language: ${name}`}
     />
   );
diff --git a/packages/documentation/src/components/Heading/HeadingLink.tsx b/packages/documentation/src/components/Heading/HeadingLink.tsx
index fa9f233fb1..b46665d0a1 100644
--- a/packages/documentation/src/components/Heading/HeadingLink.tsx
+++ b/packages/documentation/src/components/Heading/HeadingLink.tsx
@@ -33,8 +33,7 @@ const HeadingLink: FC<HeadingLinkProps> = ({ idRef }) => {
       href={`${prefix}#${idRef}`}
       className="heading__link"
       onClick={handleClick}
-      aria-label="Quick Link"
-      aria-describedby={idRef}
+      aria-hidden
     >
       #
     </LinkUnstyled>
diff --git a/packages/documentation/src/components/Markdown/utils.ts b/packages/documentation/src/components/Markdown/utils.ts
index b70d8a6526..a7451b6f42 100644
--- a/packages/documentation/src/components/Markdown/utils.ts
+++ b/packages/documentation/src/components/Markdown/utils.ts
@@ -96,7 +96,11 @@ renderer.heading = (text, level, _raw, slugger) => {
   });
 
   return `<h${level} id="${id}" class="${className}">
-  ${isValidHeading ? `<a href="#${id}" class="heading__link">#</a>` : ""}
+  ${
+    isValidHeading
+      ? `<a href="#${id}" class="heading__link" aria-hidden="true">#</a>`
+      : ""
+  }
   ${text}
 </h${level}>`;
 };
diff --git a/packages/documentation/src/icons/GithubSVGIcon.tsx b/packages/documentation/src/icons/GithubSVGIcon.tsx
index 0f2bba945c..be2a8e209a 100644
--- a/packages/documentation/src/icons/GithubSVGIcon.tsx
+++ b/packages/documentation/src/icons/GithubSVGIcon.tsx
@@ -8,7 +8,7 @@ const GithubSVGIcon: FC<SVGIconProps> = ({ className, ...props }) => (
 );
 
 GithubSVGIcon.defaultProps = {
-  role: "img",
+  role: "presentation",
   focusable: "false",
 };
 
diff --git a/packages/documentation/src/icons/MaterialDesignSVGIcon.tsx b/packages/documentation/src/icons/MaterialDesignSVGIcon.tsx
index f9118605bc..538d43cdb7 100644
--- a/packages/documentation/src/icons/MaterialDesignSVGIcon.tsx
+++ b/packages/documentation/src/icons/MaterialDesignSVGIcon.tsx
@@ -11,7 +11,7 @@ const MaterialDesignSVGIcon: FC<SVGIconProps> = ({ className, ...props }) => (
 );
 
 MaterialDesignSVGIcon.defaultProps = {
-  role: "img",
+  role: "presentation",
   focusable: "false",
 };
 
diff --git a/packages/documentation/src/icons/ReactSVGIcon.tsx b/packages/documentation/src/icons/ReactSVGIcon.tsx
index 1bdce0aa60..da84ab91b0 100644
--- a/packages/documentation/src/icons/ReactSVGIcon.tsx
+++ b/packages/documentation/src/icons/ReactSVGIcon.tsx
@@ -13,7 +13,7 @@ const ReactSVGIcon: FC<SVGIconProps> = ({ className, ...props }) => (
 );
 
 ReactSVGIcon.defaultProps = {
-  role: "img",
+  role: "presentation",
   focusable: "false",
 };