Skip to content

Commit d46e1ab

Browse files
Fran-A-DevFran-A-Dev
authored
Merge pull request #182 from wpengine/keboard-a11y-things
[misc]: Keyboard, a11y, and misc things
2 parents 158c4fa + 380b5c5 commit d46e1ab

File tree

13 files changed

+81
-52
lines changed

13 files changed

+81
-52
lines changed

‎.vscode/extensions.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"recommendations": [
3+
"editorconfig.editorconfig",
4+
"dbaeumer.vscode-eslint",
5+
"github.vscode-github-actions",
6+
"unifiedjs.vscode-mdx",
7+
"esbenp.prettier-vscode",
8+
"bradlc.vscode-tailwindcss",
9+
"graphql.vscode-graphql-syntax",
10+
"graphql.vscode-graphql",
11+
"streetsidesoftware.code-spell-checker"
12+
]
13+
}

‎.vscode/settings.json‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,23 @@
1111
"stylesheet",
1212
"tailwindcss"
1313
],
14-
"eslint.useFlatConfig": true
14+
"editor.formatOnSave": true,
15+
"editor.codeActionsOnSave": {
16+
"source.fixAll.eslint": "explicit"
17+
},
18+
"eslint.run": "onSave",
19+
"eslint.useFlatConfig": true,
20+
"eslint.codeActionsOnSave.mode": "problems",
21+
"[javascript]": {
22+
"editor.defaultFormatter": "esbenp.prettier-vscode"
23+
},
24+
"[javascriptreact]": {
25+
"editor.defaultFormatter": "esbenp.prettier-vscode"
26+
},
27+
"[mdx]": {
28+
"editor.defaultFormatter": "esbenp.prettier-vscode"
29+
},
30+
"[json]": {
31+
"editor.defaultFormatter": "esbenp.prettier-vscode"
32+
}
1533
}

‎mdx-components.jsx‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,8 @@
1-
import slugify from "@sindresorhus/slugify";
21
import Image from "next/image";
32
import DocsLayout from "@/components/docs-layout";
3+
import Heading from "@/components/heading";
44
import CustomLink from "@/components/link";
55

6-
// Custom heading component with clickable anchor links
7-
const Heading = ({ level, children, ...props }) => {
8-
const Tag = `h${level}`;
9-
// Ensure children are treated as a single string for slug generation
10-
const textContent = Array.isArray(children)
11-
? children.join("") // Join array items if children is an array
12-
: children?.toString() || ""; // Convert children to string or fallback to empty
13-
const id = slugify(textContent); // Generate slug from heading text
14-
15-
return (
16-
<Tag id={id} {...props} className="group">
17-
<CustomLink href={`#${id}`} className="text-blue-500 no-underline">
18-
{children}
19-
</CustomLink>
20-
</Tag>
21-
);
22-
};
23-
246
export function useMDXComponents(components) {
257
return {
268
img: ({ src }, ...props) => (

‎src/components/heading.jsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { LinkIcon } from "@heroicons/react/24/outline";
2+
import Link from "./link";
3+
4+
// Custom heading component with clickable anchor links
5+
export default function Heading({ level, children, id, ...props }) {
6+
const Tag = `h${level}`;
7+
console.log("props", props);
8+
return (
9+
<Tag
10+
id={id.toString()}
11+
className="group flex items-center hover:text-blue-500"
12+
{...props}
13+
>
14+
<Link
15+
href={`#${id}`}
16+
className="no-underline transition-colors group-hover:text-blue-500"
17+
noDefaultStyles
18+
>
19+
{children}
20+
<LinkIcon className="ml-2 inline-block size-5" />
21+
</Link>
22+
</Tag>
23+
);
24+
}

‎src/components/layout.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ const inter = localFont({
1010

1111
export default function Layout({ children }) {
1212
return (
13-
<div className={`${inter.variable} flex min-h-screen flex-col font-inter`}>
13+
<div
14+
className={`${inter.variable} flex min-h-screen flex-col font-inter selection:bg-purple-700`}
15+
>
1416
<Header />
1517
{children}
1618
<Footer />

‎src/components/link.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function CustomLink({
1010
disableExternalIcon,
1111
...props
1212
}) {
13-
const defaultClasses = "underline text-blue-500";
13+
const defaultClasses = "text-blue-500";
1414

1515
const calculatedClasses = classNames(
1616
{ [defaultClasses]: !noDefaultStyles },

‎src/components/primary-menu.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,13 @@ export default function PrimaryMenu({ className }) {
4747
</ul>
4848
<Menu>
4949
<MenuButton className="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden">
50-
<span className="sr-only">Open main nav</span>
50+
<span className="sr-only hidden group-data-[open]:block">
51+
Open main nav
52+
</span>
5153
<XMarkIcon className="hidden size-6 group-data-[open]:block" />
54+
<span className="sr-only group-data-[open]:hidden">
55+
Open main nav
56+
</span>
5257
<Bars3Icon className="size-6 group-data-[open]:hidden" />
5358
</MenuButton>
5459
<MenuItems

‎src/components/search-bar.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
1+
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
22
import { useCombobox } from "downshift";
33
import debounce from "lodash.debounce";
44
import { useRouter } from "next/router";
@@ -112,6 +112,7 @@ export default function SearchBar() {
112112
onClick={openModal}
113113
type="button"
114114
>
115+
<span className="sr-only md:hidden">Open search</span>
115116
<MagnifyingGlassIcon className="h-6 w-6 text-gray-400 md:hidden" />
116117
<span className="hidden md:inline">
117118
<span className="pl-3">Search docs...</span>

‎src/lib/smart-search-plugin.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,14 @@ async function collectPages(directory) {
4646

4747
// Safely extract metadata using regex
4848
const metadataMatch = content.match(
49-
/export const metadata = ({[\S\s]+?});/,
49+
/export const metadata = (?<metadata>{[\S\s]+?});/,
5050
);
5151
let metadata = {};
5252

5353
if (metadataMatch) {
5454
try {
5555
// eslint-disable-next-line no-eval
56-
metadata = eval(`(${metadataMatch[1]})`); // Parse the metadata block
56+
metadata = eval(`(${metadataMatch.metadata})`); // Parse the metadata block
5757
} catch (error) {
5858
console.error("Error parsing metadata:", error);
5959
}

‎src/pages/global.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@
3131
* {
3232
@apply outline-teal-800;
3333
}
34+
35+
:target {
36+
@apply scroll-mt-[100px] bg-teal-600/50;
37+
@apply animate-bounce motion-reduce:animate-none;
38+
}
3439
}
3540

3641
/* Styles for code blocks */

0 commit comments

Comments
 (0)