dev/core#5041 - Add role + aria-hidden to FontAwesome icons

colemanw · colemanw · commit 8145bfa123df · 2025-09-17T21:37:19.000-04:00
Improves accessibility for assistive technology. See civicrm/civicrm-core#33588
diff --git a/ang/actions/APICall.html b/ang/actions/APICall.html
@@ -7,7 +7,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/APIv4Call.html b/ang/actions/APIv4Call.html
@@ -17,7 +17,7 @@
         </span>
 
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/CSVExport.html b/ang/actions/CSVExport.html
@@ -7,7 +7,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/CallTask.html b/ang/actions/CallTask.html
@@ -7,7 +7,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/CreateActivity.html b/ang/actions/CreateActivity.html
@@ -7,7 +7,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/ErrorHandler.html b/ang/actions/ErrorHandler.html
@@ -7,7 +7,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/PostSQL.html b/ang/actions/PostSQL.html
@@ -7,7 +7,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/ReturnValue.html b/ang/actions/ReturnValue.html
@@ -7,7 +7,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/RunPHP.html b/ang/actions/RunPHP.html
@@ -7,7 +7,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/RunSQL.html b/ang/actions/RunSQL.html
@@ -7,7 +7,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/SegmentationAssign.html b/ang/actions/SegmentationAssign.html
@@ -7,7 +7,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/SegmentationExport.html b/ang/actions/SegmentationExport.html
@@ -8,7 +8,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/SuccessHandler.html b/ang/actions/SuccessHandler.html
@@ -7,7 +7,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/SyncGroup.html b/ang/actions/SyncGroup.html
@@ -7,7 +7,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/actions/SyncTag.html b/ang/actions/SyncTag.html
@@ -7,7 +7,7 @@
         </label>
         <span ng-if="model['action_title']" class="sql-task-action-title">{{model['action_title']}}</span>
         <label class="header-delete-btn" ng-click="removeItemFromArray(index)">
-            <i class="crm-i fa-trash header-delete"></i>
+            <i class="crm-i fa-trash header-delete" role="img" aria-hidden="true"></i>
             {{ts('Delete')}}
         </label>
     </div>
diff --git a/ang/sqlTaskConfigurator.js b/ang/sqlTaskConfigurator.js
@@ -729,12 +729,12 @@
 
             const clearBtn = $(document.createElement("label"))
               .addClass("api-url-controls")
-              .append(`<i class="crm-i fa-trash"></i> ${$scope.ts("Clear")}`)
+              .append(`<i class="crm-i fa-trash" role="img" aria-hidden="true"></i> ${$scope.ts("Clear")}`)
               .on("click", () => setApiUrl(""));
 
             const updateBtn = $(document.createElement("label"))
               .addClass("api-url-controls")
