fix(docs): fixed some a11y issues in documentation site

mlaursen · Dec 31, 2020 · 6fee23c · 6fee23c
1 parent 9807b19
commit 6fee23c
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -13,7 +13,7 @@ const ReactSVGIcon: FC<SVGIconProps> = ({ className, ...props }) => (
 );
 
 ReactSVGIcon.defaultProps = {
-  role: "img",
+  role: "presentation",
   focusable: "false",
 };