a11y fixes

src/components/ChildrenOf.tsx

@@ -19,7 +19,7 @@ const createCards = (children: SilverstripeDocument[]): ReactElement[] => {
                         <div className="card-text">
                             {summary || ''}
                         </div>
-                        <Link className="card-link-mask" to={slug}></Link>
+                        <Link className="card-link-mask" to={slug} aria-label={title}></Link>
                     </div>
                 </div>
             </div>

src/components/Header.tsx

@@ -31,7 +31,7 @@ const handleNavigate = (e: any): void => {
 const Header: StatelessComponent<HeaderProps> = ({ handleSidebarToggle }): ReactElement => {
     const home = getHomePage();
     return (
-    <header className="header fixed-top">	    
+    <header role="banner" className="header fixed-top">	    
         <div className="branding docs-branding">
           <div className="container position-relative py-2 d-flex">
             <div className="docs-logo-wrapper">

src/components/Layout.tsx

@@ -25,7 +25,7 @@ const Layout: StatelessComponent<LayoutProps> = ({ children, pathContext: { slug
     <Sidebar onNavigate={handleNavigate} isOpen={isToggled} />
       <div className="docs-content">
         <div className="container">
-          <article className="docs-article">
+          <article role="main" className="docs-article">
             {children}
           </article>
         </div> 

src/components/Nav.tsx

@@ -28,7 +28,7 @@ const Nav:StatelessComponent<NavProps> = ({ onNavigate }): ReactElement => {
     }
 
     return (
-        <nav id="docs-nav" className="docs-nav navbar">
+        <nav role="navigation" id="docs-nav" className="docs-nav navbar">
         <ul className="section-items list-unstyled nav flex-column pb-3">
             {getNavChildren(top).map((node: SilverstripeDocument) => {
                 const { slug, title } = node;

src/theme/assets/scss/ss-docs.scss

@@ -17,6 +17,9 @@ body {
     .search-input {
         border-radius: 5px;
         background: $gray-200;
+        &:focus {
+            color: $gray-900;
+        }
     }
 }
 .docs-sidebar {
@@ -92,7 +95,7 @@ code {
             span {
                 text-transform: uppercase;
                 font-size: 0.8rem;
-                color: $gray-700;
+                color: $gray-850;
             }
         }
         img {
@@ -122,6 +125,7 @@ code {
             label {
                 font-size: 0.7rem;
                 margin: 0 0.5rem;
+                color: $gray-900;
             }
             select {
                appearance: none;
@@ -177,7 +181,7 @@ h1, h2, h3 {
     width: 100%;
     margin: 2rem 0;
     a {
-        color: $gray-800;
+        color: $gray-850;
     }
 }
 

src/theme/assets/scss/ss-variables.scss

@@ -6,4 +6,4 @@ $container-max-widths: (
 ) !default;
 $theme-bg-light: lighten($theme-text-color-secondary, 65%);
 $font-family-sans-serif: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
-
+$gray-850: lighten($theme-text-color-secondary, 5%);

src/utils/rewriteLink.ts

@@ -52,7 +52,8 @@ const rewriteLink = (
                 className: 'api-link',
                 href,
                 target: '_blank',
-            }
+            },
+            domToReact(children, parseOptions)
         )
     }