-              .append(`<i class="crm-i fa-link"></i> ${$scope.ts("Generate APIv4 Explorer URL")}`)
+              .append(`<i class="crm-i fa-link" role="img" aria-hidden="true"></i> ${$scope.ts("Generate APIv4 Explorer URL")}`)
               .on("click", () => {
                 setApiUrl(serializeApiCall());
 
diff --git a/ang/sqlTaskConfigurator/actionTemplateForm.html b/ang/sqlTaskConfigurator/actionTemplateForm.html
@@ -18,16 +18,16 @@
         <div class="content">
             <a ng-disabled="!actionTemplate.id" ng-click="updateActionTemplate(actionTemplate)"
                href="javascript:;" class="button">
-                <i class="crm-i fa-save"></i>
+                <i class="crm-i fa-save" role="img" aria-hidden="true"></i>
                 {{ts('Update')}}
             </a>
             <a ng-click="createActionTemplate(actionTemplate)" href="javascript:;" class="button">
-                <i class="crm-i fa-clone"></i>
+                <i class="crm-i fa-clone" role="img" aria-hidden="true"></i>
                 {{ts('Save as New Template')}}
             </a>
             <a ng-disabled="!actionTemplate.id" ng-click="deleteActionTemplate(actionTemplate)"
                href="javascript:;" class="button">
-                <i class="crm-i fa-trash-o"></i>
+                <i class="crm-i fa-trash-o" role="img" aria-hidden="true"></i>
                 {{ts('Delete')}}
             </a>
         </div>
diff --git a/ang/sqlTaskConfigurator/actionTemplateSelect.html b/ang/sqlTaskConfigurator/actionTemplateSelect.html
@@ -8,7 +8,7 @@
             <option value="" selected="selected" disabled>- Load Template -</option>
         </select>
         <label class="header-delete-btn" ng-click="toggleShowingActionTemplateForm($event)">
-            <i class="crm-i fa-edit"></i>
+            <i class="crm-i fa-edit" role="img" aria-hidden="true"></i>
         </label>
     </label>
 </div>
diff --git a/ang/sqlTaskConfigurator/sqlTaskConfigurator.html b/ang/sqlTaskConfigurator/sqlTaskConfigurator.html
@@ -396,7 +396,7 @@ <h3>{{ts('Actions')}}:</h3>
                                 </option>
                             </select>
                             <a ng-click='addAction(selectedAction)' href="javascript:;" class="button" id="add-action-btn">
-                                <i class="crm-i fa-check"></i>
+                                <i class="crm-i fa-check" role="img" aria-hidden="true"></i>
                                 Add
                             </a>
                         </div>
diff --git a/ang/sqlTaskManager/sqlTaskManager.html b/ang/sqlTaskManager/sqlTaskManager.html
@@ -14,7 +14,7 @@ <h1 crm-page-title>{{ts('SQL Task Manager')}}</h1>
         <div class="sql-task-manager-dashboard__item">
             <div class="sql-task-manager-dashboard__item-tile">
                 <div class="sql-task-manager-dashboard__ico">
-                    <i class="crm-i fa-plus-circle"></i>
+                    <i class="crm-i fa-plus-circle" role="img" aria-hidden="true"></i>
                 </div>
                 <div class="sql-task-manager-dashboard__title-text">Add a new task</div>
             </div>
@@ -37,7 +37,7 @@ <h1 crm-page-title>{{ts('SQL Task Manager')}}</h1>
 
                             <button class="sql-task-manager-dashboard__create-task-btn crm-button" ng-click="addNewTask()" ng-disabled="selectTemplateModel.templateId === undefined">
                                 <div class="sql-task-manager-dashboard__ico">
-                                    <i class="crm-i fa-plus"></i>
+                                    <i class="crm-i fa-plus" role="img" aria-hidden="true"></i>
                                 </div>
                                 <span>{{ts('Add')}}</span>
                             </button>
@@ -47,7 +47,7 @@ <h1 crm-page-title>{{ts('SQL Task Manager')}}</h1>
                             </select2>
 
                             <a class="sql-task-manager-dashboard__ico" target="_blank" href="{{url('civicrm/sqltasks/templates');}}">
-                                <i class="crm-i fa-wrench"></i>
+                                <i class="crm-i fa-wrench" role="img" aria-hidden="true"></i>
                             </a>
                         </div>
 
@@ -59,7 +59,7 @@ <h1 crm-page-title>{{ts('SQL Task Manager')}}</h1>
         <div class="sql-task-manager-dashboard__item sql-task-manager-dashboard__item-info">
             <div class="sql-task-manager-dashboard__item-tile">
                 <div class="sql-task-manager-dashboard__ico">
-                    <i class="crm-i fa-info-circle"></i>
+                    <i class="crm-i fa-info-circle" role="img" aria-hidden="true"></i>
                 </div>
                 <div class="sql-task-manager-dashboard__title-text">Info</div>
             </div>
@@ -69,7 +69,7 @@ <h1 crm-page-title>{{ts('SQL Task Manager')}}</h1>
                      target="_blank"
                      title="{{ts('Show task execution logs', {'domain' : 'de.systopia.sqltasks'})}}">
                     <div class="sql-task-manager-dashboard__ico">
-                      <i class="crm-i fa-bars"></i>
+                      <i class="crm-i fa-bars" role="img" aria-hidden="true"></i>
                     </div>
                     {{ts('Show task execution logs', {'domain' : 'de.systopia.sqltasks'})}}
                   </a>
@@ -92,7 +92,7 @@ <h1 crm-page-title>{{ts('SQL Task Manager')}}</h1>
         <div class="sql-task-info-panel">
             <div class="sql-task-info-display-counter">
                 <div class="sql-task-manager-dashboard__ico">
-                    <i class="crm-i fa-bars"></i>
+                    <i class="crm-i fa-bars" role="img" aria-hidden="true"></i>
                 </div>
                 <div>{{ts('Displaying %1 of %2 tasks.', { '1' : displayTasks.length, '2' : tasks.length})}}</div>
             </div>
diff --git a/templates/CRM/CivirulesActions/Form/Settings.tpl b/templates/CRM/CivirulesActions/Form/Settings.tpl
@@ -1,6 +1,6 @@
 <div class="crm-block crm-form-block crm-civirule_actions_form_settings">
     <div class="messages status no-popup">
-        <i class="crm-i fa-info-circle"></i>
+        <i class="crm-i fa-info-circle" role="img" aria-hidden="true"></i>
         {$message}
     </div>
 </div>
diff --git a/templates/CRM/Sqltasks/Page/GlobalTokenManager.tpl b/templates/CRM/Sqltasks/Page/GlobalTokenManager.tpl
@@ -45,7 +45,7 @@
             <td>
               <div>
                 <a class="button global-token__button" id="globalTokenCreateButton" href="javascript:;">
-                  <span><i class="crm-i fa-plus-circle"></i><span>{ts}Create new global token{/ts}</span></span>
+                  <span><i class="crm-i fa-plus-circle" role="img" aria-hidden="true"></i><span>{ts}Create new global token{/ts}</span></span>
                 </a>
               </div>
             </td>
@@ -80,18 +80,18 @@
       <td>
         <div class="global-token__edit-mode">
           <a class="button global-token__button global-token__update-token-data-button" href="javascript:;">
-            <span><i class="crm-i fa-check"></i><span>{ts}Update{/ts}</span></span>
+            <span><i class="crm-i fa-check" role="img" aria-hidden="true"></i><span>{ts}Update{/ts}</span></span>
           </a>
           <a class="button global-token__button global-token__cancel-editing-token-data-button" href="javascript:;">
-            <span><i class="crm-i fa-close"></i><span>{ts}Cancel{/ts}</span></span>
+            <span><i class="crm-i fa-close" role="img" aria-hidden="true"></i><span>{ts}Cancel{/ts}</span></span>
           </a>
         </div>
         <div class="global-token__view-mode">
           <a class="button global-token__button global-token__edit-token-data-button" href="javascript:;">
-            <span><i class="crm-i fa-pencil"></i><span>{ts}Edit{/ts}</span></span>
+            <span><i class="crm-i fa-pencil" role="img" aria-hidden="true"></i><span>{ts}Edit{/ts}</span></span>
           </a>
           <a class="button global-token__button global-token__delete-token-button" href="javascript:;">
-            <span><i class="crm-i fa-trash"></i><span>{ts}Delete{/ts}</span></span>
+            <span><i class="crm-i fa-trash" role="img" aria-hidden="true"></i><span>{ts}Delete{/ts}</span></span>
           </a>
         </div>
       </td>
diff --git a/templates/CRM/Sqltasks/Page/Templates.tpl b/templates/CRM/Sqltasks/Page/Templates.tpl
@@ -27,7 +27,7 @@
                 >
                     <td>
                         {if $defaultTemplateId == $template.id}
-                            <i class="crm-i fa-check-circle"></i>
+                            <i class="crm-i fa-check-circle" role="img" aria-hidden="true"></i>
                         {/if}
                     </td>
 
@@ -43,7 +43,7 @@
                                 class="crm-button download sql-task__button"
                                 data-template-id="{$template.id}"
                             >
-                                <i class="crm-i fa-download"></i>
+                                <i class="crm-i fa-download" role="img" aria-hidden="true"></i>
                                 <span>{ts}Download{/ts}</span>
                             </button>
 
@@ -52,12 +52,12 @@
                                 data-template-id="{$template.id}"
                                 {if $defaultTemplateId == $template.id}disabled{/if}
                             >
-                                <i class="crm-i fa-check-circle"></i>
+                                <i class="crm-i fa-check-circle" role="img" aria-hidden="true"></i>
                                 <span>{ts}Set as default{/ts}</span>
                             </button>
 
                             <button class="crm-button delete sql-task__button" data-template-id="{$template.id}">
-                                <i class="crm-i fa-trash"></i>
+                                <i class="crm-i fa-trash" role="img" aria-hidden="true"></i>
                                 <span>{ts}Delete{/ts}</span>
                             </button>
                         </div>
@@ -70,7 +70,7 @@
     <div class="crm-form-block">
         <div class="sql-task__button-wrap">
             <button class="sql-task__button crm-button" id="open-form">
-                <i class="crm-i fa-plus"></i>
+                <i class="crm-i fa-plus" role="img" aria-hidden="true"></i>
                 <span>{ts}New Template{/ts}</span>
             </button>
 
