Skip to content

Commit

Permalink
fix accessibility issues caught by axe
Browse files Browse the repository at this point in the history 
- add `aria-labelledby` and `id` to `nav` elements
- add `role="none"` to the child `li` of the mega menu
  • Loading branch information
@shawnthompson
shawnthompson committed Feb 3, 2025
1 parent 2c2f514 commit 961e2ff
Show file tree
Hide file tree
Showing 6 changed files with 15 additions and 15 deletions.
4 changes: 2 additions & 2 deletions méli-mélo/2023-09-menu/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ <h1>About - Campaign Menu</h1>
<p>Example of a new menu that uses megamenu for md and lg, and GCWeb menu for sm and xs.</p>
</div>
<div class="container">
<nav class="gcweb-menu campaign-menu cm-bg-darker" typeof="SiteNavigationElement" data-megamenu-bg-color="cm-bg-darker" data-megamenu-ajax="ajax/wet-mega-menu.html">
<h2 class="wb-inv">Winterlude Site Menu</h2>
<nav aria-labelledby="siteMenu" class="gcweb-menu campaign-menu cm-bg-darker" typeof="SiteNavigationElement" data-megamenu-bg-color="cm-bg-darker" data-megamenu-ajax="ajax/wet-mega-menu.html">
<h2 id="siteMenu" class="wb-inv">Winterlude Site Menu</h2>
<button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
<ul role="menu" aria-orientation="vertical" data-ajax-replace="ajax/gcweb-menu.html">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.html">Home</a></li>
Expand Down
2 changes: 1 addition & 1 deletion méli-mélo/2023-09-menu/ajax/wet-mega-menu.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="pnl-strt nvbar">
<h2>Winterlude Site Menu</h2>
<h2 id="siteMenu">Winterlude Site Menu</h2>
<ul class="list-inline menu" role="menubar">
<li><a href="index.html" class="item">Home</a></li>
<li><a href="calendar.html" class="item">Calendar</a></li>
Expand Down
4 changes: 2 additions & 2 deletions méli-mélo/2023-09-menu/calendar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ <h1>Calendar with global GCMenu - Campaign Menu</h1>
<p>Example of a new menu that uses megamenu for md and lg, and GCWeb menu for sm and xs.</p>
</div>
<div class="container">
<nav class="gcweb-menu campaign-menu" typeof="SiteNavigationElement" data-megamenu-ajax="ajax/wet-mega-menu.html">
<h2 class="wb-inv">Winterlude Site Menu</h2>
<nav aria-labelledby="siteMenu" class="gcweb-menu campaign-menu" typeof="SiteNavigationElement" data-megamenu-ajax="ajax/wet-mega-menu.html">
<h2 id="siteMenu" class="wb-inv">Winterlude Site Menu</h2>
<button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
<ul role="menu" aria-orientation="vertical" data-ajax-replace="ajax/gcweb-menu.html">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.html">Home</a></li>
Expand Down
12 changes: 6 additions & 6 deletions méli-mélo/2023-09-menu/campaign-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
if (elm) {
$elm = $(elm);

// Check if there is already a gcweb menu.
// Check if there is already a gcweb menu.
// If there are 2 present, the global GCWeb menu is present, hide this custom menu
var gcWebMenus = document.querySelectorAll(".gcweb-menu");
if (gcWebMenus.length > 1) {
Expand All @@ -34,7 +34,7 @@
return;
}

// If a megamenu is already present, abort to avoid duplicate wb-sm IDs
// If a megamenu is already present, abort to avoid duplicate wb-sm IDs
var megamenuExists = document.querySelector("#wb-sm");
if (megamenuExists != undefined || megamenuExists != null) {
console.warn(componentName + " - megamenu already exsits on the page, aborting");
Expand Down Expand Up @@ -63,7 +63,7 @@
// Build list item without a submenu
let href = anchor.getAttribute('href');
let linkText = anchor.textContent;
megamenuHTML += `<li><a href="${href}">${linkText}</a></li>`;
megamenuHTML += `<li role="none"><a href="${href}">${linkText}</a></li>`;
});

// Get GCWeb h2
Expand All @@ -72,17 +72,17 @@
var megamenuAjaxReplace = $elm[0].getAttribute('data-megamenu-ajax');

var megamenuColorClass = "";

if ($elm[0].hasAttribute('data-megamenu-bg-color')) {
megamenuColorClass = $elm[0].getAttribute('data-megamenu-bg-color');
}

// Wrap menu HTML with the megamenu wrapper
// NOTE: Removed role="navigation" (redundant) and typeof="SiteNavigationElement" (not required)
megamenuHTML = `
<nav id="wb-sm" class="campaign-menu wb-menu visible-md visible-lg ${megamenuColorClass}" data-trgt="mb-pnl" data-ajax-replace="${megamenuAjaxReplace}">
<nav aria-labelledby="megaMenu" id="wb-sm" class="campaign-menu wb-menu visible-md visible-lg ${megamenuColorClass}" data-trgt="mb-pnl" data-ajax-replace="${megamenuAjaxReplace}">
<div class="pnl-strt nvbar">
<h2>${gcwebMenuH2.textContent}</h2>
<h2 id="megaMenu">${gcwebMenuH2.textContent}</h2>
<ul role="menubar" class="list-inline menu">
${megamenuHTML}
</ul>
Expand Down
4 changes: 2 additions & 2 deletions méli-mélo/2023-09-menu/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ <h1>Campaign Menu</h1>
</ul>
</div>
<div class="container">
<nav class="gcweb-menu campaign-menu" typeof="SiteNavigationElement" data-megamenu-ajax="ajax/wet-mega-menu.html">
<h2 class="wb-inv">Winterlude Site Menu</h2>
<nav aria-labelledby="siteMenu" class="gcweb-menu campaign-menu" typeof="SiteNavigationElement" data-megamenu-ajax="ajax/wet-mega-menu.html">
<h2 id="siteMenu" class="wb-inv">Winterlude Site Menu</h2>
<button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
<ul role="menu" aria-orientation="vertical" data-ajax-replace="ajax/gcweb-menu.html">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.html">Home</a></li>
Expand Down
4 changes: 2 additions & 2 deletions méli-mélo/2023-09-menu/media.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ <h1>Media - Campaign Menu</h1>
<p>Example of a new menu that uses megamenu for md and lg, and GCWeb menu for sm and xs.</p>
</div>
<div class="container">
<nav class="gcweb-menu campaign-menu" typeof="SiteNavigationElement" data-megamenu-ajax="ajax/wet-mega-menu.html">
<h2 class="wb-inv">Winterlude Site Menu</h2>
<nav aria-labelledby="siteMenu" class="gcweb-menu campaign-menu" typeof="SiteNavigationElement" data-megamenu-ajax="ajax/wet-mega-menu.html">
<h2 id="siteMenu" class="wb-inv">Winterlude Site Menu</h2>
<button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
<ul role="menu" aria-orientation="vertical" data-ajax-replace="ajax/gcweb-menu.html">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.html">Home</a></li>
Expand Down

0 comments on commit 961e2ff

Please sign in to comment.