init: add skip-to-main-content shortcut #7390
Conversation
Signed-off-by: Yaten Dhingra <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
I think currently on pressing Edit: Sorry, will not ping 👍 |
|
WOW stop pinging everyone ! we (website team) receive notification when there are changes on repo. |
Signed-off-by: Yaten Dhingra <[email protected]>
Signed-off-by: Yaten Dhingra <[email protected]>
apps/site/components/withNavBar.tsx
Outdated
| const handleTabPress = (event: KeyboardEvent<HTMLInputElement>) => { | ||
| if (event.key === 'Tab') { | ||
| setTabPressed(prev => !prev); | ||
| } | ||
| }; |
There was a problem hiding this comment.
That's very wrong, we should not rely on keyboard event, it's arbitrary restrictive. In fact we shouldn't be using JS at all, there's no reason this couldn't be CSS-only
There was a problem hiding this comment.
Got your point, I'll make it CSS-only and remove all the JS 👍
There was a problem hiding this comment.
I've made the change CSS-only, but I've a doubt that what should be the bg-color of the button? I wasn't able to find it in the component. Currently I've set it to black, for testing purposes only!!
Signed-off-by: Yaten Dhingra <[email protected]>
|
|
||
| const toggleCurrentTheme = () => | ||
| setTheme(resolvedTheme === 'dark' ? 'light' : 'dark'); | ||
|
|
||
| return ( | ||
| <div> | ||
| <a className={classNameOnTabPress} href="#main"> |
There was a problem hiding this comment.
Anchor href is not working, main element is missing the id attribute.
| @@ -16,13 +17,23 @@ const WithNavBar: FC = () => { | |||
| const { replace } = useRouter(); | |||
| const pathname = usePathname(); | |||
|
|
|||
| const classNameOnTabPress = classNames( | |||
There was a problem hiding this comment.
I believe that creating a SkipToContentButton component would make this cleaner.
There was a problem hiding this comment.
And I feel that WithLayout is a better place to put this component.
Description
This PR adds a
skip to main contentbutton (initially hidden), when the user pressesTab(for windows), the button is visible and the user can then move directly to the main content of the page.Related Issues
Fixes #7220
Check List
npm run formatto ensure the code follows the style guide.npm run testto check if all tests are passing.npx turbo buildto check if the website builds without errors.