Some accessibility improvements

MTG · Oct 31, 2023 · 6625681 · 6625681
1 parent 50db9e3
commit 6625681
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 18 deletions.
diff --git a/freesound/static/bw-frontend/src/components/collapsableBlock.js b/freesound/static/bw-frontend/src/components/collapsableBlock.js
@@ -16,9 +16,8 @@ const toggleCollapse = (toggleElement) => {
   collapsableContainer.classList.toggle(closeClass);
   const showText = toggleElement.dataset.showText;
   const hideText = toggleElement.dataset.hideText;
-  toggleElement.textContent = collapsableContainer.classList.contains(closeClass)
-    ? showText
-    : hideText;
+  toggleElement.ariaExpanded = collapsableContainer.classList.contains(closeClass) ? "false" : "true";
+  toggleElement.textContent = collapsableContainer.classList.contains(closeClass) ? showText: hideText;
 }
 
 const handleCollapsable = (e) => {
@@ -36,6 +35,9 @@ collapsableToggles.forEach(element => {
       return; // continue to next toggle element as this will not implement collapsable behaviour
     }
   }
+
+  // Set aria expanded attribute with is true by default
+  element.ariaExpanded = "true";
 
   if (element.dataset.hideOnLoad !== undefined){
     toggleCollapse(element);

diff --git a/freesound/static/bw-frontend/src/components/dropdown.js b/freesound/static/bw-frontend/src/components/dropdown.js
@@ -6,7 +6,7 @@ const closeOnClickAway = () => {
   const { toggle, dropdownOptions } = lastOpenedDropdown;
   if (toggle && dropdownOptions) {
     dropdownOptions.classList.remove('show');
-    toggle.setAttribute('aria-expanded', 'false');
+    toggle.ariaExpanded = 'false';
     lastOpenedDropdown.toggle = undefined;
     lastOpenedDropdown.dropdownOptions = undefined;
   }
@@ -29,7 +29,7 @@ const toggleExpandDropdown = toggle => {
   const dropdownOptions = dropdownContainer.getElementsByClassName('dropdown-menu')[0];
   if (dropdownOptions && !isDropdownExpanded) {
     dropdownOptions.classList.add('show');
-    toggle.setAttribute('aria-expanded', 'true');
+    toggle.ariaExpanded = 'true';
     lastOpenedDropdown.toggle = toggle;
     lastOpenedDropdown.dropdownOptions = dropdownOptions;
     setTimeout(() => {
@@ -40,5 +40,13 @@ const toggleExpandDropdown = toggle => {
 };
 
 dropdownToggles.forEach(toggle => {
+  toggle.ariaExpanded = 'false';
+  toggle.ariaHasPopup = 'menu';
+  const dropdownContainer = toggle.closest('.dropdown');
+  const dropdownOptions = dropdownContainer.getElementsByClassName('dropdown-menu')[0];
+  dropdownOptions.setAttribute('role', 'menu');
+  dropdownOptions.getElementsByClassName('dropdown-item').forEach(item => {
+    item.setAttribute('role', 'menuitem');
+  });
   toggle.addEventListener('click', () => toggleExpandDropdown(toggle));
 });
diff --git a/templates_bw/accounts/account.html b/templates_bw/accounts/account.html
@@ -40,8 +40,8 @@ <h1>{{ user.username }}</h1>
                 {% endif %}
                 {% if perms.tickets.can_moderate or request.user.is_staff %}
                     <div class="dropdown display-inline-block">
-                        <a class="no-hover dropdown-toggle" id="mod-actions-menu" aria-haspopup="true"
-                           aria-expanded="false" data-toggle="dropdown"><button class="btn-inverse h-spacing-left-2 btn-profile-adapt">Mod actions</button></a>
+                        <a class="no-hover dropdown-toggle" id="mod-actions-menu"
+                           data-toggle="dropdown"><button class="btn-inverse h-spacing-left-2 btn-profile-adapt">Mod actions</button></a>
                         <ul class="dropdown-menu" aria-labelledby="mod-actions-menu">
                             {% if user.profile.is_whitelisted %}
                                 <li class="bw-nav__action dropdown-item text-light-grey">

diff --git a/templates_bw/messages/messages_navbar.html b/templates_bw/messages/messages_navbar.html
@@ -11,8 +11,8 @@
             </div>
         </label>
         <div class="dropdown padding-left-1 display-none actions-menu">
-            <a class="no-hover dropdown-toggle" aria-haspopup="true"
-               aria-expanded="false" data-toggle="dropdown"><button class="btn-inverse h-spacing-left-2 btn-profile-adapt">Actions...</button></a>
+            <a class="no-hover dropdown-toggle"
+               data-toggle="dropdown"><button class="btn-inverse h-spacing-left-2 btn-profile-adapt">Actions...</button></a>
             <ul class="dropdown-menu dropdown-menu-left">
                 {% if not hide_toggle_read_unread %}
                 <li class="bw-nav__action dropdown-item" data-action-value="r">

diff --git a/templates_bw/molecules/modal_base.html b/templates_bw/molecules/modal_base.html
@@ -2,7 +2,7 @@
 
 <div class="modal {% block extra-class %}{% endblock %}" id="{% block id %}{% endblock %}" tabindex="-1" role="dialog" aria-label="{% block aria-label %}{% endblock %}" aria-hidden="true">
     <div class="modal-wrapper">
-        <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
                     <span class="close" data-dismiss="modal" aria-label="Close">

diff --git a/templates_bw/molecules/navbar_common_actions.html b/templates_bw/molecules/navbar_common_actions.html
@@ -11,8 +11,8 @@
     <a class="bw-link--grey font-weight-bold" href="{% url 'geotags' %}">Map</a>
 </li>
 <li class="bw-nav__action dropdown">
-    <a class="bw-link--grey bw-nav__menu dropdown-toggle no-hover bw-icon-ellipsis" id="three-dots-menu" aria-label="Menu" aria-haspopup="true"
-       aria-expanded="false" data-toggle="dropdown"></a>
+    <a class="bw-link--grey bw-nav__menu dropdown-toggle no-hover bw-icon-ellipsis" id="three-dots-menu" aria-label="Menu"
+       data-toggle="dropdown" tabindex="0"></a>
     <ul class="dropdown-menu" aria-labelledby="three-dots-menu">
         <li class="bw-nav__action dropdown-item d-lg-none">
             <a class="bw-link--black" href="{% url 'sounds' %}">Sounds</a>

diff --git a/templates_bw/molecules/navbar_user_section.html b/templates_bw/molecules/navbar_user_section.html
@@ -5,7 +5,7 @@
     {% cache 3600 bw_user_header request.user.id %}
         <li class="bw-nav__action dropdown">
             <a class="bw-link--grey avatar bw-nav__menu--avatar-with{% if not num_messages %}out{% else %}-message{% endif %}-notifications dropdown-toggle no-hover cursor-pointer" aria-label="User menu" id="avatar-menu"
-               aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
+               data-toggle="dropdown" tabindex="0">
                 {% bw_user_avatar request.user.profile.locations.avatar.S.url request.user.username 32 %}
             </a>
             <ul class="dropdown-menu" aria-labelledby="avatar-menu">
@@ -46,17 +46,17 @@
             </ul>
         </li>
         <li class="bw-nav__action d-none d-lg-flex">
-            <a class="btn-secondary no-hover" href="{% url 'donate' %}">Donate</a>
+            <a class="btn-secondary no-hover" href="{% url 'donate' %}" role="menuitem">Donate</a>
         </li>
         <li class="bw-nav__action d-none d-lg-flex">
-            <a class="btn-primary no-hover" href="{% url 'accounts-upload' %}">Upload sounds</a>
+            <a class="btn-primary no-hover" href="{% url 'accounts-upload' %}" role="menuitem">Upload sounds</a>
         </li>
     {% endcache %}
 {% else %}
     <li class="bw-nav__action">
-        <button class="btn-secondary" data-toggle="login-modal" data-target="#loginModal">Log in</button>
+        <button class="btn-secondary" data-toggle="login-modal" data-target="#loginModal" role="menuitem">Log in</button>
     </li>
     <li class="bw-nav__action d-none d-lg-flex">
-        <button class="btn-primary" data-toggle="registration-modal" data-target="#registerModal">Join</button>
+        <button class="btn-primary" data-toggle="registration-modal" data-target="#registerModal" role="menuitem">Join</button>
     </li>
 {% endif %}
diff --git a/templates_bw/rest_framework/api.html b/templates_bw/rest_framework/api.html
@@ -26,7 +26,7 @@
     {% if user.is_authenticated %}
         <ul class="nav navbar-nav pull-right">
              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                     {{user.username}}
                     <b class="caret"></b>
                 </a>