From d8e774138d5ab0333a767599e5470b4ea3f35ba5 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Wed, 7 Sep 2022 11:29:58 +0200
Subject: [PATCH] fix: accessibility improvements

---
 packages/website/src/components/CodeListing.tsx   | 4 ++--
 packages/website/src/components/MethodItem.tsx    | 6 +++---
 packages/website/src/components/Sections.tsx      | 2 +-
 packages/website/src/components/SidebarItems.tsx  | 2 +-
 packages/website/src/components/SidebarLayout.tsx | 8 +++++---
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/website/src/components/CodeListing.tsx b/packages/website/src/components/CodeListing.tsx
index 5a3f1dd4c..b913b6a85 100644
--- a/packages/website/src/components/CodeListing.tsx
+++ b/packages/website/src/components/CodeListing.tsx
@@ -35,11 +35,11 @@ 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" href={`#${name}`}>
+				<a className="hidden md:inline-block" aria-label="Anchor" href={`#${name}`}>
 					<FiLink size={20} />
 				</a>
 				{deprecation || readonly || optional ? (
-					<div className="flex flex-row flex-wrap gap-1">
+					<div className="flex flex-row gap-1">
 						{deprecation ? (
 							<div className="h-5 place-content-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
 								Deprecated
diff --git a/packages/website/src/components/MethodItem.tsx b/packages/website/src/components/MethodItem.tsx
index 3b41f6caa..4ceea7b93 100644
--- a/packages/website/src/components/MethodItem.tsx
+++ b/packages/website/src/components/MethodItem.tsx
@@ -29,13 +29,13 @@ 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" href={`#${key}`}>
+					<a className="hidden md:inline-block" aria-label="Anchor" href={`#${key}`}>
 						<FiLink size={20} />
 					</a>
 					{data.deprecated ||
 					(data.kind === 'Method' && method.protected) ||
 					(data.kind === 'Method' && method.static) ? (
-						<div className="flex flex-row flex-wrap gap-1">
+						<div className="flex flex-row gap-1">
 							{data.deprecated ? (
 								<div className="h-5 place-content-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
 									Deprecated
@@ -54,7 +54,7 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
 						</div>
 					) : null}
 					<div className="flex flex-row flex-wrap gap-1">
-						<h4 className="break-all font-mono text-lg font-bold">{`${getShorthandName(data)}`}</h4>
+						<h4 className="break-all font-mono text-lg font-bold">{getShorthandName(data)}</h4>
 						<h4 className="font-mono text-lg font-bold">:</h4>
 						<h4 className="break-all font-mono text-lg font-bold">
 							<HyperlinkedText tokens={data.returnTypeTokens} />
diff --git a/packages/website/src/components/Sections.tsx b/packages/website/src/components/Sections.tsx
index 3d34c1400..06babab6c 100644
--- a/packages/website/src/components/Sections.tsx
+++ b/packages/website/src/components/Sections.tsx
@@ -64,7 +64,7 @@ export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
 				<div className="flex flex-col">
 					<div className="flex flex-col gap-2 md:flex-row md:place-items-center">
 						{data.deprecated || data.protected ? (
-							<div className="flex flex-row flex-wrap gap-1">
+							<div className="flex flex-row gap-1">
 								{data.deprecated ? (
 									<div className="h-5 place-content-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
 										Deprecated
diff --git a/packages/website/src/components/SidebarItems.tsx b/packages/website/src/components/SidebarItems.tsx
index cad89411d..384daf3f3 100644
--- a/packages/website/src/components/SidebarItems.tsx
+++ b/packages/website/src/components/SidebarItems.tsx
@@ -97,7 +97,7 @@ export function SidebarItems({
 									title={member.name}
 									onClick={() => setOpened(false)}
 								>
-									<div className="flex flex-row place-items-center gap-2 text-sm">
+									<div className="flex flex-row place-items-center gap-2 lg:text-sm">
 										<span className="truncate">{member.name}</span>
 										{member.overloadIndex && member.overloadIndex > 1 ? (
 											<span className="text-xs">{member.overloadIndex}</span>
diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
index dc20bdbde..8975aa863 100644
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/packages/website/src/components/SidebarLayout.tsx
@@ -137,6 +137,7 @@ export function SidebarLayout({
 					<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"
+							aria-label="Menu"
 							onClick={() => setOpened((open) => !open)}
 						>
 							<VscMenu size={24} />
@@ -146,6 +147,7 @@ export function SidebarLayout({
 							<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"
+								aria-label="GitHub"
 								href="https://github.com/discordjs/discord.js"
 								target="_blank"
 								rel="noopener noreferrer"
@@ -154,7 +156,7 @@ export function SidebarLayout({
 							</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"
-								role="button"
+								aria-label="Toggle theme"
 								onClick={() => toggleTheme()}
 							>
 								<VscColorMode size={24} />
@@ -257,7 +259,7 @@ export function SidebarLayout({
 								</a>
 								<div className="flex flex-row gap-6 md:gap-12">
 									<div className="flex flex-col gap-2">
-										<h4 className="text-lg font-semibold">Community</h4>
+										<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">
 												Discord
@@ -272,7 +274,7 @@ export function SidebarLayout({
 										</div>
 									</div>
 									<div className="flex flex-col gap-2">
-										<h4 className="text-lg font-semibold">Project</h4>
+										<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">
 												discord.js