From 6d7e92d73b2bb24a584c0f0875fd03d8fd1aa7d0 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Wed, 14 Jul 2021 22:08:30 -0500
Subject: [PATCH] improve header accessibility

add skip navigation link + minor fixes
---
 static/app-strings.json              |  1 +
 ui/component/header/view.jsx         | 21 +++++++++++++++++++++
 ui/component/page/view.jsx           |  1 +
 ui/component/sideNavigation/view.jsx |  1 +
 ui/scss/component/_header.scss       | 18 ++++++++++++++++++
 5 files changed, 42 insertions(+)

diff --git a/static/app-strings.json b/static/app-strings.json
index db3a632c5..524f02dfc 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -2055,5 +2055,6 @@
   "added to": "added to",
   "removed from": "removed from",
   "Item removed from Watch Later": "Item removed from Watch Later",
+  "Skip navigation": "Skip navigation",
   "--end--": "--end--"
 }
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index 8d127823a..2d03a19dd 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -64,6 +64,24 @@ type Props = {
   activeChannelStakedLevel: number,
 };
 
+const SkipNavigationButton = () => {
+  const skipNavigation = (e) => {
+    // Match any focusable element
+    const focusableElementQuery = `
+      #main-content [tabindex]:not([tabindex="-1"]):not(:disabled),
+      #main-content a:not([aria-hidden]):not([tabindex="-1"]):not(:disabled),
+      #main-content button:not([aria-hidden]):not([tabindex="-1"]):not(:disabled)
+    `;
+    // Find first focusable element
+    const element = document.querySelector(focusableElementQuery);
+    // Trigger focus to skip navigation
+    if (element && element.focus) {
+      element.focus();
+    }
+  };
+  return <Button className={'skip-button'} onClick={skipNavigation} label={__('Skip Navigation')} button={'link'} />;
+};
+
 const Header = (props: Props) => {
   const {
     balance,
@@ -254,6 +272,7 @@ const Header = (props: Props) => {
               <Button
                 className="header__navigation-item header__navigation-item--lbry"
                 // @if TARGET='app'
+                aria-label={__('Home')}
                 label={'LBRY'}
                 // @endif
                 // @if TARGET='web'
@@ -271,6 +290,8 @@ const Header = (props: Props) => {
                 {...homeButtonNavigationProps}
               />
 
+              <SkipNavigationButton />
+
               {!authHeader && (
                 <div className="header__center">
                   {/* @if TARGET='app' */}
diff --git a/ui/component/page/view.jsx b/ui/component/page/view.jsx
index d6da4597b..3951ad603 100644
--- a/ui/component/page/view.jsx
+++ b/ui/component/page/view.jsx
@@ -109,6 +109,7 @@ function Page(props: Props) {
           />
         )}
         <main
+          id={'main-content'}
           className={classnames(MAIN_CLASS, className, {
             'main--full-width': fullWidthPage,
             'main--auth-page': authPage,
diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx
index 6ab12f2eb..86a43317a 100644
--- a/ui/component/sideNavigation/view.jsx
+++ b/ui/component/sideNavigation/view.jsx
@@ -326,6 +326,7 @@ function SideNavigation(props: Props) {
     >
       {!isOnFilePage && (
         <nav
+          aria-label={'Sidebar'}
           className={classnames('navigation', {
             'navigation--micro': microNavigation,
             // @if TARGET='app'
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index 0c1d0fbd8..d8384a32e 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -9,6 +9,24 @@
   -webkit-user-select: none;
   -webkit-app-region: drag;
 
+  .skip-button {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    margin: 0 var(--spacing-s);
+    &:focus {
+      opacity: 1;
+      position: relative;
+      overflow: unset;
+      width: inherit;
+      height: inherit;
+    }
+  }
+
   & > * {
     user-select: none;
   }