Various a11y fixes

springload · Sep 9, 2024 · c5c8b55 · c5c8b55
1 parent dc9f6cb
commit c5c8b55
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 6 deletions.
diff --git a/cdhweb/static_src/components/MainNavDesktop/MainNavDesktopItem.tsx b/cdhweb/static_src/components/MainNavDesktop/MainNavDesktopItem.tsx
@@ -158,6 +158,7 @@ const DesktopMenuItem = ({
           className={cx('main-nav-desktop__item', {
             'main-nav-desktop__item--current-section': item.is_current,
           })}
+          aria-current={item.is_current ? 'page' : undefined}
         >
           <span>{item.title}</span>
         </a>

diff --git a/cdhweb/static_src/components/MainNavMobile/MainNavMobileItem.tsx b/cdhweb/static_src/components/MainNavMobile/MainNavMobileItem.tsx
@@ -35,7 +35,11 @@ const MobileMenuItem = ({
           />
         </button>
       ) : (
-        <a href={item.link_url} className="mobile-menu__nav-btn">
+        <a
+          href={item.link_url}
+          className="mobile-menu__nav-btn"
+          aria-current={item.is_current ? 'page' : undefined}
+        >
           <span>{item.title}</span>
           <Svg
             sprite="two-tone"

diff --git a/cdhweb/static_src/global/components/main-nav-desktop.scss b/cdhweb/static_src/global/components/main-nav-desktop.scss
@@ -134,7 +134,7 @@
 }
 
 .main-nav-desktop__item--current-section {
-  border-color: var(--color-brand-40);
+  border-color: var(--color-brand-100);
 }
 
 .main-nav-desktop__dropdown-icon {

diff --git a/cdhweb/static_src/global/mixins/three-dee-box.scss b/cdhweb/static_src/global/mixins/three-dee-box.scss
@@ -64,7 +64,7 @@
   }
 
   & > * {
+    // Make content appear in front of 3d box's solid background
     isolation: isolate;
-    z-index: 1;
   }
 }
diff --git a/templates/includes/header.html b/templates/includes/header.html
@@ -42,8 +42,11 @@
                                 class="main-nav-desktop__item 
                                     {% if request.path|starts_with:item.link_url %}
                                         main-nav-desktop__item--current-section
-                                    {% endif %}
-                            ">  
+                                    {% endif %}"
+                                {% if request.path|starts_with:item.link_url and not item.l2_items.all %}
+                                    aria-current="page"
+                                {% endif %}
+                                >  
                                 <span>{{ item.title }}</span>
                                 {# Reserve space for dropdown icon, to stop jank when the React version replaces this version. #}
                                 {% if item.l2_items.all %}

diff --git a/templates/includes/pagination.html b/templates/includes/pagination.html
@@ -12,7 +12,8 @@
   {% for number in page_obj.paginator.page_range %}
     <a href="?{% url_replace 'page' number %}" 
       class="pagination__item {% if number == page_obj.number %}pagination__item--current{% endif %}"
-      >
+      {% if number == page_obj.number %}aria-current="page"{% endif %}
+    >
       {{ number }}
     </a>
   {% endfor %}