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 ; +}; + const Header = (props: Props) => { const { balance, @@ -254,6 +272,7 @@ const Header = (props: Props) => { { {...homeButtonNavigationProps} /> + + {!authHeader && ( {/* @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) { /> )} {!isOnFilePage && ( * { user-select: none; }