fix: focus-ring styles

discordjs · Sep 21, 2022 · 9b40a79 · 9b40a79 · vercel · Sep 21, 2022
1 parent 0b12d6f
commit 9b40a79
Show file tree

Hide file tree

Showing 15 changed files with 101 additions and 49 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
 							))}