improve header accessibility

add skip navigation link + minor fixes

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--"
 }

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' */}

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,

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'

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;
   }