Skip to content

Commit b8fadbd

Browse files
moonmeistermoonmeister
authored
Merge pull request #276 from wpengine/toolkit-accessibility-fixes
Toolkit accessibility/usability fixes
2 parents fd07a36 + fcdc3b6 commit b8fadbd

File tree

16 files changed

+107
-36
lines changed

16 files changed

+107
-36
lines changed

‎mdx-components.jsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Image from "next/image";
2-
import DocsLayout from "@/components/docs-layout";
32
import Heading from "@/components/heading";
43
import CustomLink from "@/components/link";
54

@@ -18,7 +17,6 @@ export function useMDXComponents(components) {
1817
/>
1918
),
2019
a: (props) => <CustomLink {...props} />,
21-
wrapper: DocsLayout,
2220
h1: (props) => <Heading level={1} {...props} />,
2321
h2: (props) => <Heading level={2} {...props} />,
2422
h3: (props) => <Heading level={3} {...props} />,

‎src/components/docs-breadcrumbs.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default function DocsBreadcrumbs({ routes }) {
5555
) : (
5656
<Link
5757
key={index}
58-
className="font-normal text-gray-500 no-underline transition duration-200 ease-in hover:text-white focus:text-white"
58+
className="font-normal text-gray-400 no-underline transition duration-200 ease-in hover:text-white focus:text-white"
5959
href={breadcrumb.route}
6060
noDefaultStyles
6161
aria-label={breadcrumb.title}

‎src/components/docs-layout.jsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,17 +55,27 @@ export default function DocumentPage({ children, metadata }) {
5555
<DocsNav
5656
className="container-main h-screen max-h-screen overflow-y-scroll"
5757
routes={routes}
58+
isMobileMenu
5859
/>
5960
</DisclosurePanel>
6061
</Disclosure>
61-
<main className="relative mx-auto flex max-w-full grid-cols-[1fr_auto_1fr] flex-col gap-6 md:grid">
62+
<main
63+
id="main-content"
64+
className="relative mx-auto flex max-w-full grid-cols-[1fr_auto_1fr] flex-col gap-6 md:grid"
65+
>
6266
<nav className="custom-scrollbar sticky top-[84px] hidden h-[calc(100vh-84px)] w-64 overflow-y-auto p-4 md:block">
67+
<a href="#docs-article" className="faust-skip-link">
68+
Skip navigation
69+
</a>
6370
<DocsNav routes={routes} />
6471
</nav>
6572
<nav className="sticky top-[84px] order-last hidden h-[calc(100vh-84px)] w-[240px] overflow-y-auto p-6 lg:block">
6673
<OnThisPageNav>{children}</OnThisPageNav>
6774
</nav>
68-
<article className="container-main xs:py-20 prose prose-invert min-h-[calc(100vh-120px)] max-w-full py-0 sm:max-w-[80ch] sm:py-20 md:py-8">
75+
<article
76+
id="docs-article"
77+
className="container-main xs:py-20 prose prose-invert min-h-[calc(100vh-120px)] max-w-full py-0 sm:max-w-[80ch] sm:py-20 md:py-8"
78+
>
6979
<DocsBreadcrumbs routes={flatRoutes} />
7080
{metadata?.title && (
7181
<h1 className="article-title break-words">{metadata.title}</h1>

‎src/components/docs-nav.jsx‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import { Fragment } from "react";
1+
import { CloseButton } from "@headlessui/react";
22
import Link from "@/components/link";
33
import { normalizeHref, classNames } from "@/utils/strings";
44

5-
export default function DocsNav({ as, routes, level = 0, className }) {
6-
const As = as || Fragment;
5+
export default function DocsNav({
6+
isMobileMenu,
7+
routes,
8+
level = 0,
9+
className,
10+
}) {
711
return (
812
<ul
913
className={classNames(className, "my-1", {
@@ -12,32 +16,42 @@ export default function DocsNav({ as, routes, level = 0, className }) {
1216
data-doc-nav-level={level}
1317
>
1418
{routes.map((item) => (
15-
<As key={item.title}>
16-
<NavItem item={item} level={level} />
17-
</As>
19+
<NavItem
20+
key={item.title}
21+
item={item}
22+
level={level}
23+
isMobileMenu={isMobileMenu}
24+
/>
1825
))}
1926
</ul>
2027
);
2128
}
2229

23-
function NavItem({ item, level, ...props }) {
30+
function NavItem({ item, level, isMobileMenu, ...props }) {
2431
if (!item?.route) {
2532
throw new Error("Item must have a route");
2633
}
2734

35+
const Component = isMobileMenu ? CloseButton : Link;
36+
2837
return (
2938
<li className="py-2 text-gray-400">
30-
<Link
39+
<Component
40+
as={isMobileMenu ? Link : undefined}
3141
data-doc-nav-level={level}
3242
href={normalizeHref(item.route)}
3343
noDefaultStyles
3444
activeClassName="text-blue-500 active"
3545
{...props}
3646
>
3747
{item.title}
38-
</Link>
48+
</Component>
3949
{item.children && (
40-
<DocsNav as="ul" level={level + 1} routes={item.children} />
50+
<DocsNav
51+
isMobileMenu={isMobileMenu}
52+
level={level + 1}
53+
routes={item.children}
54+
/>
4155
)}
4256
</li>
4357
);

‎src/components/footer.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,26 @@ export default function Footer() {
77
<div className="grid grid-cols-1 gap-8 pt-14 sm:grid-cols-2 lg:grid-cols-3 lg:pt-24">
88
<FooterColumns />
99
</div>
10-
<div className="mt-2 text-gray-500 lg:mt-24">
10+
<div className="mt-2 text-gray-400 lg:mt-24">
1111
<p>
1212
Powered by{" "}
1313
<Link
14-
className="font-normal text-gray-300 no-underline"
14+
className="font-normal text-gray-200 no-underline"
1515
href="/"
1616
noDefaultStyles
1717
>
1818
Faust.js
1919
</Link>{" "}
2020
&amp; WP Engine&apos;s{" "}
2121
<Link
22-
className="font-normal text-gray-300 no-underline"
22+
className="font-normal text-gray-200 no-underline"
2323
href="https://wpengine.com/headless-wordpress/"
2424
noDefaultStyles
2525
>
2626
Headless platform
2727
</Link>
2828
</p>
29-
<p className="text-gray-600">
29+
<p className="text-gray-400">
3030
&copy; 2013-{new Date().getFullYear()} WP Engine, Inc. All rights
3131
reserved.
3232
</p>

‎src/components/layout.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ export default function Layout({ children }) {
1313
<div
1414
className={`${inter.variable} font-inter flex min-h-screen flex-col selection:bg-purple-700`}
1515
>
16+
<a href="#main-content" className="faust-skip-link">
17+
Skip to main content
18+
</a>
19+
1620
<Header />
1721
{children}
1822
<Footer />

‎src/components/search-bar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export default function SearchBar({ setIsSearchOpen }) {
138138
<MagnifyingGlassIcon className="h-6 w-6 text-gray-400 md:hidden" />
139139
<span className="hidden md:inline">
140140
<span className="pl-3">Search docs...</span>
141-
<kbd className="ml-8 rounded-sm bg-gray-700 px-2 py-1 text-gray-400">
141+
<kbd className="ml-8 rounded-sm bg-gray-700 px-2 py-1 text-gray-300">
142142
⌘K
143143
</kbd>
144144
</span>

‎src/pages/404.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import CustomLink from "@/components/link";
2+
import Seo from "@/components/seo";
23

34
export default function Custom404() {
45
const suggestions = [
@@ -12,7 +13,10 @@ export default function Custom404() {
1213
className="p-16 text-center font-sans"
1314
role="main"
1415
aria-labelledby="page-title"
16+
id="main-content"
1517
>
18+
<Seo title="Page not found" />
19+
1620
<h1 id="page-title" className="text-5xl text-white">
1721
Oops! Lost in the Web...
1822
</h1>

‎src/pages/_app.jsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { WordPressBlocksProvider } from "@faustwp/blocks";
22
import { FaustProvider } from "@faustwp/core";
33
import { useRouter } from "next/router";
44
import { useEffect } from "react";
5+
import DocsLayout from "@/components/docs-layout";
56
import Layout from "@/components/layout";
67
import { logPageview } from "@/lib/gtag.js";
78
import blocks from "@/wp-blocks";
@@ -11,6 +12,7 @@ import "@faustwp/core/dist/css/toolbar.css";
1112

1213
export default function MyApp({ Component, pageProps }) {
1314
const router = useRouter();
15+
const isDocsRoute = router.pathname.startsWith("/docs");
1416

1517
// Record a Google Analytics pageview on route change
1618
useEffect(() => {
@@ -27,7 +29,13 @@ export default function MyApp({ Component, pageProps }) {
2729
{/* eslint-disable-next-line unicorn/no-null */}
2830
<WordPressBlocksProvider config={{ blocks, theme: null }}>
2931
<Layout>
30-
<Component {...pageProps} />
32+
{isDocsRoute ? (
33+
<DocsLayout metadata={pageProps.metadata}>
34+
<Component {...pageProps} />
35+
</DocsLayout>
36+
) : (
37+
<Component {...pageProps} />
38+
)}
3139
</Layout>
3240
</WordPressBlocksProvider>
3341
</FaustProvider>

‎src/pages/blog/index.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,10 @@ export default function BlogIndex() {
8383
};
8484

8585
return (
86-
<main className="container-main container-max prose prose-invert prose-h2:mt-0 prose-h2:text-lg container px-8 py-14 lg:px-16 lg:py-24">
86+
<main
87+
id="main-content"
88+
className="container-main container-max prose prose-invert prose-h2:mt-0 prose-h2:text-lg container px-8 py-14 lg:px-16 lg:py-24"
89+
>
8790
<Seo
8891
title="News"
8992
description="Faust.js blog feed with the latest news."
@@ -120,7 +123,7 @@ export default function BlogIndex() {
120123
<div className="mt-8 flex justify-center">
121124
<button
122125
type="button"
123-
className="flex items-center rounded-sm bg-purple-500 px-4 py-2 text-white transition ease-in-out hover:bg-purple-800"
126+
className="flex items-center rounded-sm bg-purple-700 px-4 py-2 text-white transition ease-in-out hover:bg-purple-800"
124127
onClick={loadMorePosts}
125128
disabled={loadingMore}
126129
>

0 commit comments

Comments
 (0)