diff --git a/bedrock/mozorg/templates/mozorg/cms/about/blocks/leadership_block.html b/bedrock/mozorg/templates/mozorg/cms/about/blocks/leadership_block.html index d331acb3922..a455e52a6c0 100644 --- 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/. #} -
+
{{ srcset_image(value.headshot.image, "width-{200,400}", class="photo", sizes="160px", alt=value.headshot.image_alt_text) }}
-

{{ value.name }}

+

{{ value.name }}

@@ -40,4 +40,4 @@

{{ value.name }}

{{ value.biography|richtext }}
{% endif %} -
+ diff --git a/bedrock/mozorg/templates/mozorg/cms/about/leadership.html b/bedrock/mozorg/templates/mozorg/cms/about/leadership.html index c382d22e200..6123e8aaa2e 100644 --- a/bedrock/mozorg/templates/mozorg/cms/about/leadership.html +++ b/bedrock/mozorg/templates/mozorg/cms/about/leadership.html @@ -46,7 +46,7 @@

{{ sec {% for group in section.value.leadership_group %}
{% if group.title %} -

{{ group.title }}

+

{{ group.title }}

{% endif %} -
+
{% endblock %} {% block js %} diff --git a/media/js/mozorg/about-leadership.js b/media/js/mozorg/about-leadership.js index 78b94426e95..d31b4e16b8a 100644 --- a/media/js/mozorg/about-leadership.js +++ b/media/js/mozorg/about-leadership.js @@ -20,16 +20,29 @@ if (typeof window.Mozilla === 'undefined') { for (var i = 0; i < bios.length; i++) { var bio = bios[i]; + + // set aria roles on opening bio link and make focusable. 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); + + // remove superfluous attributes from cloned node when in modal. modalContent.removeAttribute('id'); - modalContent.setAttribute('role', 'article'); + modalContent.removeAttribute('role'); + modalContent.removeAttribute('aria-controls'); + modalContent.removeAttribute('aria-expanded'); + modalContent.removeAttribute('tabindex'); + + // set opening button expanded state to true + 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); @@ -37,6 +50,7 @@ if (typeof window.Mozilla === 'undefined') { }, onDestroy: function () { modalContent.parentNode.removeChild(modalContent); + openingLink.setAttribute('aria-expanded', 'false'); } }); });