Skip to content

Add "Skip to main content" link and fix sticky header scroll offset #358

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
joshjavier wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add "Skip to main content" link and fix sticky header scroll offset #358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e89e4f6
feat(a11y): add "Skip to main content" link
joshjavier Oct 1, 2025
722ce1e
fix(a11y): prevent header from obscuring skip link target
joshjavier Oct 1, 2025
508c111
refactor(a11y): move SkipNavLink inside Router tag
joshjavier Oct 1, 2025
8b6eff9
refactor(a11y): put skiplink at top-center of page
joshjavier Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
283 changes: 146 additions & 137 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
Navigate,
} from 'react-router-dom';
import { NuqsAdapter } from 'nuqs/adapters/react-router/v6';
import SkipNavLink from './components/ui/SkipNavLink';
import Navbar from './components/layout/Navbar';
import Ticker from './components/ui/Ticker';
import Footer from './components/layout/Footer';
Expand Down Expand Up @@ -90,160 +91,168 @@ import NotFound from './pages/NotFound';
function App() {
return (
<Router>
<SkipNavLink className='left-1/2 -translate-x-1/2' />
<NuqsAdapter>
<div className='min-h-screen flex flex-col'>
<Navbar />
<Ticker />
<ScrollToTop />
<Routes>
<Route path='/' element={<Home />} />
<Route path='/design' element={<DesignGuide />} />
<Route path='/services' element={<Services />} />
<Route path='/about' element={<AboutPage />} />
<Route path='/accessibility' element={<AccessibilityPage />} />
<Route path='/search' element={<SearchPage />} />
<Route path='/ideas' element={<Ideas />} />
<Route path='/join-us' element={<JoinUs />} />
<Route path='/terms-of-service' element={<TermsOfService />} />
<Route path='/sitemap' element={<SitemapPage />} />
<Route path='/discord' Component={Discord} />

<Route path='/philippines'>
<Route index element={<Navigate to='about' replace />} />
<Route path='about' element={<AboutPhilippines />} />
<Route path='history' element={<PhilippinesHistory />} />
<Route path='culture' element={<PhilippinesCulture />} />
<Route path='regions' element={<PhilippinesRegions />} />
<Route path='map' element={<PhilippinesMap />} />
<Route path='holidays' element={<PublicHolidays />} />
<Route path='hotlines' element={<Hotlines />} />
</Route>

{/* Data Routes */}
<Route path='/data/weather' element={<WeatherPage />} />
<Route path='/data/forex' element={<ForexPage />} />
<Route
path='/flood-control-projects'
element={<FloodControlProjects />}
/>
<Route
path='/flood-control-projects/table'
element={<FloodControlProjectsTable />}
/>
<Route
path='/flood-control-projects/map'
element={<FloodControlProjectsMap />}
/>
<Route
path='/flood-control-projects/contractors'
element={<FloodControlProjectsContractors />}
/>
<Route
path='/flood-control-projects/contractors/:contractor-name'
element={<ContractorDetail />}
/>

{/* Services Routes */}
<Route path='/services/websites' element={<WebsitesDirectory />} />

{/* Travel Routes */}
<Route path='/travel'>
<Route index element={<Navigate to='visa' replace />} />
<Route path='visa' element={<VisaPage />} />
<Route path='visa-types' element={<VisaTypesPage />} />

<main id='main-content'>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/design' element={<DesignGuide />} />
<Route path='/services' element={<Services />} />
<Route path='/about' element={<AboutPage />} />
<Route path='/accessibility' element={<AccessibilityPage />} />
<Route path='/search' element={<SearchPage />} />
<Route path='/ideas' element={<Ideas />} />
<Route path='/join-us' element={<JoinUs />} />
<Route path='/terms-of-service' element={<TermsOfService />} />
<Route path='/sitemap' element={<SitemapPage />} />
<Route path='/discord' Component={Discord} />

<Route path='/philippines'>
<Route index element={<Navigate to='about' replace />} />
<Route path='about' element={<AboutPhilippines />} />
<Route path='history' element={<PhilippinesHistory />} />
<Route path='culture' element={<PhilippinesCulture />} />
<Route path='regions' element={<PhilippinesRegions />} />
<Route path='map' element={<PhilippinesMap />} />
<Route path='holidays' element={<PublicHolidays />} />
<Route path='hotlines' element={<Hotlines />} />
</Route>

{/* Data Routes */}
<Route path='/data/weather' element={<WeatherPage />} />
<Route path='/data/forex' element={<ForexPage />} />
<Route
path='visa-types/:type'
element={
<Suspense
fallback={
<div className='flex items-center justify-center min-h-screen'>
Loading...
</div>
}
>
<VisaTypeDetail />
</Suspense>
}
path='/flood-control-projects'
element={<FloodControlProjects />}
/>
<Route path='communicating' element={<CommunicatingPage />} />
<Route
path='communicating/print'
element={<CommunicatingPrintPage />}
path='/flood-control-projects/table'
element={<FloodControlProjectsTable />}
/>
<Route
path='/flood-control-projects/map'
element={<FloodControlProjectsMap />}
/>
<Route
path='/flood-control-projects/contractors'
element={<FloodControlProjectsContractors />}
/>
<Route
path='/flood-control-projects/contractors/:contractor-name'
element={<ContractorDetail />}
/>
</Route>

{/* Government Routes */}
<Route
path='/government'
element={<GovernmentLayout title='Government' />}
>
<Route index element={<Navigate to='executive' replace />} />
<Route path='salary-grade' element={<SalaryGradePage />} />

<Route path='executive' element={<ExecutiveLayout />}>
<Route index element={<ExecutiveDirectory />} />
<Route
path='other-executive-offices'
element={<OtherExecutiveOffices />}
/>
<Route
path='office-of-the-president'
element={<OfficeOfThePresident />}
/>
<Route
path='office-of-the-vice-president'
element={<OfficeOfTheVicePresident />}
/>
<Route
path='presidential-communications-office'
element={<PresidentialCommunicationsOffice />}
/>
</Route>

<Route path='departments' element={<DepartmentsLayout />}>
<Route index element={<DepartmentsIndex />} />
<Route path=':department' element={<DepartmentDetail />} />
</Route>
{/* Services Routes */}
<Route
path='/services/websites'
element={<WebsitesDirectory />}
/>

<Route path='constitutional' element={<ConstitutionalLayout />}>
<Route index element={<ConstitutionalIndex />} />
<Route path=':office' element={<ConstitutionalOffice />} />
<Route path='goccs' element={<GOCCsPage />} />
<Route path='sucs' element={<SUCsPage />} />
</Route>
<Route path='legislative' element={<LegislativeLayout />}>
<Route index element={<LegislativeIndex />} />
<Route path=':chamber' element={<LegislativeChamber />} />
<Route path='house-members' element={<HouseMembersPage />} />
<Route
path='party-list-members'
element={<PartyListMembersPage />}
/>
{/* Travel Routes */}
<Route path='/travel'>
<Route index element={<Navigate to='visa' replace />} />
<Route path='visa' element={<VisaPage />} />
<Route path='visa-types' element={<VisaTypesPage />} />
<Route
path='senate-committees'
element={<SenateCommitteesPage />}
/>
</Route>
<Route path='diplomatic' element={<DiplomaticLayout />}>
<Route index element={<DiplomaticIndex />} />
<Route path='missions' element={<DiplomaticMissionsPage />} />
<Route path='consulates' element={<ConsulatesPage />} />
<Route
path='organizations'
element={<InternationalOrganizationsPage />}
path='visa-types/:type'
element={
<Suspense
fallback={
<div className='flex items-center justify-center min-h-screen'>
Loading...
</div>
}
>
<VisaTypeDetail />
</Suspense>
}
/>
</Route>

{/* Local Government Routes */}
<Route path='local' element={<LocalLayout />}>
<Route index element={<LocalGovernmentIndex />} />
<Route path=':region' element={<RegionalLGUPage />} />
{/* Government Routes */}
<Route
path='/government'
element={<GovernmentLayout title='Government' />}
>
<Route index element={<Navigate to='executive' replace />} />
<Route path='salary-grade' element={<SalaryGradePage />} />

<Route path='executive' element={<ExecutiveLayout />}>
<Route index element={<ExecutiveDirectory />} />
<Route
path='other-executive-offices'
element={<OtherExecutiveOffices />}
/>
<Route
path='office-of-the-president'
element={<OfficeOfThePresident />}
/>
<Route
path='office-of-the-vice-president'
element={<OfficeOfTheVicePresident />}
/>
<Route
path='presidential-communications-office'
element={<PresidentialCommunicationsOffice />}
/>
<Route path='communicating' element={<CommunicatingPage />} />
<Route
path='communicating/print'
element={<CommunicatingPrintPage />}
/>
</Route>

<Route path='departments' element={<DepartmentsLayout />}>
<Route index element={<DepartmentsIndex />} />
<Route path=':department' element={<DepartmentDetail />} />
</Route>

<Route path='constitutional' element={<ConstitutionalLayout />}>
<Route index element={<ConstitutionalIndex />} />
<Route path=':office' element={<ConstitutionalOffice />} />
<Route path='goccs' element={<GOCCsPage />} />
<Route path='sucs' element={<SUCsPage />} />
</Route>
<Route path='legislative' element={<LegislativeLayout />}>
<Route index element={<LegislativeIndex />} />
<Route path=':chamber' element={<LegislativeChamber />} />
<Route path='house-members' element={<HouseMembersPage />} />
<Route
path='party-list-members'
element={<PartyListMembersPage />}
/>
<Route
path='senate-committees'
element={<SenateCommitteesPage />}
/>
</Route>
<Route path='diplomatic' element={<DiplomaticLayout />}>
<Route index element={<DiplomaticIndex />} />
<Route path='missions' element={<DiplomaticMissionsPage />} />
<Route path='consulates' element={<ConsulatesPage />} />
<Route
path='organizations'
element={<InternationalOrganizationsPage />}
/>
</Route>

{/* Local Government Routes */}
<Route path='local' element={<LocalLayout />}>
<Route index element={<LocalGovernmentIndex />} />
<Route path=':region' element={<RegionalLGUPage />} />
</Route>
</Route>
</Route>

{/*Not Found/404 Page */}
<Route path='*' element={<NotFound />} />
</Routes>
{/*Not Found/404 Page */}
<Route path='*' element={<NotFound />} />
</Routes>
</main>

<Footer />
</div>
</NuqsAdapter>
Expand Down
11 changes: 9 additions & 2 deletions src/components/layout/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,21 @@ import {
SearchIcon,
XIcon,
} from 'lucide-react';
import { FC, useState } from 'react';
import { FC, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Link, useLocation } from 'react-router-dom';
import { mainNavigation } from '../../data/navigation';
import { LANGUAGES } from '../../i18n/languages';
import { LanguageType } from '../../types';
import { useResizeObserver } from '@/hooks/use-resize-observer';

const Navbar: FC = () => {
const [isOpen, setIsOpen] = useState(false);
const [activeMenu, setActiveMenu] = useState<string | null>(null);
const [hoveredDropdown, setHoveredDropdown] = useState<string | null>(null);
const { t, i18n } = useTranslation('common');
const location = useLocation();
const { ref, height } = useResizeObserver();

const toggleMenu = () => {
setIsOpen(!isOpen);
Expand Down Expand Up @@ -63,8 +65,13 @@ const Navbar: FC = () => {
setHoveredDropdown(null);
};

useEffect(() => {
// Add scroll padding to prevent the sticky header from obscuring the content
document.documentElement.style.scrollPaddingTop = `${height}px`;
}, [height]);

return (
<nav className='bg-white shadow-xs sticky top-0 z-50'>
<nav ref={ref} className='bg-white shadow-xs sticky top-0 z-50'>
{/* Top bar with language switcher and additional links */}
<div className='border-b border-gray-200'>
<div className='container mx-auto px-4 flex justify-end items-center h-10'>
Expand Down
26 changes: 26 additions & 0 deletions src/components/ui/SkipNavLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { cn } from '@/lib/utils';
import { ComponentProps } from 'react';

type SkipNavLinkProps = { label?: string } & Omit<
ComponentProps<'a'>,
'children'
>;

export default function SkipNavLink({
label = 'Skip to main content',
className,
...props
}: SkipNavLinkProps) {
return (
<a
href='#main-content'
className={cn(
'absolute left-2 top-0 z-999 bg-primary-500 text-white py-2 px-4 -translate-y-full focus:translate-y-2 transition ease-out focus:outline-2 outline-primary-500 outline-offset-2 rounded',
className
)}
{...props}
>
{label}
</a>
);
}
Loading
Loading