Add skip link to offline message

This commit is contained in:
Gabe Kangas 2023-01-29 16:31:52 -08:00
parent d057834a20
commit 72cc7cb443
No known key found for this signature in database
GPG key ID: 4345B2060657F330
2 changed files with 17 additions and 11 deletions

View file

@ -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

View file

@ -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