From 72cc7cb4439c35a420a7cac05e6bf7f4aed9a761 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sun, 29 Jan 2023 16:31:52 -0800
Subject: [PATCH] Add skip link to offline message

---
 web/components/ui/Content/Content.tsx | 22 ++++++++++++----------
 web/components/ui/Header/Header.tsx   |  6 +++++-
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index e6ca5ce5a..ff9051942 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -343,16 +343,18 @@ export const Content: FC = () => {
                 />
               )}
               {!online && !appState.appLoading && (
-                <OfflineBanner
-                  showsHeader={false}
-                  streamName={name}
-                  customText={offlineMessage}
-                  notificationsEnabled={browserNotificationsEnabled}
-                  fediverseAccount={fediverseAccount}
-                  lastLive={lastDisconnectTime}
-                  onNotifyClick={() => setShowNotifyModal(true)}
-                  onFollowClick={() => setShowFollowModal(true)}
-                />
+                <div id="offline-message">
+                  <OfflineBanner
+                    showsHeader={false}
+                    streamName={name}
+                    customText={offlineMessage}
+                    notificationsEnabled={browserNotificationsEnabled}
+                    fediverseAccount={fediverseAccount}
+                    lastLive={lastDisconnectTime}
+                    onNotifyClick={() => setShowNotifyModal(true)}
+                    onFollowClick={() => setShowFollowModal(true)}
+                  />
+                </div>
               )}
               {isStreamLive && (
                 <Statusbar
diff --git a/web/components/ui/Header/Header.tsx b/web/components/ui/Header/Header.tsx
index 7828e6836..718a36bb9 100644
--- a/web/components/ui/Header/Header.tsx
+++ b/web/components/ui/Header/Header.tsx
@@ -29,10 +29,14 @@ export const Header: FC<HeaderComponentProps> = ({
   online,
 }) => (
   <header className={cn([`${styles.header}`], 'global-header')}>
-    {online && (
+    {online ? (
       <Link href="#player" className={styles.skipLink}>
         Skip to player
       </Link>
+    ) : (
+      <Link href="#offline-message" className={styles.skipLink}>
+        Skip to offline message
+      </Link>
     )}
     <Link href="#skip-to-content" className={styles.skipLink}>
       Skip to page content