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!!
There was a problem hiding this comment.
we already have a button component
There was a problem hiding this comment.
Yes, there's a button component present, but the issue with that is - empty space is being left on using it, like this:
Should I try to resolve this with CSS or it can easily be fixed by using <a> tag and then simply adding the bg-color, so how should I go?
Signed-off-by: Yaten Dhingra <[email protected]>
apps/site/components/withNavBar.tsx
Outdated
|
|
||
| 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.
There was a problem hiding this comment.
This href won't work as of now, because I just set it randomly to #main, I wanted to clarify that to what section the user must be directed to on clicking this button?
There was a problem hiding this comment.
I believe It should redirect to main indeed
There was a problem hiding this comment.
For this, is there a main class present in the pages? Ig not?
There is this <main/> tag present in the about page, just for example.
There was a problem hiding this comment.
Sorry, I don't understand what you saying
There was a problem hiding this comment.
I was trying to say that on any page, since we're redirecting to #main, there is no such class as #main on any page, so where should the user be redirected?
apps/site/components/withNavBar.tsx
Outdated
| @@ -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.
There was a problem hiding this comment.
Should I change classNameOnTabPress to SkipToContentButton?
There was a problem hiding this comment.
And I feel that WithLayout is a better place to put this component.
All these changes have to be shifted to the withLayout, am I right?
There was a problem hiding this comment.
Should I change
classNameOnTabPresstoSkipToContentButton?
Yes
And I feel that WithLayout is a better place to put this component.
All these changes have to be shifted to the
withLayout, am I right?
Yep
There was a problem hiding this comment.
If I've understood this correct, then should I add a new skipToContent in here?
There was a problem hiding this comment.
Hey, apologies for delay!
I've pushed a commit to address this, could you please have a look at it?
Thanks
Signed-off-by: Yaten Dhingra <[email protected]>
|
I've pushed a minor change(typo). Just wanted to ask, that could anyone please guide regarding these points, I was having a few doubts: |
Signed-off-by: Yaten Dhingra <[email protected]>
Signed-off-by: Yaten Dhingra <[email protected]>
|
Hi, I've pushed a commit, and I think that this addresses all the changes mentioned and required! Could anyone please have a look at it and LMK if any change has to be made in this? |
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.