Merge pull request #33843 from dimagi/ad/web-apps-breadcrumbs-improve…

…ments Web apps breadcrumbs improvements
dimagi · Dec 14, 2023 · c8071ef · c8071ef
2 parents f653e35 + 7df8f81
commit c8071ef
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/utils.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/utils.js
@@ -79,6 +79,7 @@ hqDefine("cloudcare/js/formplayer/menus/utils", function () {
         });
 
         detailCollection = new Backbone.Collection(breadcrumbModels);
+        detailCollection.last().set('ariaCurrentPage', true);
         var breadcrumbView = views.BreadcrumbListView({
             collection: detailCollection,
         });

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
@@ -1182,11 +1182,15 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
         template: _.template($("#breadcrumb-item-template").html() || ""),
         className: "breadcrumb-text",
         attributes: function () {
-            return {
+            let attributes = {
                 "role": "link",
                 "tabindex": "0",
                 "style": this.buildMaxWidth(),
             };
+            if (this.options.model.get('ariaCurrentPage')) {
+                attributes['aria-current'] = 'page';
+            }
+            return attributes;
         },
         events: {
             "click": "crumbClick",

diff --git a/corehq/apps/cloudcare/templates/formplayer/menu_list.html b/corehq/apps/cloudcare/templates/formplayer/menu_list.html
@@ -120,13 +120,13 @@ <h1 class="page-title"><%- title %></h1>
 </script>
 
 <script type="text/template" id="breadcrumb-list-template">
-  <div class="breadcrumb-nav">
+  <nav class="breadcrumb-nav" aria-label="Breadcrumb">
     <ol class="breadcrumb">
-      <li class="js-home breadcrumb-text" role="link" tabindex="0" aria-label="{% trans_html_attr 'Home' %}"><i class="fa fa-home"></i></li>
+      <li class="js-home breadcrumb-text" role="link" tabindex="0">{% trans 'Home' %}</li>
     </ol>
     <div class="pull-right dropdown dropdown-menu-right" id="breadcrumb__menu-dropdown">
     </div>
-  </div>
+  </nav>
 </script>
 
 <script type="text/template" id="menu-dropdown-template">

diff --git a/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/breadcrumbs.less b/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/breadcrumbs.less
@@ -6,6 +6,9 @@
   padding-bottom: 1rem;
   margin-top: -1px;
   .breadcrumb-text {
+    &.js-home {
+      margin-right: -5px;
+    }
     &:before {
       padding: 0 6px 0 12px;
       color: #ffffff;