Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-17 20:13:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: accessibility improvements

Browse Source
This commit is contained in:
iCrawl
2022-09-07 11:29:58 +02:00
parent 55c3ee20ae
commit d8e774138d
5 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/website/src/components/CodeListing.tsx
View File

@@ -35,11 +35,11 @@ export function CodeListing({
return ( return (
<div id={name} className="scroll-mt-30 flex flex-col gap-4"> <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`}> <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} /> <FiLink size={20} />
</a> </a>
{deprecation || readonly || optional ? ( {deprecation || readonly || optional ? (
<div className="flex flex-row flex-wrap gap-1"> <div className="flex flex-row gap-1">
{deprecation ? ( {deprecation ? (
<div className="h-5 place-content-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white"> <div className="h-5 place-content-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated Deprecated

6
packages/website/src/components/MethodItem.tsx
View File

@@ -29,13 +29,13 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
<div id={key} className="scroll-mt-30 flex flex-col gap-4"> <div id={key} className="scroll-mt-30 flex flex-col gap-4">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-col gap-2 md:-ml-9 md:flex-row md:place-items-center"> <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} /> <FiLink size={20} />
</a> </a>
{data.deprecated || {data.deprecated ||
(data.kind === 'Method' && method.protected) || (data.kind === 'Method' && method.protected) ||
(data.kind === 'Method' && method.static) ? ( (data.kind === 'Method' && method.static) ? (
<div className="flex flex-row flex-wrap gap-1"> <div className="flex flex-row gap-1">
{data.deprecated ? ( {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"> <div className="h-5 place-content-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated Deprecated
@@ -54,7 +54,7 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
</div> </div>
) : null} ) : null}
<div className="flex flex-row flex-wrap gap-1"> <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="font-mono text-lg font-bold">:</h4>
<h4 className="break-all font-mono text-lg font-bold"> <h4 className="break-all font-mono text-lg font-bold">
<HyperlinkedText tokens={data.returnTypeTokens} /> <HyperlinkedText tokens={data.returnTypeTokens} />

2
packages/website/src/components/Sections.tsx
View File

@@ -64,7 +64,7 @@ export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-col gap-2 md:flex-row md:place-items-center"> <div className="flex flex-col gap-2 md:flex-row md:place-items-center">
{data.deprecated || data.protected ? ( {data.deprecated || data.protected ? (
<div className="flex flex-row flex-wrap gap-1"> <div className="flex flex-row gap-1">
{data.deprecated ? ( {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"> <div className="h-5 place-content-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated Deprecated

2
packages/website/src/components/SidebarItems.tsx
View File

@@ -97,7 +97,7 @@ export function SidebarItems({
title={member.name} title={member.name}
onClick={() => setOpened(false)} 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> <span className="truncate">{member.name}</span>
{member.overloadIndex && member.overloadIndex > 1 ? ( {member.overloadIndex && member.overloadIndex > 1 ? (
<span className="text-xs">{member.overloadIndex}</span> <span className="text-xs">{member.overloadIndex}</span>

8
packages/website/src/components/SidebarLayout.tsx
View File

@@ -137,6 +137,7 @@ export function SidebarLayout({
<div className="flex h-full flex-row place-content-between place-items-center"> <div className="flex h-full flex-row place-content-between place-items-center">
<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 lg:hidden" 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)} onClick={() => setOpened((open) => !open)}
> >
<VscMenu size={24} /> <VscMenu size={24} />
@@ -146,6 +147,7 @@ export function SidebarLayout({
<Button <Button
as="a" 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="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" href="https://github.com/discordjs/discord.js"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@@ -154,7 +156,7 @@ export function SidebarLayout({
</Button> </Button>
<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="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()} onClick={() => toggleTheme()}
> >
<VscColorMode size={24} /> <VscColorMode size={24} />
@@ -257,7 +259,7 @@ export function SidebarLayout({
</a> </a>
<div className="flex flex-row gap-6 md:gap-12"> <div className="flex flex-row gap-6 md:gap-12">
<div className="flex flex-col gap-2"> <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"> <div className="flex flex-col gap-1">
<a href="https://discord.gg/djs" target="_blank" rel="noopener noreferrer"> <a href="https://discord.gg/djs" target="_blank" rel="noopener noreferrer">
Discord Discord
@@ -272,7 +274,7 @@ export function SidebarLayout({
</div> </div>
</div> </div>
<div className="flex flex-col gap-2"> <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"> <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" target="_blank" rel="noopener noreferrer">
discord.js discord.js