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 %}
{% for leader in group.leaders %}
@@ -60,7 +60,7 @@
{{ group.title }}
-
+
{% 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');
}
});
});