fix: more a11y improvements

inclusive-design · May 22, 2024 · 74c758a · 74c758a
1 parent c92d604
commit 74c758a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -32,9 +32,9 @@
                 <ul role="list" class="main-menu">
                     {% block headerContent %}{% endblock %}
                     <li>
-                        <ul class="lang-toggle">
-                            <a id="toggle-en" href="" lang="en-CA" hreflang="en-CA" aria-current="page">English</a> /
-                            <a id="toggle-fr" href="" lang="fr-CA" hreflang="fr-CA">Français</a>
+                        <ul role="list" class="lang-toggle">
+                            <li><a id="toggle-en" href="" lang="en-CA" hreflang="en-CA" aria-current="page">English</a></list> /
+                            <li><a id="toggle-fr" href="" lang="fr-CA" hreflang="fr-CA">Français</a></list>
                         </ul>
                     </li>
                 </ul>

diff --git a/src/home.njk b/src/home.njk
@@ -6,19 +6,21 @@ permalink: /
 {% extends 'layouts/base.njk' %}
 
 {% block headerContent %}
-<div class="admin-controls">
-    <li>
-        <button class="create-button" id="create-button">
-            <svg role="presentation" class="create-question-svg">
-                <use xlink:href="#create"></use>
-            </svg>
-            <span>New Question</span>
-        </button>
-    </li>
-    <li>
-        <div data-netlify-identity-button></div>
-    </li>
-</div>
+<li class="admin-controls">
+    <ul role="list">
+        <li>
+            <button class="create-button" id="create-button">
+                <svg role="presentation" class="create-question-svg">
+                    <use xlink:href="#create"></use>
+                </svg>
+                <span>New Question</span>
+            </button>
+        </li>
+        <li>
+            <div data-netlify-identity-button></div>
+        </li>
+    </ul>
+</li>
 {% endblock %}
 
 {% block content %}

diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
@@ -36,9 +36,16 @@ header {
 
     .admin-controls {
         align-items: center;
+
+        ul {
+            display: flex;
+            flex-direction: row;
+        }
     }
 
     .lang-toggle {
+        display: flex;
+        flex-direction: row;
         margin-right: rem(16);
 
         a {