make skip navigation link first focusable element

This commit is contained in:
btzr-io 2021-07-15 13:32:58 -05:00
parent cc7dcc65f9
commit 6354a77bf1

View file

@ -64,6 +64,8 @@ type Props = {
activeChannelStakedLevel: number, activeChannelStakedLevel: number,
}; };
// Allow screen reader users ( or keyboard navigation )
// to jump to main content
const SkipNavigationButton = () => { const SkipNavigationButton = () => {
const skipNavigation = (e) => { const skipNavigation = (e) => {
// Match any focusable element // Match any focusable element
@ -252,6 +254,7 @@ const Header = (props: Props) => {
) : ( ) : (
<> <>
<div className="header__navigation"> <div className="header__navigation">
<SkipNavigationButton />
{!authHeader && ( {!authHeader && (
<span style={{ position: 'relative' }}> <span style={{ position: 'relative' }}>
<Button <Button
@ -290,8 +293,6 @@ const Header = (props: Props) => {
{...homeButtonNavigationProps} {...homeButtonNavigationProps}
/> />
<SkipNavigationButton />
{!authHeader && ( {!authHeader && (
<div className="header__center"> <div className="header__center">
{/* @if TARGET='app' */} {/* @if TARGET='app' */}