Improve accessibility

jamulussoftware · Jun 27, 2024 · e4691de · e4691de
1 parent 13f9024
commit e4691de
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/_includes/langselect.html b/_includes/langselect.html
@@ -2,19 +2,19 @@
   <div id="langselect">
     <!-- Language Dropdown -->
     <div class="language-dropdown">
-      <button class="dropdown-button" aria-expanded="false">
+      <button class="dropdown-button" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu">
         <span class="dropdown-button-content">
-          <img src="{{ site.baseurl }}/assets/img/lang-icon.png" alt="Language Icon" class="lang-icon">
+          <img src="{{ site.baseurl }}/assets/img/lang-icon.svg" alt="Language Icon" class="lang-icon">
           <span class="lang-text">{{ site.language_names[site.active_lang] }} &#9660;</span>
           <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/langsel.css">
         </span>
       </button>
-      <div class="dropdown-content">
+      <div class="dropdown-content" id="dropdown-menu" role="menu">
         <ul>
           {% assign sorted_languages = site.languages | sort %}
           {% for lng in sorted_languages %}
             {% if lng == site.active_lang %}
-              <li class="selected" data-slang="{{ lng }}">{{ site.language_names[lng] }}</li>
+              <li class="selected" role="menuitem" aria-current="page" tabindex="0" data-slang="{{ lng }}">{{ site.language_names[lng] }}</li>
             {% else %}
               {% if lng == site.default_lang %}
                 {% capture langlink %}
@@ -27,7 +27,7 @@
                 {% endcapture %}
                 {% capture lang_rel %}alternate{% endcapture %}
               {% endif %}
-              <li><a href="{{ langlink }}" rel="{{ lang_rel }}" data-slang="{{ lng }}">{{ site.language_names[lng] }}</a></li>
+              <li role="menuitem" tabindex="0"><a href="{{ langlink }}" rel="{{ lang_rel }}" data-slang="{{ lng }}">{{ site.language_names[lng] }}</a></li>
             {% endif %}
           {% endfor %}
         </ul>

diff --git a/assets/css/langsel.css b/assets/css/langsel.css
@@ -50,7 +50,7 @@
   display: inline-block;
 }
 
-.dropdown-button:hover {
+.dropdown-button:hover, .dropdown-button:focus {
   text-decoration: none;
   transition: 0.4s;
   opacity: 0.8;
@@ -85,16 +85,20 @@
 .dropdown-content li {
   width: 100%;
   white-space: nowrap;
+  margin: 0; /* Vertical margin */
 }
 
 .dropdown-content a {
-  padding: 0px;
+  padding: 5px 10px;
   text-decoration: none;
   display: block;
+  color: #000;
 }
 
-.dropdown-content a:hover {
+.dropdown-content a:hover, .dropdown-content a:focus {
   background-color: #f1f1f1; /* Whitesmoke */
+  outline: none;
+  border-radius: 5px;
 }
 
 .selected {
@@ -109,3 +113,10 @@
     overflow-x: hidden; /* Disable horizontal scrolling */
   }
 }
+
+/* Additional styling for focus state to enhance accessibility */
+#langselect ul li:focus, #langselect ul li:focus-within {
+  outline: 2px solid #2b7288;
+  outline-offset: 2px;
+  border-radius: 5px;
+}