Merge pull request #35330 from dimagi/ad/module-badge-accessibility

Improve module badges accessibility
dimagi · Nov 12, 2024 · f87f94e · f87f94e
2 parents 5c7edfd + fccbbad
commit f87f94e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
@@ -56,10 +56,11 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
         },
         attributes: function () {
             const displayText = this.options.model.attributes.displayText;
+            const badgeText = this.options.model.attributes.badgeText;
             return {
                 "role": "link",
                 "tabindex": "0",
-                "aria-label": displayText,
+                "aria-label": displayText + (badgeText ? "; " + badgeText : ""),
             };
         },
         events: {
@@ -450,7 +451,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
                 tileContent.addClass("collapsed-tile-content");
                 const offset = getScrollTopOffset(this.smallScreenEnabled);
                 this.scrollContainer.animate({
-                    scrollTop: this.scrollContainer.scrollTop() + $(e.currentTarget).parent().offset().top - offset
+                    scrollTop: this.scrollContainer.scrollTop() + $(e.currentTarget).parent().offset().top - offset,
                 });
             }
 
@@ -1581,7 +1582,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
                 $('#persistent-menu-arrow-toggle').attr('data-bs-toggle', collapse);
             }
         },
-        initialize: function (options) {
+        initialize: function () {
             self.smallScreenListener = cloudcareUtils.smallScreenListener(smallScreenEnabled => {
                 this.handleSmallScreenChange(smallScreenEnabled);
             });

diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/badge.html b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/badge.html
@@ -6,6 +6,6 @@
   and is different from x === undefined.
   */ %>
   <% if (typeof badgeText !== 'undefined' && badgeText) { %>
-  <span class="badge bg-secondary rounded-pill"><%- badgeText %></span>
+  <span id="module-badge" class="badge bg-dark rounded-pill"><%- badgeText %></span>
   <% } %>
 </script>
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/content.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/content.scss
@@ -70,3 +70,7 @@ body {
     border: 1px solid #ddd;
   }
 }
+
+#module-badge {
+  font-size: 16px;
+}