init: add skip-to-main-content shortcut #7390

yaten2302 · 2025-01-07T06:57:02Z

Description

This PR adds a skip to main content button (initially hidden), when the user presses Tab(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

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run npm run format to ensure the code follows the style guide.
I have run npm run test to check if all tests are passing.
I have run npx turbo build to check if the website builds without errors.
I've covered new added functionality with unit tests if necessary.

Signed-off-by: Yaten Dhingra <[email protected]>

vercel · 2025-01-07T06:57:07Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jan 22, 2025 5:53pm

yaten2302 · 2025-01-07T07:38:23Z

I think currently on pressing Tab, the button is shown, but it's not getting pressed if the user presses Enter, I forgot take into account the Enter button, I'll push a commit for this too 👍

Edit: Sorry, will not ping 👍

AugustinMauroy · 2025-01-07T08:33:13Z

WOW stop pinging everyone ! we (website team) receive notification when there are changes on repo.

apps/site/components/withNavBar.tsx

Signed-off-by: Yaten Dhingra <[email protected]>

apps/site/components/withNavBar.tsx

Signed-off-by: Yaten Dhingra <[email protected]>

araujogui · 2025-01-08T15:09:40Z

apps/site/components/withNavBar.tsx


  const toggleCurrentTheme = () =>
    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');

  return (
    <div>
+      <a className={classNameOnTabPress} href="#main">


Anchor href is not working, main element is missing the id attribute.

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?

I believe It should redirect to main indeed

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.

Sorry, I don't understand what you saying

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?

User should be "redirected" to main, layouts lives on apps/site/layouts.

apps/site/components/withNavBar.tsx

Signed-off-by: Yaten Dhingra <[email protected]>

yaten2302 · 2025-01-10T14:24:38Z

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]>

yaten2302 · 2025-01-16T17:46:03Z

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?

yaten2302 · 2025-01-19T14:32:48Z

Hey, can anyone please have a look and LMK if any more changes are required?

AugustinMauroy · 2025-01-19T14:54:40Z

I don't really know what to do with this button, but at the moment it degrades the UI.

AugustinMauroy · 2025-01-19T14:55:42Z

apps/site/components/withNavBar.tsx


  const toggleCurrentTheme = () =>
    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');

  return (
    <div>
+      <a className={skipToContent} href="#main">


Suggested change

<a className={skipToContent} href="#main">

<Button className={skipToContent} href="#main">

use the component button @/components/common/Button it's already exist and use our design system

Yes, the Button component already exists, but there's a problem with this - #7390 (comment)

our <button> is a <a> under the hood

so just add classname props to add more tailwind css classes need to positioned the button

Pushed a commit for the same. I've changed something in the index.module.css file (Button.tsx), will it be valid?

Signed-off-by: Yaten Dhingra <[email protected]>

aduh95 · 2025-01-22T18:16:06Z

I've tried to pull that PR on top of main and run npm run dev but couldn't get the button to show up, am I missing something?

yaten2302 · 2025-01-23T05:44:48Z

2025-01-23.11-09-38.mp4

I've shared a screen recording for the same, is this behavior not being shown on your side? I just checked that in the deployment also it's showing this.

aduh95 · 2025-01-23T10:19:07Z

No even running from the DevTools Array.from(document.all).find(a => a.textContent.trim() === 'Skip to content') returns undefined 🤔

My steps are:

git fetch https://github.com/nodejs/nodejs.org.git HEAD
git reset FETCH_HEAD --hard
curl -L https://github.com/nodejs/nodejs.org/pull/7390.patch | git am
npm ci
npm run dev

yaten2302 · 2025-01-23T11:42:16Z

I used deployment dev tools:

canerakdas · 2025-01-23T16:51:49Z

apps/site/components/withLayout.tsx

@@ -19,6 +21,7 @@ const layouts = {
  'blog-category': BlogLayout,
  download: DownloadLayout,
  article: ArticlePageLayout,
+  skipToContent: WithNavBar,


I don't think skipToContent is a page layout, IMO it is a feature in layouts

canerakdas · 2025-01-23T17:15:22Z

apps/site/components/withNavBar.tsx

+  const skipToContent = classNames(
+    'absolute left-0 top-0 m-3 -translate-y-16 bg-blue-500 p-3 transition-transform focus:translate-y-0 focus:outline-none'
+  );
+


Suggested change

const skipToContent = classNames(

'absolute left-0 top-0 m-3 -translate-y-16 bg-blue-500 p-3 transition-transform focus:translate-y-0 focus:outline-none'

);

Since there is no conditional class added, there is no need to use classNames, you can write styles directly

canerakdas · 2025-01-23T17:18:38Z

apps/site/components/withNavBar.tsx


  const toggleCurrentTheme = () =>
    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');

  return (
    <div>
+      <Button className={skipToContent} href="#main">


Suggested change

<Button className={skipToContent} href="#main">

<Button className="absolute left-3 top-3 -translate-y-16 focus:translate-y-0" href="#main">

Margin, padding, and background color don't seem to be needed 👀 Also when the button is focused, the outline must be visible, otherwise, it is not obvious that it is focused.

canerakdas · 2025-01-23T17:20:47Z

apps/site/types/layouts.ts

@@ -6,4 +6,5 @@ export type Layouts =
  | 'blog-category'
  | 'blog-post'
  | 'download'
-  | 'article';
+  | 'article'
+  | 'skipToContent';


Similarly, IMO there should be no skip to content layout

init: add skip-to-main-content shortcut

bfd4bbd

Signed-off-by: Yaten Dhingra <[email protected]>

yaten2302 requested a review from a team as a code owner January 7, 2025 06:57

yaten2302 mentioned this pull request Jan 7, 2025

Adding a "Skip to Content" Link #7220

Open

vercel bot deployed to Preview January 7, 2025 06:58 View deployment

AugustinMauroy requested changes Jan 7, 2025

View reviewed changes

apps/site/components/withNavBar.tsx Show resolved Hide resolved

apps/site/components/withNavBar.tsx Outdated Show resolved Hide resolved

apps/site/components/withNavBar.tsx Outdated Show resolved Hide resolved

fix imports in withNavBar.tsx

85e3e14

Signed-off-by: Yaten Dhingra <[email protected]>

vercel bot deployed to Preview January 7, 2025 08:50 View deployment

added classNames lib

af3799a

Signed-off-by: Yaten Dhingra <[email protected]>

vercel bot deployed to Preview January 7, 2025 09:01 View deployment

aduh95 requested changes Jan 7, 2025

View reviewed changes

apps/site/components/withNavBar.tsx Outdated Show resolved Hide resolved

canerakdas reviewed Jan 7, 2025

View reviewed changes

apps/site/components/withNavBar.tsx Outdated Show resolved Hide resolved

made skipToContent button CSS-only

0c9c1b5

Signed-off-by: Yaten Dhingra <[email protected]>

vercel bot deployed to Preview January 7, 2025 17:28 View deployment

araujogui requested changes Jan 8, 2025

View reviewed changes

Merge branch 'nodejs:main' into main

9f14df0

vercel bot had a problem deploying to Preview January 10, 2025 14:14 Failure

changed classNameOnTabPress to skipToContent

0b24e44

Signed-off-by: Yaten Dhingra <[email protected]>

vercel bot deployed to Preview January 10, 2025 14:21 View deployment

Merge branch 'nodejs:main' into main

c05f0b9

vercel bot deployed to Preview January 11, 2025 17:42 View deployment

Merge branch 'nodejs:main' into main

b5f2322

vercel bot deployed to Preview January 15, 2025 18:13 View deployment

added skipToContent in withLayout.tsx

536bfd7

Signed-off-by: Yaten Dhingra <[email protected]>

vercel bot deployed to Preview January 15, 2025 18:18 View deployment

Merge branch 'nodejs:main' into main

61d34c8

vercel bot deployed to Preview January 16, 2025 17:34 View deployment

added appropriate class to <a/> tag

db8543f

Signed-off-by: Yaten Dhingra <[email protected]>

vercel bot deployed to Preview January 16, 2025 17:45 View deployment

AugustinMauroy reviewed Jan 19, 2025

View reviewed changes

updated skitToContent classname

2a465e3

Signed-off-by: Yaten Dhingra <[email protected]>

vercel bot deployed to Preview January 22, 2025 17:53 View deployment

canerakdas reviewed Jan 23, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

init: add skip-to-main-content shortcut #7390

init: add skip-to-main-content shortcut #7390

yaten2302 commented Jan 7, 2025

vercel bot commented Jan 7, 2025 •

edited

Loading

yaten2302 commented Jan 7, 2025 •

edited

Loading

AugustinMauroy commented Jan 7, 2025

araujogui Jan 8, 2025

yaten2302 Jan 9, 2025

araujogui Jan 13, 2025

yaten2302 Jan 15, 2025

araujogui Jan 16, 2025

yaten2302 Jan 17, 2025

araujogui Jan 20, 2025

yaten2302 commented Jan 10, 2025

yaten2302 commented Jan 16, 2025

yaten2302 commented Jan 19, 2025

AugustinMauroy commented Jan 19, 2025 •

edited

Loading

AugustinMauroy Jan 19, 2025

yaten2302 Jan 19, 2025

AugustinMauroy Jan 19, 2025

AugustinMauroy Jan 19, 2025

yaten2302 Jan 22, 2025

aduh95 commented Jan 22, 2025

yaten2302 commented Jan 23, 2025

aduh95 commented Jan 23, 2025

yaten2302 commented Jan 23, 2025

canerakdas Jan 23, 2025

canerakdas Jan 23, 2025

canerakdas Jan 23, 2025

canerakdas Jan 23, 2025

	<a className={skipToContent} href="#main">
	<Button className={skipToContent} href="#main">

	const skipToContent = classNames(
	'absolute left-0 top-0 m-3 -translate-y-16 bg-blue-500 p-3 transition-transform focus:translate-y-0 focus:outline-none'
	);

	<Button className={skipToContent} href="#main">
	<Button className="absolute left-3 top-3 -translate-y-16 focus:translate-y-0" href="#main">

init: add skip-to-main-content shortcut #7390

Are you sure you want to change the base?

init: add skip-to-main-content shortcut #7390

Conversation

yaten2302 commented Jan 7, 2025

Description

Related Issues

Check List

vercel bot commented Jan 7, 2025 • edited Loading

yaten2302 commented Jan 7, 2025 • edited Loading

AugustinMauroy commented Jan 7, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yaten2302 commented Jan 10, 2025

yaten2302 commented Jan 16, 2025

yaten2302 commented Jan 19, 2025

AugustinMauroy commented Jan 19, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aduh95 commented Jan 22, 2025

yaten2302 commented Jan 23, 2025

aduh95 commented Jan 23, 2025

yaten2302 commented Jan 23, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented Jan 7, 2025 •

edited

Loading

yaten2302 commented Jan 7, 2025 •

edited

Loading

AugustinMauroy commented Jan 19, 2025 •

edited

Loading