From bfd4bbded17bd1a5a881f914550102b975b797ad Mon Sep 17 00:00:00 2001 From: Yaten Dhingra Date: Tue, 7 Jan 2025 12:20:55 +0530 Subject: [PATCH 1/9] init: add skip-to-main-content shortcut Signed-off-by: Yaten Dhingra --- apps/site/components/withNavBar.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/apps/site/components/withNavBar.tsx b/apps/site/components/withNavBar.tsx index 21b39f48f44d3..81396a8ab1099 100644 --- a/apps/site/components/withNavBar.tsx +++ b/apps/site/components/withNavBar.tsx @@ -3,6 +3,7 @@ import { useLocale } from 'next-intl'; import { useTheme } from 'next-themes'; import type { FC } from 'react'; +import { useState } from 'react'; import NavBar from '@/components/Containers/NavBar'; import WithBanner from '@/components/withBanner'; @@ -10,19 +11,36 @@ import { useSiteNavigation } from '@/hooks'; import { useRouter, usePathname } from '@/navigation.mjs'; import { availableLocales } from '@/next.locales.mjs'; +import Button from './Common/Button'; + const WithNavBar: FC = () => { const { navigationItems } = useSiteNavigation(); const { resolvedTheme, setTheme } = useTheme(); const { replace } = useRouter(); const pathname = usePathname(); + const [tabPressed, setTabPressed] = useState(false); const locale = useLocale(); const toggleCurrentTheme = () => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark'); + const handleTabPress = (event: React.KeyboardEvent) => { + if (event.key === 'Tab') { + setTabPressed(prev => !prev); + } + }; + return ( -
+
+ + Date: Tue, 7 Jan 2025 14:19:14 +0530 Subject: [PATCH 2/9] fix imports in withNavBar.tsx Signed-off-by: Yaten Dhingra --- apps/site/components/withNavBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/components/withNavBar.tsx b/apps/site/components/withNavBar.tsx index 81396a8ab1099..44f105fb0fc55 100644 --- a/apps/site/components/withNavBar.tsx +++ b/apps/site/components/withNavBar.tsx @@ -2,7 +2,7 @@ import { useLocale } from 'next-intl'; import { useTheme } from 'next-themes'; -import type { FC } from 'react'; +import type { FC, KeyboardEvent } from 'react'; import { useState } from 'react'; import NavBar from '@/components/Containers/NavBar'; @@ -25,7 +25,7 @@ const WithNavBar: FC = () => { const toggleCurrentTheme = () => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark'); - const handleTabPress = (event: React.KeyboardEvent) => { + const handleTabPress = (event: KeyboardEvent) => { if (event.key === 'Tab') { setTabPressed(prev => !prev); } From af3799a4df18d804503bf4d69124e94c716c49d6 Mon Sep 17 00:00:00 2001 From: Yaten Dhingra Date: Tue, 7 Jan 2025 14:29:43 +0530 Subject: [PATCH 3/9] added classNames lib Signed-off-by: Yaten Dhingra --- apps/site/components/withNavBar.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/site/components/withNavBar.tsx b/apps/site/components/withNavBar.tsx index 44f105fb0fc55..97315634b6db3 100644 --- a/apps/site/components/withNavBar.tsx +++ b/apps/site/components/withNavBar.tsx @@ -1,5 +1,6 @@ 'use client'; +import classNames from 'classnames'; import { useLocale } from 'next-intl'; import { useTheme } from 'next-themes'; import type { FC, KeyboardEvent } from 'react'; @@ -19,6 +20,10 @@ const WithNavBar: FC = () => { const { replace } = useRouter(); const pathname = usePathname(); const [tabPressed, setTabPressed] = useState(false); + const classNameOnTabPress = classNames( + '!fixed left-0 m-3 -translate-y-16 p-3 transition-all focus:translate-y-0', + { '-translate-y-16': !tabPressed, 'translate-y-0': tabPressed } + ); const locale = useLocale(); @@ -34,7 +39,7 @@ const WithNavBar: FC = () => { return (
+
+ + {t('components.containers.navBar.links.skipToContent')} + diff --git a/packages/i18n/locales/en.json b/packages/i18n/locales/en.json index 9f56b5c8fa6f9..fa0ab85f31812 100644 --- a/packages/i18n/locales/en.json +++ b/packages/i18n/locales/en.json @@ -20,7 +20,8 @@ "security": "Security", "certification": "Certification", "blog": "Blog", - "contribute": "Contribute" + "contribute": "Contribute", + "skipToContent": "Skip to content" } } }, From 0b24e44ed6b54388855cad01b91c36d75d1b0fd0 Mon Sep 17 00:00:00 2001 From: Yaten Dhingra Date: Fri, 10 Jan 2025 19:49:21 +0530 Subject: [PATCH 5/9] changed classNameOnTabPress to skipToContent Signed-off-by: Yaten Dhingra --- apps/site/components/withNavBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/components/withNavBar.tsx b/apps/site/components/withNavBar.tsx index 59b76448618d7..16b072fbbbeae 100644 --- a/apps/site/components/withNavBar.tsx +++ b/apps/site/components/withNavBar.tsx @@ -17,7 +17,7 @@ const WithNavBar: FC = () => { const { replace } = useRouter(); const pathname = usePathname(); - const classNameOnTabPress = classNames( + const skipToContent = classNames( 'bg-[#000] text-center font-semibold inline-flex items-center justify-center gap-2 py-2.5', 'absolute left-0 top-0 m-3 -translate-y-16 bg-blue-500 p-3 text-white transition-transform focus:translate-y-0 focus:outline-none' ); @@ -30,7 +30,7 @@ const WithNavBar: FC = () => { return (
- + {t('components.containers.navBar.links.skipToContent')} From 536bfd7c9cc1f2a5d1b4a3111e8e0b81888eb5b0 Mon Sep 17 00:00:00 2001 From: Yaten Dhingra Date: Wed, 15 Jan 2025 23:46:44 +0530 Subject: [PATCH 6/9] added skipToContent in withLayout.tsx Signed-off-by: Yaten Dhingra --- apps/site/components/withLayout.tsx | 3 +++ apps/site/types/layouts.ts | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/site/components/withLayout.tsx b/apps/site/components/withLayout.tsx index 0c4a1638ee5b3..8d0e1f69f114d 100644 --- a/apps/site/components/withLayout.tsx +++ b/apps/site/components/withLayout.tsx @@ -10,6 +10,8 @@ import LearnLayout from '@/layouts/Learn'; import PostLayout from '@/layouts/Post'; import type { Layouts } from '@/types'; +import WithNavBar from './withNavBar'; + const layouts = { about: AboutLayout, home: GlowingBackdropLayout, @@ -19,6 +21,7 @@ const layouts = { 'blog-category': BlogLayout, download: DownloadLayout, article: ArticlePageLayout, + skipToContent: WithNavBar, } satisfies Record; type WithLayoutProps = PropsWithChildren<{ layout: L }>; diff --git a/apps/site/types/layouts.ts b/apps/site/types/layouts.ts index a3e81f69132f7..ddb928b48086f 100644 --- a/apps/site/types/layouts.ts +++ b/apps/site/types/layouts.ts @@ -6,4 +6,5 @@ export type Layouts = | 'blog-category' | 'blog-post' | 'download' - | 'article'; + | 'article' + | 'skipToContent'; From db8543f0c49c8cf818a53a9a861d7cc7ffbe7a9b Mon Sep 17 00:00:00 2001 From: Yaten Dhingra Date: Thu, 16 Jan 2025 23:13:36 +0530 Subject: [PATCH 7/9] added appropriate class to tag Signed-off-by: Yaten Dhingra --- apps/site/components/withNavBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/components/withNavBar.tsx b/apps/site/components/withNavBar.tsx index 16b072fbbbeae..d322137476cf6 100644 --- a/apps/site/components/withNavBar.tsx +++ b/apps/site/components/withNavBar.tsx @@ -18,7 +18,7 @@ const WithNavBar: FC = () => { const pathname = usePathname(); const skipToContent = classNames( - 'bg-[#000] text-center font-semibold inline-flex items-center justify-center gap-2 py-2.5', + 'bg-[#000] text-center font-semibold inline-flex items-center justify-center gap-2 py-2.5 motion-safe:transition-colors rounded border border-green-600 bg-green-600 text-white shadow-sm', 'absolute left-0 top-0 m-3 -translate-y-16 bg-blue-500 p-3 text-white transition-transform focus:translate-y-0 focus:outline-none' ); From 2a465e3989fc91b9982e6891c950a3818328545e Mon Sep 17 00:00:00 2001 From: Yaten Dhingra Date: Wed, 22 Jan 2025 23:21:18 +0530 Subject: [PATCH 8/9] updated skitToContent classname Signed-off-by: Yaten Dhingra --- apps/site/components/Common/Button/index.module.css | 5 ++++- apps/site/components/withNavBar.tsx | 9 +++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/apps/site/components/Common/Button/index.module.css b/apps/site/components/Common/Button/index.module.css index 6f2d69b8e9bef..7cd24d4abb3d5 100644 --- a/apps/site/components/Common/Button/index.module.css +++ b/apps/site/components/Common/Button/index.module.css @@ -1,6 +1,5 @@ .button { @apply px-4.5 - relative inline-flex items-center justify-center @@ -14,6 +13,10 @@ @apply size-5; } + .button:not(.skipToContent) { + @apply relative; /* Only apply `relative` when NOT `skipToContent` */ + } + &[aria-disabled='true'] { @apply cursor-not-allowed; } diff --git a/apps/site/components/withNavBar.tsx b/apps/site/components/withNavBar.tsx index d322137476cf6..ecba5e19c23c4 100644 --- a/apps/site/components/withNavBar.tsx +++ b/apps/site/components/withNavBar.tsx @@ -11,6 +11,8 @@ import { useSiteNavigation } from '@/hooks'; import { useRouter, usePathname } from '@/navigation.mjs'; import { availableLocales } from '@/next.locales.mjs'; +import Button from './Common/Button'; + const WithNavBar: FC = () => { const { navigationItems } = useSiteNavigation(); const { resolvedTheme, setTheme } = useTheme(); @@ -18,8 +20,7 @@ const WithNavBar: FC = () => { const pathname = usePathname(); const skipToContent = classNames( - 'bg-[#000] text-center font-semibold inline-flex items-center justify-center gap-2 py-2.5 motion-safe:transition-colors rounded border border-green-600 bg-green-600 text-white shadow-sm', - 'absolute left-0 top-0 m-3 -translate-y-16 bg-blue-500 p-3 text-white transition-transform focus:translate-y-0 focus:outline-none' + 'absolute left-0 top-0 m-3 -translate-y-16 bg-blue-500 p-3 transition-transform focus:translate-y-0 focus:outline-none' ); const locale = useLocale(); @@ -30,9 +31,9 @@ const WithNavBar: FC = () => { return (
- + From 2233341563b3e7f658470344abbd0c29d980e6af Mon Sep 17 00:00:00 2001 From: Yaten Dhingra Date: Fri, 24 Jan 2025 20:40:21 +0530 Subject: [PATCH 9/9] minor: remove custom className skipToContent Signed-off-by: Yaten Dhingra --- apps/site/components/withNavBar.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/site/components/withNavBar.tsx b/apps/site/components/withNavBar.tsx index ecba5e19c23c4..decc0041c866b 100644 --- a/apps/site/components/withNavBar.tsx +++ b/apps/site/components/withNavBar.tsx @@ -1,6 +1,5 @@ 'use client'; -import classNames from 'classnames'; import { useLocale, useTranslations } from 'next-intl'; import { useTheme } from 'next-themes'; import type { FC } from 'react'; @@ -19,10 +18,6 @@ const WithNavBar: FC = () => { const { replace } = useRouter(); const pathname = usePathname(); - 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' - ); - const locale = useLocale(); const t = useTranslations(); @@ -31,7 +26,10 @@ const WithNavBar: FC = () => { return (
-