Add better focus indicators

djangocon · Sep 1, 2024 · a5a9276 · a5a9276
1 parent a2787c3
commit a5a9276
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/_includes/nav.html b/src/_includes/nav.html
@@ -1,5 +1,5 @@
 <ul class="hidden site-nav lg:flex">
-  <li class="lg:sr-only"><a href="/">Home</a></li>
+  <li class="lg:hidden"><a href="/">Home</a></li>
   <li>
     <a href="/about"
     data-menu-trigger

diff --git a/src/_includes/sponsor-listing.html b/src/_includes/sponsor-listing.html
@@ -12,6 +12,7 @@ <h3 class="flex items-center bg-sep">
               {% if sponsor.data.url.target %}
                 <a
                   href="{{ sponsor.data.url.target }}"
+                  class="inline-block"
                   target="_blank"
                   rel="noopener noreferrer">
               {% endif %}

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -72,6 +72,10 @@
     @apply no-underline;
   }
 
+  :focus-visible {
+   outline: 6px solid theme('colors.red.DEFAULT');
+  }
+
   a.reverse-link {
     @apply no-underline;
   }

diff --git a/src/schedule.html b/src/schedule.html
@@ -34,7 +34,7 @@ <h2 class="mb-1 font-bold uppercase sr-only">Jump to day</h2>
         {% endcomment %}
         {% for day in collections.sessionsByDateAndTime %}
         <li>
-          <a href="#Day-{{ forloop.index }}" class="no-underline group">
+          <a href="#Day-{{ forloop.index }}" class="block no-underline group">
             <time class="flex flex-col" datetime="{{ day[0] | formatDateTime: 'yyyy-MM-dd' }}">
               <span class="px-3 py-1 min-w-[8ch] text-2xl font-semibold text-center text-white bg-red rounded-t-md border-2 border-red group-hover:border-black group-hover:border-b-red">{{ day[0] | formatDateTime: "E" }}</span>
               <span class="px-3 py-1 text-xl text-center text-black bg-white border-2 border-t-0 border-gray-300 rounded-b-md group-hover:border-black">{{ day[0] | formatDateTime: "LLL d" }}</span>