fix: tup 595 accessibility (#761)

* adding role=button to a-tags (#757) * sub-task/tup-579 Added navbarDropdown id to a tag (#758) * fix: tup 662 nav dropdown id not unique (#762) * fix: tup-662 nav dropdown id * fix: tup-662 nav dropdown id, simpler solution * fix: tup-662 nav dropdown id, follow MDN a11y menu role docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role --------- Co-authored-by: Tomas Gonzalez <[email protected]>
TACC · Dec 13, 2023 · 5cbc532 · 5cbc532
1 parent 508fc5f
commit 5cbc532
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/taccsite_cms/templates/cms_menu.html b/taccsite_cms/templates/cms_menu.html
@@ -15,12 +15,16 @@
       class="nav-link dropdown-toggle"
       data-toggle="dropdown"
       aria-haspopup="true"
-      aria-expanded="false">
+      aria-expanded="false"
+      aria-controls="nav-menu-{{child.id}}"
+      role="button"
+      id="nav-link-{{child.id}}"
+      >
       {{ child.get_menu_title|safe }}
       {% if child.selected %}<span class="sr-only">(current)</span>{% endif %}
       <span class="sr-only">Toggle Dropdown</span>
     </a>
-    <div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
+    <div class="dropdown-menu" role="menu" id="nav-menu-{{child.id}}" aria-labelledby="nav-link-{{child.id}}">
       {# Bootstrap4 does not support submenus, so nor do we (and other users). See https://github.com/twbs/bootstrap/pull/6342. #}
       {% for grandchild in child.children %}
       {% limit_visibility_in_menu grandchild as can_view %}