Lots of small tweaks to improve accessibility and consistency

Author: BrianMitchL

src/globals/site.json

@@ -9,6 +9,10 @@
     "email": "javascriptmn@gmail.com"
   },
   "navigation": [
+    {
+      "path": "/",
+      "text": "Home"
+    },
     {
       "path": "/sponsors/",
       "text": "Sponsors"

src/globals/sponsors.json

@@ -1,7 +1,7 @@
 [
   {
     "showOnHome": true,
-    "section": "Host 🌎",
+    "section": "Host <span role=\"img\" aria-label=\"earth\">🌎</span>",
     "sponsors": [
       {
         "imgSrc": "/sponsors/logo-wework.svg",
@@ -12,7 +12,7 @@
   },
   {
     "showOnHome": true,
-    "section": "Diamond 💎",
+    "section": "Diamond <span role=\"img\" aria-label=\"diamond\">💎</span>",
     "sponsors": [
       {
         "imgSrc": "/sponsors/logo-twilio.svg",
@@ -38,12 +38,12 @@
   },
   {
     "showOnHome": false,
-    "section": "Gold 🥇",
+    "section": "Gold <span role=\"img\" aria-label=\"gold medal\">🥇</span>",
     "sponsors": []
   },
   {
     "showOnHome": false,
-    "section": "Silver 🥈",
+    "section": "Silver <span role=\"img\" aria-label=\"silver medal\">🥈</span>",
     "sponsors": []
   }
 ]

src/includes/footer.njk

@@ -4,12 +4,13 @@
       class="flex justify-center items-start space-x-16 divide-x-2 divide-gray-100 divide"
     >
       <div class="px-2">
-        <h5
+        <p
           class="uppercase inline-block bg-black text-white font-bold px-4 mb-2 transform -rotate-1"
+          id="footer-meetup"
         >
           Meetup
-        </h5>
-        <ul>
+        </p>
+        <ul aria-describedby="footer-meetup">
           {% for link in site.navigation %}
           <li>
             <a class="hover:underline" href="{{ link.path | url }}"
@@ -20,12 +21,13 @@
         </ul>
       </div>
       <div class="px-2">
-        <h5
+        <p
           class="uppercase inline-block bg-black text-white font-bold px-4 mb-2 transform rotate-1"
+          id="footer-connect"
         >
           Connect
-        </h5>
-        <ul>
+        </p>
+        <ul aria-describedby="footer-connect">
           {% for link in site.connect %}
           <li>
             <a class="hover:underline" href="{{ link.href }}"

src/includes/header.njk

@@ -45,7 +45,7 @@
       <div
         class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-between"
       >
-        <div class="flex-shrink-0">
+        <div class="flex-shrink-0 self-center">
           <a href="{{ '/' | url }}" class="flex sm:hidden w-auto">
             <img
               class="h-8"

src/includes/layouts/prose.njk

@@ -2,6 +2,6 @@
 layout: base
 ---
 
-<div class="container mx-auto mt-10 p-2">
+<div class="container mx-auto mt-8 p-2">
   <div class="prose mx-auto">{{ content | safe }}</div>
 </div>

src/includes/nextEvent.njk

@@ -1,6 +1,6 @@
 {% set event = events | rejectattr('hidden') | first %}
 
-<div class="mb-16">
+<div class="mb-20">
   <h2
     class="inline-block bg-black text-white text-2xl font-bold px-4 mb-2 transform -rotate-1"
   >
@@ -25,13 +25,13 @@
         {{ event.location }}
       </p>
       <p>
-        <a href="{{ event.link }}" class="text-lg font-bold underline">Details &amp; RSVP</a>
+        <a href="{{ event.link }}" class="text-lg font-bold hover:underline">Details &amp; RSVP</a>
       </p>
     </div>
     {# fallback #}
     <div class="bg-jsmn-yellow text-2xl font-bold p-4 hidden"
         id="upcoming-event-fallback">
-      <a href="https://www.meetup.com/javascriptmn/" class="underline">Check
+      <a href="https://www.meetup.com/javascriptmn/" class="hover:underline">Check
         Meetup.com for updates</a>
     </div>
   </div>

src/index.njk

@@ -101,7 +101,7 @@ changeFreq: daily
           <h2
             class="inline-block bg-black text-white text-2xl font-bold px-4 transform -rotate-1"
           >
-            Speaking
+            Speak
           </h2>
         </div>
         <div
@@ -142,15 +142,15 @@ changeFreq: daily
           {% for section in sponsors %}
           {% if section.showOnHome === true %}
           <div class="w-2/3 mx-auto mb-4">
-            <h3 class="font-bold text-2xl">{{ section.section }}</h3>
+            <h3 class="font-bold text-2xl">{{ section.section | safe }}</h3>
             <div class="grid sm:grid-cols-4 sm:gap-2 grid-cols-none space-y-4 sm:space-y-0">
               {% for sponsor in section.sponsors %}
               <div class="flex justify-center items-center">
                 <a
                   href="{{ sponsor.href }}"
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="flex justify-center items-center shadow transition-all border border-gray-200 hover:border-gray-400 w-full p-4"
+                  class="flex justify-center items-center shadow transition-all border border-gray-200 hover:border-gray-600 w-full p-4"
                 >
                   <img
                     src="{{ sponsor.imgSrc | url }}"

src/sponsors.njk

@@ -3,7 +3,7 @@ layout: base
 title: Sponsors
 ---
 
-<div class="container mx-auto px-2 my-8">
+<div class="container mx-auto p-2 my-8">
   <div class="x-h-screen flex justify-center items-center">
     <div class="w-full">
       <div class="mb-8">
@@ -22,15 +22,15 @@ title: Sponsors
         <div class="border-jsmn-yellow border-4 p-4 divide-y divide-gray-200">
           {% for section in sponsors %}
           <div class="py-4">
-            <h2 class="text-3xl font-bold">{{ section.section }}</h2>
+            <h2 class="text-3xl font-bold">{{ section.section | safe }}</h2>
             <ul class="grid sm:grid-cols-3 sm:gap-2 grid-cols-none">
               {% for sponsor in section.sponsors %}
               <li class="flex justify-center items-center">
                 <a
                   href="{{ sponsor.href }}"
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="flex justify-center items-center shadow transition-all border border-gray-200 hover:border-gray-400 w-full p-4 m-2"
+                  class="flex justify-center items-center shadow border border-gray-200 hover:border-gray-600 w-full p-4 m-2"
                 >
                   <img
                     src="{{ sponsor.imgSrc | url }}"
@@ -42,10 +42,10 @@ title: Sponsors
               </li>
               {% else %}
               <li
-                class="flex justify-center items-center p-4 m-2 border border-gray-200 shadow"
+                class="flex justify-center items-center p-4 m-2 border border-gray-200 hover:border-gray-600 shadow"
               >
                 <a
-                  class="transition-all transform hover:scale-110 h-32 w-full flex justify-center items-center"
+                  class="transition-all transform h-32 w-full flex justify-center items-center"
                   href="{{ '/sponsorship-opportunities/' | url }}"
                 >
                   <span class="text-lg font-bold">Become a sponsor →</span>

src/sponsorship-opportunities.njk

@@ -3,9 +3,9 @@ title: Sponsorship Opportunities
 layout: base
 ---
 
-<div class="container mx-auto p-2">
+<div class="container mx-auto mt-8 p-2">
   <div class="text-center">
-    <h1 class="text-3xl">Sponsorship Opportunities</h1>
+    <h1 class="text-3xl font-bold">Sponsorship Opportunities</h1>
     <p class="text-xl">
       Choose any of our our opportunities and join our community
     </p>
@@ -27,7 +27,7 @@ layout: base
     <section class="w-full sm:w-1/3">
       <div class="border-4 border-jsmn-yellow shadow-lg">
         <div class="px-2 text-center my-4">
-          <p role="presentation" class="text-8xl">🥈</p>
+          <p role="img" aria-label="silver medal" class="text-8xl">🥈</p>
           <h2 class="text-3xl">Silver</h2>
           <p class="text-xl">$250 / year</p>
         </div>
@@ -54,7 +54,7 @@ layout: base
     <section class="w-full sm:w-1/3">
       <div class="border-4 border-jsmn-yellow shadow-lg">
         <div class="px-2 text-center my-4">
-          <p role="presentation" class="text-8xl">🥇</p>
+          <p role="img" aria-label="gold medal" class="text-8xl">🥇</p>
           <h2 class="text-3xl">Gold</h2>
           <p class="text-xl">$1,000 / year</p>
         </div>
@@ -95,7 +95,7 @@ layout: base
           </div>
         </div>
         <div class="px-2 text-center my-4">
-          <p role="presentation" class="text-8xl transform duration-200 hover:-rotate-25">💎</p>
+          <p role="img" aria-label="diamond" class="text-8xl transform duration-200 hover:-rotate-25">💎</p>
           <h2 class="text-3xl">Diamond</h2>
           <p class="text-xl">$2,500 / year</p>
         </div>