From 55d20519343b3bca1725f08dce7c001c980e9bc3 Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Wed, 19 Apr 2023 01:08:49 -0500
Subject: [PATCH] improve accessibility of footer email links

---
 src/components/Footer.tsx | 10 ++++++----
 src/pages/contact.tsx     | 16 ++++++++++------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 271332d..656c0ab 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -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>
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index 808b371..0044f28 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -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} />;
             })}