From bfd4bbded17bd1a5a881f914550102b975b797ad Mon Sep 17 00:00:00 2001 From: Yaten Dhingra Date: Tue, 7 Jan 2025 12:20:55 +0530 Subject: [PATCH 1/5] 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/5] 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/5] 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/5] 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 (