Merge pull request #33914 from dimagi/em/clickable-icons-accessibility

Basic Accessibility for Clickable Icons
dimagi · Jan 16, 2024 · ad5b749 · ad5b749
2 parents 91d5f1c + 2b27a33
commit ad5b749
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js
@@ -282,6 +282,7 @@ hqDefine("cloudcare/js/formplayer/menus/controller", function () {
         $("#persistent-cell-grid-style").html(caseTileStyles.cellGridStyle).data("css-polyfilled", false);
         return views.PersistentCaseTileView({
             model: detailModel,
+            headers: detailObject.headers,
             styles: detailObject.styles,
             tiles: detailObject.tiles,
             maxWidth: detailObject.maxWidth,

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
@@ -243,6 +243,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
 
         events: {
             "click @ui.clickIcon": "iconClick",
+            "keydown @ui.clickIcon": "iconKeyAction",
             "click": "rowClick",
             "keydown": "rowKeyAction",
             'click @ui.selectRow': 'selectRowAction',
@@ -295,6 +296,12 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
             this.clickableIconRequest(e, endpointId, caseId, endpointArg, isBackground);
         },
 
+        iconKeyAction: function (e) {
+            if (e.keyCode === 13) {
+                this.iconClick(e);
+            }
+        },
+
         getFieldIndexFromEvent: function (e) {
             return $(e.currentTarget).parent().parent().children('.module-case-list-column').index($(e.currentTarget).parent());
         },
@@ -412,6 +419,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
             return {
                 data: this.options.model.get('data'),
                 styles: this.options.styles,
+                headers: this.options.headers,
                 isMultiSelect: this.options.isMultiSelect,
                 renderMarkdown: markdown.render,
                 resolveUri: function (uri) {
@@ -585,6 +593,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
         childViewOptions: function () {
             return {
                 styles: this.options.styles,
+                headers: this.options.headers,
                 endpointActions: this.options.endpointActions,
             };
         },

diff --git a/corehq/apps/cloudcare/templates/formplayer/case_list.html b/corehq/apps/cloudcare/templates/formplayer/case_list.html
@@ -145,7 +145,7 @@ <h1  aria-label="<%- title %>" tabindex="0" class="page-title"><%- title %></h1>
         <td class="module-case-list-column"><img class="module-icon" src="<%- resolveUri(datum) %>"/></td>
       <% } else if (styles[index].displayFormat === 'ClickableIcon') { %>
         <td class="module-case-list-column">
-          <img class="module-icon clickable-icon" src="<%- resolveUri(datum) %>"/>
+          <img alt="<%- headers[index] %>" class="module-icon clickable-icon" role="button" src="<%- resolveUri(datum) %>" tabindex="0"/>
           <i class="fa fa-spin fa-spinner" style="display:none"></i>
         </td>
       <% } else if (styles[index].displayFormat === 'Markdown') { %>
@@ -175,7 +175,7 @@ <h1  aria-label="<%- title %>" tabindex="0" class="page-title"><%- title %></h1>
       <% } %>
       <% } else if (styles[index].displayFormat === 'ClickableIcon') {
       if(resolveUri(datum)) { %>
-        <img class="module-icon clickable-icon" src="<%- resolveUri(datum) %>"/>
+        <img alt="<%- headers[index] %>" class="module-icon clickable-icon" role="button" src="<%- resolveUri(datum) %>" tabindex="0"/>
         <i class="fa fa-spin fa-spinner" style="display:none"></i>
       <% } %>
       <% } else if(styles[index].widthHint === 0) { %>
@@ -201,7 +201,7 @@ <h1  aria-label="<%- title %>" tabindex="0" class="page-title"><%- title %></h1>
         <div class="<%- prefix %>-grid-style-<%- index %> box" >
           <% if (styles[index].displayFormat === 'ClickableIcon') {
           if(resolveUri(datum)) { %>
-            <img class="module-icon clickable-icon" style="max-width:100%; max-height:100%;" src="<%- resolveUri(datum) %>"/>
+            <img alt="<%- headers[index] %>" class="module-icon clickable-icon" role="button" style="max-width:100%; max-height:100%;" src="<%- resolveUri(datum) %>" tabindex="0"/>
             <i class="fa fa-spin fa-spinner" style="display:none"></i>
           <% } %>
           <% } else if (styles[index].displayFormat === 'Image') {
@@ -229,7 +229,7 @@ <h1  aria-label="<%- title %>" tabindex="0" class="page-title"><%- title %></h1>
                 <% } %>
               <% } else if (styles[index].displayFormat === 'ClickableIcon') {
                 if(resolveUri(datum)) { %>
-                  <img class="module-icon clickable-icon" style="max-width:100%; max-height:100%;" src="<%- resolveUri(datum) %>"/>
+                  <img alt="<%- headers[index] %>" class="module-icon clickable-icon" role="button" style="max-width:100%; max-height:100%;" src="<%- resolveUri(datum) %>" tabindex="0"/>
                   <i class="fa fa-spin fa-spinner" style="display:none"></i>
                 <% } %>
               <% } else { %>