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 ? (
<section className="space-x-2">
<Image
className="inline"
className="inline select-none"
alt="email"
width={20}
height={20}
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>
) : undefined}
{phone ? (
<section className="space-x-2">
<Image
className="inline"
className="inline select-none"
alt="phone"
width={20}
height={20}
src="/phone-call-icon.svg"
/>
<h2 className="inline text-sm">{phone}</h2>
<h2 className="inline select-all text-sm">{phone}</h2>
</section>
) : undefined}
</section>

16
src/pages/contact.tsx
View File

@ -30,18 +30,22 @@ const ContactForm = ({ details }: { details: ContactDetails }) => {
return (
<section className="grow p-8">
<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>{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
className="inline-block my-auto"
className="my-auto inline-block select-none"
alt="email"
width={20}
height={20}
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}
</span>
</a>
@ -56,11 +60,11 @@ const Contact: NextPage = () => {
<Header />
<main>
{/** 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>
<h1 className="font-bold text-gray-300">Contact Information</h1>
</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) => {
return <ContactForm key={index} details={contactDetails} />;
})}