From 9b40a79b3efbb2419f31021849494443d2c6f676 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Wed, 21 Sep 2022 15:46:44 +0200
Subject: [PATCH] fix: focus-ring styles

---
 packages/website/src/components/CmdK.tsx      |  4 +-
 .../website/src/components/CodeListing.tsx    |  8 +-
 .../src/components/HyperlinkedText.tsx        |  4 +-
 .../src/components/InheritanceText.tsx        |  4 +-
 .../website/src/components/MethodItem.tsx     | 12 ++-
 packages/website/src/components/Section.tsx   |  2 +-
 .../website/src/components/SidebarItems.tsx   |  2 +-
 .../website/src/components/SidebarLayout.tsx  | 75 ++++++++++++++-----
 .../src/components/TableOfContentItems.tsx    |  4 +-
 .../website/src/components/model/Function.tsx |  6 +-
 .../website/src/components/tsdoc/TSDoc.tsx    |  8 +-
 packages/website/src/pages/404.tsx            |  2 +-
 .../pages/docs/packages/[package]/index.tsx   |  4 +-
 .../website/src/pages/docs/packages/index.tsx |  8 +-
 packages/website/src/pages/index.tsx          |  7 +-
 15 files changed, 101 insertions(+), 49 deletions(-)

diff --git a/packages/website/src/components/CmdK.tsx b/packages/website/src/components/CmdK.tsx
index baa09182f..93b56ba91 100644
--- a/packages/website/src/components/CmdK.tsx
+++ b/packages/website/src/components/CmdK.tsx
@@ -47,7 +47,7 @@ export function CmdKDialog({ currentPackageName }: { currentPackageName?: string
 			searchResults?.map((item) => (
 				<Command.Item
 					key={item.id}
-					className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-offset-0 [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring flex flex transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
+					className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring my-1 flex flex transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
 					onSelect={() => {
 						void router.push(item.path);
 						dialog!.setOpen(false);
@@ -115,7 +115,7 @@ export function CmdKDialog({ currentPackageName }: { currentPackageName?: string
 				shouldFilter={false}
 			>
 				<Command.Input
-					className="dark:bg-dark-300 caret-blurple placeholder:text-dark-300/75 mt-4 border-0 bg-white p-4 pt-0 text-lg outline-0 dark:placeholder:text-white/75"
+					className="dark:bg-dark-300 caret-blurple placeholder:text-dark-300/75 focus:ring-width-2 focus:ring-blurple w-full rounded border-0 bg-white p-4 text-lg outline-0 outline-0 focus:ring dark:placeholder:text-white/75"
 					placeholder="Quick search..."
 					value={search}
 					onValueChange={setSearch}
diff --git a/packages/website/src/components/CodeListing.tsx b/packages/website/src/components/CodeListing.tsx
index f87f5f9d7..c342e231b 100644
--- a/packages/website/src/components/CodeListing.tsx
+++ b/packages/website/src/components/CodeListing.tsx
@@ -34,8 +34,12 @@ export function CodeListing({
 }>) {
 	return (
 		<div id={name} className="scroll-mt-30 flex flex-col gap-4">
-			<div className={`md:-ml-8.5 flex flex-col gap-0.5 md:flex-row md:place-items-center md:gap-2`}>
-				<a className="hidden md:inline-block" aria-label="Anchor" href={`#${name}`}>
+			<div className="md:-ml-8.5 flex flex-col gap-0.5 md:flex-row md:place-items-center md:gap-2">
+				<a
+					className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
+					aria-label="Anchor"
+					href={`#${name}`}
+				>
 					<FiLink size={20} />
 				</a>
 				{deprecation || readonly || optional ? (
diff --git a/packages/website/src/components/HyperlinkedText.tsx b/packages/website/src/components/HyperlinkedText.tsx
index b1fa9d7fd..32b2e68b2 100644
--- a/packages/website/src/components/HyperlinkedText.tsx
+++ b/packages/website/src/components/HyperlinkedText.tsx
@@ -8,7 +8,9 @@ export function HyperlinkedText({ tokens }: { tokens: TokenDocumentation[] }) {
 				if (token.path) {
 					return (
 						<Link key={idx} href={token.path} prefetch={false}>
-							<a className="text-blurple">{token.text}</a>
+							<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring">
+								{token.text}
+							</a>
 						</Link>
 					);
 				}
diff --git a/packages/website/src/components/InheritanceText.tsx b/packages/website/src/components/InheritanceText.tsx
index c76ea6a7a..9d396de39 100644
--- a/packages/website/src/components/InheritanceText.tsx
+++ b/packages/website/src/components/InheritanceText.tsx
@@ -6,7 +6,9 @@ export function InheritanceText({ data }: { data: InheritanceData }) {
 		<span className="font-semibold">
 			Inherited from{' '}
 			<Link href={data.path} prefetch={false}>
-				<a className="text-blurple font-mono">{data.parentName}</a>
+				<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring">
+					{data.parentName}
+				</a>
 			</Link>
 		</span>
 	);
diff --git a/packages/website/src/components/MethodItem.tsx b/packages/website/src/components/MethodItem.tsx
index 2ce66e55a..01f7028ce 100644
--- a/packages/website/src/components/MethodItem.tsx
+++ b/packages/website/src/components/MethodItem.tsx
@@ -35,7 +35,11 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
 		<div id={key} className="scroll-mt-30 flex flex-col gap-4">
 			<div className="flex flex-col">
 				<div className="flex flex-col gap-2 md:-ml-9 md:flex-row md:place-items-center">
-					<a className="hidden md:inline-block" aria-label="Anchor" href={`#${key}`}>
+					<a
+						className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
+						aria-label="Anchor"
+						href={`#${key}`}
+					>
 						<FiLink size={20} />
 					</a>
 					{data.deprecated ||
@@ -72,7 +76,7 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
 				<div className="flex flex-row place-items-center gap-2">
 					<MenuButton
 						state={menu}
-						className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
+						className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
 					>
 						<div className="flex flex-row place-content-between place-items-center gap-2">
 							<VscVersions size={20} />
@@ -88,12 +92,12 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
 					</MenuButton>
 					<Menu
 						state={menu}
-						className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
+						className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
 					>
 						{data.mergedSiblings.map((_, idx) => (
 							<MenuItem
 								key={idx}
-								className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 cursor-pointer rounded bg-white p-3 text-sm"
+								className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 focus:ring"
 								onClick={() => setOverloadIndex(idx + 1)}
 							>{`Overload ${idx + 1}`}</MenuItem>
 						))}
diff --git a/packages/website/src/components/Section.tsx b/packages/website/src/components/Section.tsx
index 8a36db8b4..539c07f55 100644
--- a/packages/website/src/components/Section.tsx
+++ b/packages/website/src/components/Section.tsx
@@ -21,7 +21,7 @@ export function Section({
 	return (
 		<div className="flex flex-col">
 			<Disclosure
-				className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
+				className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
 				state={disclosure}
 			>
 				<div className="flex flex-row place-content-between place-items-center">
diff --git a/packages/website/src/components/SidebarItems.tsx b/packages/website/src/components/SidebarItems.tsx
index 8d1b1ff0e..75aa75d36 100644
--- a/packages/website/src/components/SidebarItems.tsx
+++ b/packages/website/src/components/SidebarItems.tsx
@@ -89,7 +89,7 @@ export function SidebarItems({
 						{groupItems[group].map((member, index) => (
 							<Link key={index} href={member.path} prefetch={false}>
 								<a
-									className={`dark:border-dark-100 border-light-800 ml-5 flex flex-col border-l p-[5px] pl-6 ${
+									className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col rounded border-l p-[5px] pl-6 outline-0 focus:ring ${
 										asPathWithoutQueryAndAnchor === member.path
 											? 'bg-blurple text-white'
 											: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
index 6b955461b..4c5fa2bbd 100644
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/packages/website/src/components/SidebarLayout.tsx
@@ -84,7 +84,7 @@ export function SidebarLayout({
 		() => [
 			<a key="discord.js" href="https://discord.js.org/#/docs/discord.js">
 				<MenuItem
-					className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
+					className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
 					state={packageMenu}
 					onClick={() => packageMenu.setOpen(false)}
 				>
@@ -94,7 +94,7 @@ export function SidebarLayout({
 			...PACKAGES.map((pkg) => (
 				<Link key={pkg} href={`/docs/packages/${pkg}/main`} passHref prefetch={false}>
 					<MenuItem
-						className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
+						className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
 						as="a"
 						state={packageMenu}
 						onClick={() => packageMenu.setOpen(false)}
@@ -114,7 +114,7 @@ export function SidebarLayout({
 				?.map((item) => (
 					<Link key={item} href={`/docs/packages/${packageName}/${item}`} passHref prefetch={false}>
 						<MenuItem
-							className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
+							className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
 							as="a"
 							state={versionMenu}
 							onClick={() => versionMenu.setOpen(false)}
@@ -130,17 +130,30 @@ export function SidebarLayout({
 
 	const pathElements = useMemo(
 		() =>
-			asPathWithoutQueryAndAnchor.split('/').map((path, idx, original) => (
-				<Link key={idx} href={original.slice(0, idx + 1).join('/')} prefetch={false}>
-					<a className="hover:underline">{path}</a>
-				</Link>
-			)),
+			asPathWithoutQueryAndAnchor
+				.split('/')
+				.slice(1)
+				.map((path, idx, original) => (
+					<Link key={idx} href={`/${original.slice(0, idx + 1).join('/')}`} prefetch={false}>
+						<a className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring">{path}</a>
+					</Link>
+				)),
 		[asPathWithoutQueryAndAnchor],
 	);
 
 	const breadcrumbs = useMemo(
 		() =>
 			pathElements.flatMap((el, idx, array) => {
+				if (idx === 0) {
+					return (
+						<Fragment key={idx}>
+							<div className="mx-2">/</div>
+							{el}
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
 				if (idx !== array.length - 1) {
 					return (
 						<Fragment key={idx}>
@@ -161,7 +174,7 @@ export function SidebarLayout({
 				<div className="h-18 block px-6">
 					<div className="flex h-full flex-row place-content-between place-items-center">
 						<Button
-							className="flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline active:translate-y-px lg:hidden"
+							className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
 							aria-label="Menu"
 							onClick={() => setOpened((open) => !open)}
 						>
@@ -171,7 +184,7 @@ export function SidebarLayout({
 						<div className="flex flex-row place-items-center gap-4">
 							<Button
 								as="div"
-								className="dark:bg-dark-800 rounded bg-white px-4 py-2.5"
+								className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple rounded bg-white px-4 py-2.5 outline-0 focus:ring"
 								onClick={() => dialog?.toggle()}
 							>
 								<div className="flex flex-row place-items-center gap-4">
@@ -184,7 +197,7 @@ export function SidebarLayout({
 							</Button>
 							<Button
 								as="a"
-								className="flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline active:translate-y-px"
+								className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
 								aria-label="GitHub"
 								href="https://github.com/discordjs/discord.js"
 								target="_blank"
@@ -193,7 +206,7 @@ export function SidebarLayout({
 								<VscGithubInverted size={24} />
 							</Button>
 							<Button
-								className="flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline active:translate-y-px"
+								className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
 								aria-label="Toggle theme"
 								onClick={() => toggleTheme()}
 							>
@@ -219,7 +232,7 @@ export function SidebarLayout({
 				>
 					<div className="flex flex-col gap-3 px-3 pt-3">
 						<MenuButton
-							className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
+							className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
 							state={packageMenu}
 						>
 							<div className="flex flex-row place-content-between place-items-center">
@@ -236,14 +249,14 @@ export function SidebarLayout({
 							</div>
 						</MenuButton>
 						<Menu
-							className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
+							className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
 							state={packageMenu}
 						>
 							{packageMenuItems}
 						</Menu>
 
 						<MenuButton
-							className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
+							className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
 							state={versionMenu}
 						>
 							<div className="flex flex-row place-content-between place-items-center">
@@ -260,7 +273,7 @@ export function SidebarLayout({
 							</div>
 						</MenuButton>
 						<Menu
-							className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
+							className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
 							state={versionMenu}
 						>
 							{versionMenuItems}
@@ -297,6 +310,7 @@ export function SidebarLayout({
 							<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
 								<a
 									href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
 									target="_blank"
 									rel="noopener noreferrer"
 									title="Vercel"
@@ -307,11 +321,17 @@ export function SidebarLayout({
 									<div className="flex flex-col gap-2">
 										<div className="text-lg font-semibold">Community</div>
 										<div className="flex flex-col gap-1">
-											<a href="https://discord.gg/djs" target="_blank" rel="noopener noreferrer">
+											<a
+												href="https://discord.gg/djs"
+												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+												target="_blank"
+												rel="noopener noreferrer"
+											>
 												Discord
 											</a>
 											<a
 												href="https://github.com/discordjs/discord.js/discussions"
+												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
 												target="_blank"
 												rel="noopener noreferrer"
 											>
@@ -322,13 +342,28 @@ export function SidebarLayout({
 									<div className="flex flex-col gap-2">
 										<div className="text-lg font-semibold">Project</div>
 										<div className="flex flex-col gap-1">
-											<a href="https://github.com/discordjs/discord.js" target="_blank" rel="noopener noreferrer">
+											<a
+												href="https://github.com/discordjs/discord.js"
+												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+												target="_blank"
+												rel="noopener noreferrer"
+											>
 												discord.js
 											</a>
-											<a href="https://discordjs.guide" target="_blank" rel="noopener noreferrer">
+											<a
+												href="https://discordjs.guide"
+												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+												target="_blank"
+												rel="noopener noreferrer"
+											>
 												discord.js guide
 											</a>
-											<a href="https://discord-api-types.dev" target="_blank" rel="noopener noreferrer">
+											<a
+												href="https://discord-api-types.dev"
+												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+												target="_blank"
+												rel="noopener noreferrer"
+											>
 												discord-api-types
 											</a>
 										</div>
diff --git a/packages/website/src/components/TableOfContentItems.tsx b/packages/website/src/components/TableOfContentItems.tsx
index e5bb53b11..4337055f8 100644
--- a/packages/website/src/components/TableOfContentItems.tsx
+++ b/packages/website/src/components/TableOfContentItems.tsx
@@ -16,7 +16,7 @@ export function TableOfContentItems({
 					key={prop.name}
 					href={`#${prop.name}`}
 					title={prop.name}
-					className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 ml-[10px] border-l p-[5px] text-sm"
+					className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] rounded border-l p-[5px] text-sm outline-0 focus:ring"
 				>
 					<span className="line-clamp-1">{prop.name}</span>
 				</a>
@@ -40,7 +40,7 @@ export function TableOfContentItems({
 						key={key}
 						href={`#${key}`}
 						title={member.name}
-						className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 ml-[10px] flex flex-row place-items-center gap-2 border-l p-[5px] text-sm"
+						className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] flex flex-row place-items-center gap-2 rounded border-l p-[5px] text-sm outline-0 focus:ring"
 					>
 						<span className="line-clamp-1">{member.name}</span>
 						{member.overloadIndex && member.overloadIndex > 1 ? (
diff --git a/packages/website/src/components/model/Function.tsx b/packages/website/src/components/model/Function.tsx
index a1abbb7bc..41f7b2b6b 100644
--- a/packages/website/src/components/model/Function.tsx
+++ b/packages/website/src/components/model/Function.tsx
@@ -24,7 +24,7 @@ export function Function({ data }: { data: ApiFunctionJSON }) {
 					<div className="flex flex-row place-items-center gap-2">
 						<MenuButton
 							state={menu}
-							className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
+							className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
 						>
 							<div className="flex flex-row place-content-between place-items-center gap-2">
 								<VscVersions size={20} />
@@ -40,12 +40,12 @@ export function Function({ data }: { data: ApiFunctionJSON }) {
 						</MenuButton>
 						<Menu
 							state={menu}
-							className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
+							className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
 						>
 							{data.mergedSiblings.map((_, idx) => (
 								<MenuItem
 									key={idx}
-									className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 cursor-pointer rounded bg-white p-3 text-sm"
+									className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 focus:ring"
 									onClick={() => setOverloadIndex(idx + 1)}
 								>{`Overload ${idx + 1}`}</MenuItem>
 							))}
diff --git a/packages/website/src/components/tsdoc/TSDoc.tsx b/packages/website/src/components/tsdoc/TSDoc.tsx
index 2e649c03b..8c0e22fe9 100644
--- a/packages/website/src/components/tsdoc/TSDoc.tsx
+++ b/packages/website/src/components/tsdoc/TSDoc.tsx
@@ -39,7 +39,9 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 				if (codeDestination) {
 					return (
 						<Link key={idx} href={codeDestination.path} prefetch={false}>
-							<a className="text-blurple font-mono">{text ?? codeDestination.name}</a>
+							<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring">
+								{text ?? codeDestination.name}
+							</a>
 						</Link>
 					);
 				}
@@ -47,7 +49,9 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 				if (urlDestination) {
 					return (
 						<Link key={idx} href={urlDestination} prefetch={false}>
-							<a className="text-blurple font-mono">{text ?? urlDestination}</a>
+							<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring">
+								{text ?? urlDestination}
+							</a>
 						</Link>
 					);
 				}
diff --git a/packages/website/src/pages/404.tsx b/packages/website/src/pages/404.tsx
index e4d5419af..135fd3e0e 100644
--- a/packages/website/src/pages/404.tsx
+++ b/packages/website/src/pages/404.tsx
@@ -12,7 +12,7 @@ export default function FourOhFourPage() {
 				<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
 				<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
 				<Link href="/docs/packages" prefetch={false}>
-					<a className="bg-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline active:translate-y-px">
+					<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
 						Take me back
 					</a>
 				</Link>
diff --git a/packages/website/src/pages/docs/packages/[package]/index.tsx b/packages/website/src/pages/docs/packages/[package]/index.tsx
index 809ef5f34..a12b7d036 100644
--- a/packages/website/src/pages/docs/packages/[package]/index.tsx
+++ b/packages/website/src/pages/docs/packages/[package]/index.tsx
@@ -71,7 +71,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
 				<h1 className="text-2xl font-semibold">Select a version:</h1>
 				{props.data?.versions.map((version) => (
 					<Link key={version} href={`/docs/packages/${props.packageName}/${version}`} prefetch={false}>
-						<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 flex flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white">
+						<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white">
 							<div className="flex flex-row place-content-between place-items-center gap-4">
 								<div className="flex flex-row place-content-between place-items-center gap-4">
 									<VscVersions size={25} />
@@ -83,7 +83,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
 					</Link>
 				)) ?? null}
 				<Link href="/docs/packages" prefetch={false}>
-					<a className="bg-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline active:translate-y-px">
+					<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
 						<VscArrowLeft size={20} /> Go back
 					</a>
 				</Link>
diff --git a/packages/website/src/pages/docs/packages/index.tsx b/packages/website/src/pages/docs/packages/index.tsx
index f41cb155d..fcfad2165 100644
--- a/packages/website/src/pages/docs/packages/index.tsx
+++ b/packages/website/src/pages/docs/packages/index.tsx
@@ -64,7 +64,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
 			<div className="flex grow flex-col place-content-center gap-4">
 				<h1 className="text-2xl font-semibold">Select a package:</h1>
 				<a
-					className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
+					className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
 					href="https://discord.js.org/#/docs/discord.js"
 				>
 					<div className="flex grow flex-row place-content-between place-items-center gap-4">
@@ -79,7 +79,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
 				</a>
 				{PACKAGES.map((pkg) => (
 					<Link key={pkg} href={`/docs/packages/${pkg}/${findLatestVersion(pkg)?.version ?? 'main'}`} prefetch={false}>
-						<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white">
+						<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white">
 							<div className="flex grow flex-row place-content-between place-items-center gap-4">
 								<div className="flex grow flex-row place-content-between place-items-center gap-4">
 									<div className="flex flex-row place-content-between place-items-center gap-4">
@@ -90,7 +90,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
 										<Button
 											as="div"
 											role="link"
-											className="bg-blurple flex h-6 transform-gpu cursor-pointer select-none appearance-none place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white active:translate-y-px"
+											className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-0 focus:ring focus:ring-white active:translate-y-px"
 											onClick={async (ev: MouseEvent<HTMLDivElement>) => handleClick(ev, pkg)}
 										>
 											Select version
@@ -103,7 +103,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
 					</Link>
 				))}
 				<Link href="/" prefetch={false}>
-					<a className="bg-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline active:translate-y-px">
+					<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
 						<VscArrowLeft size={20} /> Go back
 					</a>
 				</Link>
diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx
index c5c4d52d1..a05aa5d2e 100644
--- a/packages/website/src/pages/index.tsx
+++ b/packages/website/src/pages/index.tsx
@@ -21,12 +21,12 @@ export default function IndexRoute() {
 					</p>
 					<div className="flex flex-row gap-4">
 						<Link href="/docs" prefetch={false}>
-							<a className="bg-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline active:translate-y-px">
+							<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
 								Docs
 							</a>
 						</Link>
 						<a
-							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline active:translate-y-px dark:text-white"
+							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
 							href="https://discordjs.guide"
 							target="_blank"
 							rel="noopener noreferrer"
@@ -34,7 +34,7 @@ export default function IndexRoute() {
 							Guide <FiExternalLink />
 						</a>
 						<a
-							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline active:translate-y-px dark:text-white"
+							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none appearance-none place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
 							href="https://github.com/discordjs/discord.js"
 							target="_blank"
 							rel="noopener noreferrer"
@@ -48,6 +48,7 @@ export default function IndexRoute() {
 			<div className="flex place-content-center">
 				<a
 					href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+					className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
 					target="_blank"
 					rel="noopener noreferrer"
 					title="Vercel"