From: colemanw <coleman@civicrm.org>
Date: Mon, 18 Dec 2023 17:03:14 +0000 (-0500)
Subject: SearchKit - add/fix role & aria properties for main tabs
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=1cb1bd5055327b057bbe0f09283dd1a085a5d356;p=civicrm-core.git

SearchKit - add/fix role & aria properties for main tabs
---

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
index e5501d23b8..1e16b9e1d1 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
@@ -92,13 +92,13 @@
 
     <div class="crm-flex-box">
       <nav class="crm-search-admin-main-tabs">
-        <ul class="nav nav-pills nav-stacked" ng-include="'~/crmSearchAdmin/tabs.html'"></ul>
+        <ul class="nav nav-pills nav-stacked" role="tablist" aria-orientation="vertical" ng-include="'~/crmSearchAdmin/tabs.html'"></ul>
       </nav>
       <div class="crm-flex-4">
-        <div ng-if="!$ctrl.selectedDisplay()">
+        <div ng-if="!$ctrl.selectedDisplay()" role="tabpanel">
           <div ng-include="'~/crmSearchAdmin/crmSearch-' + controls.tab + '.html'" class="crm-search-admin-relative"></div>
         </div>
-        <div ng-if="$ctrl.selectedDisplay()">
+        <div ng-if="$ctrl.selectedDisplay()" role="tabpanel">
           <div ng-repeat="display in $ctrl.savedSearch.displays" ng-if="controls.tab === ('display_' + $index)">
             <crm-search-admin-display class="crm-search-admin-relative" display="display" saved-search="$ctrl.savedSearch"></crm-search-admin-display>
           </div>
diff --git a/ext/search_kit/ang/crmSearchAdmin/tabs.html b/ext/search_kit/ang/crmSearchAdmin/tabs.html
index 73fc1ad860..93505c3828 100644
--- a/ext/search_kit/ang/crmSearchAdmin/tabs.html
+++ b/ext/search_kit/ang/crmSearchAdmin/tabs.html
@@ -1,11 +1,11 @@
-<li role="presentation" ng-class="{active: controls.tab === tab.key}" ng-repeat="tab in $ctrl.mainTabs">
+<li role="tab" ng-class="{active: controls.tab === tab.key}" ng-repeat="tab in $ctrl.mainTabs">
   <a href ng-click="selectTab(tab.key)">
     <i class="crm-i {{:: tab.icon }}"></i>
     {{:: tab.title }}
   </a>
 </li>
 <li role="separator" class="disabled"></li>
-<li role="presentation" ng-class="{active: controls.tab === 'group'}" ng-if="$ctrl.savedSearch.groups.length" title="{{ !$ctrl.groupExists ? ts('Group will be deleted.') : '' }}">
+<li role="tab" ng-class="{active: controls.tab === 'group'}" ng-if="$ctrl.savedSearch.groups.length" title="{{ !$ctrl.groupExists ? ts('Group will be deleted.') : '' }}">
   <a href ng-click="selectTab('group')" ng-disabled="!$ctrl.groupExists">
     <i class="crm-i fa-users"></i>
     {{:: ts('Smart Group') }} {{ $ctrl.savedSearch.groups[0].title }}
@@ -14,7 +14,7 @@
     <i class="crm-i fa-{{ $ctrl.groupExists ? 'trash' : 'undo' }}"></i>
   </button>
 </li>
-<li role="presentation" ng-repeat="display in $ctrl.savedSearch.displays" ng-class="{active: controls.tab === ('display_' + $index)}" title="{{ display.trashed ? ts('Display will be deleted.') : '' }}">
+<li role="tab" ng-repeat="display in $ctrl.savedSearch.displays" ng-class="{active: controls.tab === ('display_' + $index)}" title="{{ display.trashed ? ts('Display will be deleted.') : '' }}">
   <a href ng-click="selectTab('display_' + $index)" ng-disabled="display.trashed">
     <i class="crm-i {{ $ctrl.displayTypes[display.type].icon }}"></i>
     {{ display.label || ts('Untitled') }}
@@ -26,7 +26,7 @@
     <i class="crm-i fa-copy"></i>
   </button>
 </li>
-<li role="presentation">
+<li role="tab">
   <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <i class="crm-i fa-plus"></i> {{:: ts('Add...') }} <span class="caret"></span>
   </button>