Leadership page a11y fixed (Fixes mozilla#15335) (mozilla#15460)

* Leadership page a11y fixed (Fixes mozilla#15335)
craigcook · Nov 18, 2024 · 618d5c2 · 618d5c2
1 parent 3b7942e
commit 618d5c2
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 17 deletions.
diff --git a/bedrock/base/templates/macros-protocol.html b/bedrock/base/templates/macros-protocol.html
@@ -328,8 +328,9 @@
 #}
 {% macro sidemenu_lists(arr, body_id='') -%}
   <nav class="mzp-c-sidemenu">
+
     <section class="mzp-c-sidemenu-summary mzp-js-toggle" aria-controls="sidebar-menu" data-testid="side-menu-toggle">
-      <h3 class="mzp-c-sidemenu-label">{{ ftl('ui-menu') }}</h3>
+      <h2 class="mzp-c-sidemenu-label">{{ ftl('ui-menu') }}</h2>
       <ul>
         <li>{{ arr[0][0][2]|e }}</li>
         {% for menu in arr %}
@@ -344,9 +345,9 @@ <h3 class="mzp-c-sidemenu-label">{{ ftl('ui-menu') }}</h3>
     <section class="mzp-c-sidemenu-main" id="sidebar-menu" data-testid="side-menu-main">
       {% for menu in arr %}
 
-        <h4 class="mzp-c-sidemenu-title {% if menu[0][1] == body_id and body_id != '' %}mzp-is-current{% endif %}">
+        <h2 class="mzp-c-sidemenu-title {% if menu[0][1] == body_id and body_id != '' %}mzp-is-current{% endif %}">
           <a href="{{ menu[0][0]|e }}">{{ menu[0][2]|e }}</a>
-        </h4>
+        </h2>
 
         <ul>
         {% for href, id, caption in menu %}

diff --git a/bedrock/mozorg/templates/mozorg/cms/about/blocks/leadership_block.html b/bedrock/mozorg/templates/mozorg/cms/about/blocks/leadership_block.html
@@ -8,7 +8,7 @@
   <figure class="headshot">
     {{ srcset_image(value.headshot.image, "width-{200,400}", class="photo", sizes="160px", alt=value.headshot.image_alt_text) }}
     <figcaption>
-      <h3 class="fn" itemprop="name">{{ value.name }}</h3>
+      <h4 class="fn" itemprop="name">{{ value.name }}</h4>
     </figcaption>
   </figure>
 

diff --git a/bedrock/mozorg/templates/mozorg/cms/about/leadership.html b/bedrock/mozorg/templates/mozorg/cms/about/leadership.html
@@ -23,15 +23,6 @@
   {{ css_bundle('about-leadership') }}
 {% endblock %}
 
-{% block sub_navigation %}
-  {{ sub_nav(
-    title={
-      'text': page.title,
-      'href': fullpageurl(page)
-    }
-  ) }}
-{% endblock %}
-
 {% block content %}
   <div id="main-content" class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left">
     <aside class="mzp-l-sidebar">
@@ -46,6 +37,7 @@
     </aside>
 
     <main class="mzp-l-main">
+      <h1 class="visually-hidden">{{ page.title }}</h1>
       {% for section in page.leadership_sections %}
         <section class="leadership-section" id="{{ section.value.id }}">
           {% set first_group = section.value.leadership_group[0] %}
@@ -54,7 +46,7 @@ <h2 class="leadership-title{% if first_group.title %} compact{% endif %}">{{ sec
           {% for group in section.value.leadership_group %}
             <section>
               {% if group.title %}
-                <h2 class="group-title">{{ group.title }}</h2>
+                <h3 class="group-title">{{ group.title }}</h3>
               {% endif %}
               <div class="gallery mgmt-corp">
                 {% for leader in group.leaders %}

diff --git a/media/css/mozorg/leadership.scss b/media/css/mozorg/leadership.scss
@@ -23,6 +23,10 @@ $image-path: '/media/protocol/img';
     font-style: normal;
 }
 
+.visually-hidden {
+    @include visually-hidden;
+}
+
 // Navigation
 #page-nav {
     margin: $spacing-md auto;
@@ -82,7 +86,7 @@ $image-path: '/media/protocol/img';
     }
 }
 
-main .leadership-section:first-child .leadership-title:first-child {
+main .leadership-section:first-of-type .leadership-title:first-of-type {
     margin-top: 0;
 }
 

diff --git a/media/js/mozorg/about-leadership.js b/media/js/mozorg/about-leadership.js
@@ -20,14 +20,14 @@ if (typeof window.Mozilla === 'undefined') {
 
     for (var i = 0; i < bios.length; i++) {
         var bio = bios[i];
-        bio.setAttribute('aria-role', 'button');
+        bio.setAttribute('role', 'button');
         bio.setAttribute('tabindex', '0');
 
         bio.addEventListener('click', function (e) {
             e.preventDefault();
             var modalContent = this.cloneNode(true);
             modalContent.removeAttribute('id');
-            modalContent.setAttribute('aria-role', 'article');
+            modalContent.setAttribute('role', 'article');
 
             MzpModal.createModal(e.target, content, {
                 closeText: window.Mozilla.Utils.trans('global-close'),