Add skip links for content, player and footer. For #1826

web/components/ui/Content/Content.tsx

@@ -115,7 +115,7 @@ const DesktopContent = ({
 
   return (
     <>
-      <div className={styles.lowerHalf}>
+      <div className={styles.lowerHalf} id="skip-to-content">
         <ContentHeader
           name={name}
           title={streamTitle}

web/components/ui/Footer/Footer.tsx

@@ -6,7 +6,7 @@ export type FooterProps = {
 };
 
 export const Footer: FC<FooterProps> = ({ version }) => (
-  <footer className={styles.footer}>
+  <footer className={styles.footer} id="footer">
     <span>
       Powered by <a href="https://owncast.online">{version}</a>
     </span>

web/components/ui/Header/Header.module.scss

@@ -42,3 +42,18 @@
   overflow: hidden;
   line-height: 1.4;
 }
+
+.skipLink {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.skipLink:focus {
+  position: static;
+  width: auto;
+  height: auto;
+}

web/components/ui/Header/Header.tsx

@@ -2,6 +2,7 @@ import { Tag, Tooltip } from 'antd';
 import { FC } from 'react';
 import cn from 'classnames';
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 import { OwncastLogo } from '../../common/OwncastLogo/OwncastLogo';
 import styles from './Header.module.scss';
 
@@ -18,14 +19,27 @@ export type HeaderComponentProps = {
   name: string;
   chatAvailable: boolean;
   chatDisabled: boolean;
+  online: boolean;
 };
 
 export const Header: FC<HeaderComponentProps> = ({
   name = 'Your stream title',
   chatAvailable,
   chatDisabled,
+  online,
 }) => (
   <header className={cn([`${styles.header}`], 'global-header')}>
+    {online && (
+      <Link href="#player" className={styles.skipLink}>
+        Skip to player
+      </Link>
+    )}
+    <Link href="#skip-to-content" className={styles.skipLink}>
+      Skip to page content
+    </Link>
+    <Link href="#footer" className={styles.skipLink}>
+      Skip to footer
+    </Link>
     <div className={styles.logo}>
       <div id="header-logo" className={styles.logoImage}>
         <OwncastLogo variant="contrast" />