Fix invalid role on /leadership modal links (fixes #15538)

mozilla · Nov 21, 2024 · 314b64f · 314b64f
1 parent cf680a7
commit 314b64f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/bedrock/mozorg/templates/mozorg/cms/about/blocks/leadership_block.html b/bedrock/mozorg/templates/mozorg/cms/about/blocks/leadership_block.html
@@ -4,11 +4,11 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-<article {% if value.biography %}id="{{ value.id }}"{% endif %} class="vcard{% if value.biography %} has-bio{% endif %}" itemscope itemtype="http://schema.org/Person">
+<article {% if value.biography %}id="{{ value.id }}" {% endif %} class="vcard{% if value.biography %} has-bio{% endif %}" itemscope itemtype="http://schema.org/Person">
   <figure class="headshot">
     {{ srcset_image(value.headshot.image, "width-{200,400}", class="photo", sizes="160px", alt=value.headshot.image_alt_text) }}
     <figcaption>
-      <h4 class="fn" itemprop="name">{{ value.name }}</h4>
+      <h3 class="fn" itemprop="name">{{ value.name }}</h3>
     </figcaption>
   </figure>
 

diff --git a/bedrock/mozorg/templates/mozorg/cms/about/leadership.html b/bedrock/mozorg/templates/mozorg/cms/about/leadership.html
@@ -46,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 %}
-                <h3 class="group-title">{{ group.title }}</h3>
+                <h2 class="group-title">{{ group.title }}</h2>
               {% endif %}
               <div class="gallery mgmt-corp">
                 {% for leader in group.leaders %}
@@ -60,7 +60,7 @@ <h3 class="group-title">{{ group.title }}</h3>
     </main>
   </div>
 
-  <div class="mzp-u-modal-content"></div>
+  <div id="leadership-modal" class="mzp-u-modal-content"></div>
 {% endblock %}
 
 {% block js %}

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