23 lines
880 B
React
23 lines
880 B
React
|
// @flow
|
||
|
|
import React from 'react';
|
||
|
|
import Button from 'component/button';
|
||
|
|
// Allow screen reader users ( or keyboard navigation )
|
||
|
|
// to jump to main content
|
||
|
|
export default function 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 <Button className={'skip-button'} onClick={skipNavigation} label={__('Skip Navigation')} button={'link'} />;
|
||
|
|
}
|