LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

add SkipNavigationButton to its own file

Browse source
This commit is contained in:
btzr-io 2021-07-20 19:31:26 -05:00
parent f6261611f0
commit 6a8d32c9bf
3 changed files with 26 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
static/app-strings.json
View file

@ -2059,5 +2059,8 @@
"by %channelTitle%": "by %channelTitle%", "by %channelTitle%": "by %channelTitle%",
"Reset": "Reset", "Reset": "Reset",
"Reset to original (previous) publish date": "Reset to original (previous) publish date", "Reset to original (previous) publish date": "Reset to original (previous) publish date",
"Trending for #Art": "Trending for #Art",
"Trending for #Education": "Trending for #Education",
"Trending for #Technology": "Trending for #Technology",
"--end--": "--end--" "--end--": "--end--"
} }

21
ui/component/header/view.jsx
View file

@ -15,6 +15,7 @@ import { useIsMobile } from 'effects/use-screensize';
import NotificationBubble from 'component/notificationBubble'; import NotificationBubble from 'component/notificationBubble';
import NotificationHeaderButton from 'component/notificationHeaderButton'; import NotificationHeaderButton from 'component/notificationHeaderButton';
import ChannelThumbnail from 'component/channelThumbnail'; import ChannelThumbnail from 'component/channelThumbnail';
import SkipNavigationButton from 'component/skipNavigationButton';
// @if TARGET='app' // @if TARGET='app'
import { remote } from 'electron'; import { remote } from 'electron';
import { IS_MAC } from 'component/app/view'; import { IS_MAC } from 'component/app/view';
@ -64,26 +65,6 @@ type Props = {
activeChannelStakedLevel: number, activeChannelStakedLevel: number,
}; };
// Allow screen reader users ( or keyboard navigation )
// to jump to main content
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 <Button className={'skip-button'} onClick={skipNavigation} label={__('Skip Navigation')} button={'link'} />;
};
const Header = (props: Props) => { const Header = (props: Props) => {
const { const {
balance, balance,

22
ui/component/skipNavigationButton/index.jsx Normal file
View file

@ -0,0 +1,22 @@
// @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'} />;
}