brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

improve accessibility of footer email links

Browse Source
This commit is contained in:
Brandon Egger 2023-04-19 01:08:49 -05:00
parent 15070f2232
commit 55d2051934
2 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Footer.tsx
View File

@ -66,25 +66,27 @@ const ContactInfo = ({ name, title, email, phone }: ContactInfo) => {
{email ? ( {email ? (
<section className="space-x-2"> <section className="space-x-2">
<Image <Image
className="inline" className="inline select-none"
alt="email" alt="email"
width={20} width={20}
height={20} height={20}
src="/mail-icon-white.svg" src="/mail-icon-white.svg"
/> />
<h2 className="inline text-sm">{email}</h2> <a href={`mailto:${email}?`} className="inline select-all text-sm">
{email}
</a>
</section> </section>
) : undefined} ) : undefined}
{phone ? ( {phone ? (
<section className="space-x-2"> <section className="space-x-2">
<Image <Image
className="inline" className="inline select-none"
alt="phone" alt="phone"
width={20} width={20}
height={20} height={20}
src="/phone-call-icon.svg" src="/phone-call-icon.svg"
/> />
<h2 className="inline text-sm">{phone}</h2> <h2 className="inline select-all text-sm">{phone}</h2>
</section> </section>
) : undefined} ) : undefined}
</section> </section>

16
src/pages/contact.tsx
View File

@ -30,18 +30,22 @@ const ContactForm = ({ details }: { details: ContactDetails }) => {
return ( return (
<section className="grow p-8"> <section className="grow p-8">
<div className="mx-auto w-fit text-left"> <div className="mx-auto w-fit text-left">
<h1 className="font-bold text-xl">{details.name}</h1> <h1 className="text-xl font-bold">{details.name}</h1>
<h2 className="font-semibold text-neutral-500">{details.title}</h2> <h2 className="font-semibold text-neutral-500">{details.title}</h2>
<h2>{details.role}</h2> <h2>{details.role}</h2>
<a className="mt-4 block w-fit p-2 hover:bg-white group bg-neutral-900 rounded-lg space-x-2" href={`mailto:${details.email}?`}> <h3 className="text-yellow-500">University of Iowa</h3>
<a
className="group mt-4 block w-fit space-x-2 rounded-lg bg-neutral-900 p-2 drop-shadow hover:bg-white"
href={`mailto:${details.email}?`}
>
<Image <Image
className="inline-block my-auto" className="my-auto inline-block select-none"
alt="email" alt="email"
width={20} width={20}
height={20} height={20}
src="/mail-icon-white.svg" src="/mail-icon-white.svg"
/> />
<span className="select-all group-hover:text-black text-white"> <span className="select-all text-white group-hover:text-black">
{details.email} {details.email}
</span> </span>
</a> </a>
@ -56,11 +60,11 @@ const Contact: NextPage = () => {
<Header /> <Header />
<main> <main>
{/** Contact section */} {/** Contact section */}
<section className="my-4 sm:my-8 md:my-12 mx-auto max-w-4xl overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 drop-shadow"> <section className="my-4 mx-auto max-w-4xl overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 drop-shadow sm:my-8 md:my-12">
<TopLabel> <TopLabel>
<h1 className="font-bold text-gray-300">Contact Information</h1> <h1 className="font-bold text-gray-300">Contact Information</h1>
</TopLabel> </TopLabel>
<div className="flex flex-col sm:flex-row divide-y sm:divide-x divide-neutral-500"> <div className="flex flex-col divide-y divide-neutral-500 sm:flex-row sm:divide-x sm:divide-y-0">
{contacts.map((contactDetails, index) => { {contacts.map((contactDetails, index) => {
return <ContactForm key={index} details={contactDetails} />; return <ContactForm key={index} details={contactDetails} />;
})} })}