From 6130065eac62e923891f09d94df8d2d5197e1dab Mon Sep 17 00:00:00 2001
From: Fabio Guachalla <fabio.guachalla@processmaker.com>
Date: Thu, 14 Apr 2022 12:50:58 -0400
Subject: [PATCH] ADA

ada

ada2

Filters

Corrections labels

Document
---
 .../js/components/home/caseDetail/CaseComments.vue   | 10 +++++++---
 .../js/components/home/caseDetail/CaseHistory.vue    |  1 +
 .../js/components/home/caseDetail/ChangeLog.vue      |  1 +
 .../components/home/caseDetail/MoreInformation.vue   |  1 +
 .../js/components/home/caseDetail/ProcessMap.vue     |  1 +
 .../js/components/menu/CustomSidebarMenuItem.vue     |  2 +-
 .../assets/js/components/search/AdvancedFilter.vue   |  6 +++++-
 .../assets/js/components/search/CasesFilter.vue      |  4 ++--
 .../assets/js/components/search/CustomFilter.vue     |  4 ++--
 .../assets/js/components/search/MyCasesFilter.vue    |  3 +--
 resources/assets/js/components/tabs/Tabs.vue         |  2 +-
 resources/assets/js/components/utils/BreadCrumb.vue  |  4 ++--
 resources/assets/js/components/utils/ellipsis.vue    |  1 +
 .../js/components/vuetable/SettingsPopover.vue       | 12 +++---------
 resources/assets/js/home/BatchRouting.vue            |  1 +
 resources/assets/js/home/Home.vue                    |  1 +
 resources/assets/js/home/LegacyFrame.vue             |  1 +
 resources/assets/js/home/MyDocuments.vue             |  1 +
 .../assets/js/home/TaskMetrics/ProcessPopover.vue    |  7 ++++---
 .../assets/js/home/TaskMetrics/VueChartLvOne.vue     |  6 +++---
 .../assets/js/home/TaskMetrics/VueChartLvThree.vue   |  2 +-
 .../assets/js/home/TaskMetrics/VueChartLvTwo.vue     |  2 +-
 .../assets/js/home/TaskMetrics/VueChartLvZero.vue    |  2 +-
 resources/assets/js/home/TaskReassignments.vue       |  1 +
 resources/assets/js/home/XCase.vue                   |  1 +
 resources/assets/js/home/modal/ModalCancelCase.vue   |  5 +++--
 resources/assets/js/home/modal/ModalPauseCase.vue    |  6 ++++--
 resources/assets/js/home/modal/ModalReassignCase.vue |  4 ++--
 28 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/resources/assets/js/components/home/caseDetail/CaseComments.vue b/resources/assets/js/components/home/caseDetail/CaseComments.vue
index d934c4e82..afbff7d53 100644
--- a/resources/assets/js/components/home/caseDetail/CaseComments.vue
+++ b/resources/assets/js/components/home/caseDetail/CaseComments.vue
@@ -2,8 +2,8 @@
   <div class="container py-2">
     <div class="row"></div>
     <div class="comments col-md-12" id="comments">
-      <p>
-        <b>{{ data.title }}</b>
+      <p class="commentTitle">
+        {{ data.title }}
       </p>
       <div v-for="item in data.items" :key="item.date">
         <case-comment
@@ -45,6 +45,7 @@
                 ref="comment"
                 cols="80"
                 rows="5"
+                aria-label="comments"
               ></textarea>
             </div>
           </div>
@@ -52,7 +53,7 @@
       </div>
       <div class="comment mb-2 row float-right">
         <div class="form-check v-check-comment">
-          <input type="checkbox" class="form-check-input" ref="send" />
+          <input id="sendEmail" type="checkbox" class="form-check-input" ref="send" />
           <label class="form-check-label" for="sendEmail">
             {{ $t("ID_SEND_EMAIL_CASE_PARTICIPANTS") }}</label
           >
@@ -216,4 +217,7 @@ export default {
   font-size: 32px;
   color: antiquewhite;
 }
+.commentTitle {
+  font-weight: bolder;
+}
 </style>
\ No newline at end of file
diff --git a/resources/assets/js/components/home/caseDetail/CaseHistory.vue b/resources/assets/js/components/home/caseDetail/CaseHistory.vue
index 5ed45a4a8..27ce8b258 100644
--- a/resources/assets/js/components/home/caseDetail/CaseHistory.vue
+++ b/resources/assets/js/components/home/caseDetail/CaseHistory.vue
@@ -3,6 +3,7 @@
     <iframe
       :width="width"
       ref="IFrameCaseHistory"
+      title="IFrameCaseHistory"
       frameborder="0"
       :src="path"
       :height="height"
diff --git a/resources/assets/js/components/home/caseDetail/ChangeLog.vue b/resources/assets/js/components/home/caseDetail/ChangeLog.vue
index c11fb4986..b861a4ab1 100644
--- a/resources/assets/js/components/home/caseDetail/ChangeLog.vue
+++ b/resources/assets/js/components/home/caseDetail/ChangeLog.vue
@@ -3,6 +3,7 @@
     <iframe
       :width="width"
       ref="IFrameChangeLog"
+      title="IFrameChangeLog"
       frameborder="0"
       :src="path"
       :height="height"
diff --git a/resources/assets/js/components/home/caseDetail/MoreInformation.vue b/resources/assets/js/components/home/caseDetail/MoreInformation.vue
index 8321bb7fc..ad067f21e 100644
--- a/resources/assets/js/components/home/caseDetail/MoreInformation.vue
+++ b/resources/assets/js/components/home/caseDetail/MoreInformation.vue
@@ -3,6 +3,7 @@
         <iframe
             :width="width"
             ref="IFrameSummaryForm"
+            title="IFrameSummaryForm"
             frameborder="0"
             :src="path"
             :height="height"
diff --git a/resources/assets/js/components/home/caseDetail/ProcessMap.vue b/resources/assets/js/components/home/caseDetail/ProcessMap.vue
index 6bf5ddf7c..05b630885 100644
--- a/resources/assets/js/components/home/caseDetail/ProcessMap.vue
+++ b/resources/assets/js/components/home/caseDetail/ProcessMap.vue
@@ -3,6 +3,7 @@
     <iframe
       :width="width"
       ref="IFrameProcessMap"
+      title="IFrameProcessMap"
       frameborder="0"
       :src="path"
       :height="height"
diff --git a/resources/assets/js/components/menu/CustomSidebarMenuItem.vue b/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
index e3f8999f1..e07e3819d 100644
--- a/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
+++ b/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="my-container">
+    <div :id="`menu-${item.id}`">
         <div
             v-if="item.header && !isItemHidden"
             class="vsm--header"
diff --git a/resources/assets/js/components/search/AdvancedFilter.vue b/resources/assets/js/components/search/AdvancedFilter.vue
index 2ab31119a..0ea7f0077 100644
--- a/resources/assets/js/components/search/AdvancedFilter.vue
+++ b/resources/assets/js/components/search/AdvancedFilter.vue
@@ -23,7 +23,7 @@
                                 </div>
                             </template>
                             <template v-slot:body>
-                                <b-form-group>
+                                <b-form-group label-for="advancedFilter">
                                     <b-form-checkbox-group
                                         v-model="selected"
                                         :options="filterItems"
@@ -82,7 +82,9 @@
                                 <b-form-group
                                     :state="caseNumberState"
                                     :invalid-feedback="$t('ID_INVALID_APPLICATION_NUMBER')"
+                                    label-for="caseNumber"
                                 >
+                                    <label for="case-number-input"></label>
                                     <b-form-input
                                         id="case-number-input"
                                         v-model="caseNumber"
@@ -90,6 +92,7 @@
                                         :placeholder="$t('ID_CASE_NUMBER_CAPITALIZED')"
                                         required
                                         type="number"
+                                        aria-label="case_number"
                                     ></b-form-input>
                                 </b-form-group>
                             </form>
@@ -147,6 +150,7 @@
                                         variant="outline-secondary"
                                         class="pull-right"
                                         @click="onSearch"
+                                        aria-label="search"
                                     >
                                     <b-icon icon="search"></b-icon>
                                     </b-button>
diff --git a/resources/assets/js/components/search/CasesFilter.vue b/resources/assets/js/components/search/CasesFilter.vue
index 6e472f61d..42d5e3806 100644
--- a/resources/assets/js/components/search/CasesFilter.vue
+++ b/resources/assets/js/components/search/CasesFilter.vue
@@ -6,7 +6,7 @@
             :title="addSearchTitle"
         >
             <template v-slot:body>
-                <b-form-group>
+                <b-form-group label-for="casesFilter">
                     <b-form-radio-group
                         v-model="selected"
                         :options="criteriaItems"
@@ -15,7 +15,7 @@
                         name="flavour-2a"
                         stacked
                     ></b-form-radio-group>
-                    <b-form-group> </b-form-group>
+                    <p></p>
                     <b-form-checkbox
                         id="checkbox-2"
                         v-model="byProcessCategory"
diff --git a/resources/assets/js/components/search/CustomFilter.vue b/resources/assets/js/components/search/CustomFilter.vue
index f843341a0..19cd66fae 100644
--- a/resources/assets/js/components/search/CustomFilter.vue
+++ b/resources/assets/js/components/search/CustomFilter.vue
@@ -6,7 +6,7 @@
             :title="addSearchTitle"
         >
             <template v-slot:body>
-                <b-form-group>
+                <b-form-group label-for="customFilter">
                     <b-form-radio-group
                         v-model="selectedRadio"
                         :options="getFilterColletion('radio')"
@@ -15,7 +15,7 @@
                         name="flavour-2a"
                         stacked
                     ></b-form-radio-group>
-                    <b-form-group> </b-form-group>
+                    <p></p>
                     <b-form-checkbox-group
                         id="checkbox-custom-filter"
                         v-model="selectedCheckbox"
diff --git a/resources/assets/js/components/search/MyCasesFilter.vue b/resources/assets/js/components/search/MyCasesFilter.vue
index 6145c0a16..a23ab3a45 100644
--- a/resources/assets/js/components/search/MyCasesFilter.vue
+++ b/resources/assets/js/components/search/MyCasesFilter.vue
@@ -6,8 +6,7 @@
             :title="addSearchTitle"
         >
             <template v-slot:body>
-
-                <b-form-group>
+                <b-form-group label-for="myCasesFilter">
                     <b-form-radio-group
                         v-model="selected"
                         :options="filterItems"
diff --git a/resources/assets/js/components/tabs/Tabs.vue b/resources/assets/js/components/tabs/Tabs.vue
index bb78119b1..081d7217e 100644
--- a/resources/assets/js/components/tabs/Tabs.vue
+++ b/resources/assets/js/components/tabs/Tabs.vue
@@ -11,7 +11,7 @@
       >
         <span
           v-html="tab.header"
-          :aria-controls="tab.hash"
+          :aria-label="tab.hash"
           :aria-selected="tab.isActive"
           @click="selectTab(tab.hash, $event)"
           class="tabs-component-tab-a"
diff --git a/resources/assets/js/components/utils/BreadCrumb.vue b/resources/assets/js/components/utils/BreadCrumb.vue
index f92c129ea..2e711d262 100644
--- a/resources/assets/js/components/utils/BreadCrumb.vue
+++ b/resources/assets/js/components/utils/BreadCrumb.vue
@@ -16,7 +16,7 @@
           <span>{{ item.label }}</span>
         </span>
       </li>
-      <div
+      <li
         v-for="item in settings"
         :key="item.id"
         class="vp-bread-crumbs-settings vp-float-right vp-inline-block"
@@ -29,7 +29,7 @@
         >
           <i :class="formatClass(item)"></i>
         </span>
-      </div>
+      </li>
     </ol>
   </nav>
 </template>
diff --git a/resources/assets/js/components/utils/ellipsis.vue b/resources/assets/js/components/utils/ellipsis.vue
index acb8df773..34608962e 100644
--- a/resources/assets/js/components/utils/ellipsis.vue
+++ b/resources/assets/js/components/utils/ellipsis.vue
@@ -23,6 +23,7 @@
                             :key="item.name"
                             variant="outline-info"
                             @click="executeFunction(item.fn)"
+                            :aria-label="item.name"
                         >
                             <i class="custom-icon" :class="item.icon" v-bind:style="{color: item.color}"></i>
                         </b-button>
diff --git a/resources/assets/js/components/vuetable/SettingsPopover.vue b/resources/assets/js/components/vuetable/SettingsPopover.vue
index f16a84b88..6b04bbecf 100644
--- a/resources/assets/js/components/vuetable/SettingsPopover.vue
+++ b/resources/assets/js/components/vuetable/SettingsPopover.vue
@@ -8,36 +8,32 @@
       @show="onshow"
     >
       <template #title>{{ $t("ID_COLUMNS").toUpperCase() }}</template>
-
       <div>
         <div class="input-group input-group-sm mb-3">
           <span class="input-group-text" id="inputGroup-sizing-sm"
             ><i class="fas fa-search"></i
           ></span>
-
           <input
             type="text"
             class="form-control"
-            aria-describedby="inputGroup-sizing-sm"
+            aria-label="inputGroup-sizing-sm"
             @keyup="search"
             v-model="text"
           />
         </div>
-
         <div class="form-check border-bottom">
           <input
             class="form-check-input"
             type="checkbox"
             v-model="allColumns"
             @change="toogleAllColumns"
+            id="flexCheckDefault"
           />
-
           <label class="form-check-label" for="flexCheckDefault">
             {{ $t("ID_ALL") }}
           </label>
         </div>
-
-        <b-form-group>
+        <b-form-group label-for="settingsPopover">
           <b-form-checkbox-group
             v-model="localSelected"
             :options="options"
@@ -48,13 +44,11 @@
             stacked
           ></b-form-checkbox-group>
         </b-form-group>
-
         <div class="v-popover-footer">
           <div class="float-right">
             <b-button @click="onClose" size="sm" variant="danger">
               {{ $t("ID_CANCEL") }}</b-button
             >
-
             <b-button @click="onSave" size="sm" variant="success">{{
               $t("ID_SAVE")
             }}</b-button>
diff --git a/resources/assets/js/home/BatchRouting.vue b/resources/assets/js/home/BatchRouting.vue
index faeacb8a1..a10adf02a 100644
--- a/resources/assets/js/home/BatchRouting.vue
+++ b/resources/assets/js/home/BatchRouting.vue
@@ -3,6 +3,7 @@
     <iframe
       :width="width"
       ref="xIFrame"
+      title="xIFrame"
       frameborder="0"
       :src="path"
       :height="height"
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index be93519bf..bb472cae5 100755
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -2,6 +2,7 @@
     <div
         id="home"
         :class="[{ collapsed: collapsed }, { onmobile: isOnMobile }]"
+        role="main"
     >
         <div class="demo">
             <b-alert
diff --git a/resources/assets/js/home/LegacyFrame.vue b/resources/assets/js/home/LegacyFrame.vue
index 4b4625eea..6e047f734 100644
--- a/resources/assets/js/home/LegacyFrame.vue
+++ b/resources/assets/js/home/LegacyFrame.vue
@@ -7,6 +7,7 @@
       :src="pageUri"
       :height="height"
       allowfullscreen
+      title="xIFrame"
     ></iframe>
   </div>
 </template>
diff --git a/resources/assets/js/home/MyDocuments.vue b/resources/assets/js/home/MyDocuments.vue
index b58436a7f..b9da19225 100644
--- a/resources/assets/js/home/MyDocuments.vue
+++ b/resources/assets/js/home/MyDocuments.vue
@@ -3,6 +3,7 @@
     <iframe
       :width="width"
       ref="xIFrame"
+      title="xIFrame"
       frameborder="0"
       :src="path"
       :height="height"
diff --git a/resources/assets/js/home/TaskMetrics/ProcessPopover.vue b/resources/assets/js/home/TaskMetrics/ProcessPopover.vue
index c7703f3ee..8e494f038 100644
--- a/resources/assets/js/home/TaskMetrics/ProcessPopover.vue
+++ b/resources/assets/js/home/TaskMetrics/ProcessPopover.vue
@@ -19,20 +19,21 @@
             aria-describedby="inputGroup-sizing-sm"
             @keyup="search"
             v-model="text"
+            aria-label="search"
           />
-        </div>
-        <div class="form-check border-bottom">
+        </div>        <div class="form-check border-bottom">
           <input
             class="form-check-input"
             type="checkbox"
             v-model="allColumns"
             @change="toogleAllColumns"
+            id="flexCheckDefault"
           />
           <label class="form-check-label" for="flexCheckDefault">
             {{ $t("ID_ALL") }}
           </label>
         </div>
-        <b-form-group>
+        <b-form-group label-for="casesFilter">
           <b-form-checkbox-group
             v-model="localSelected"
             :options="results"
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
index 5e82acd4c..30b16cc5c 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
+  <div ref="v-pm-charts" class="v-pm-charts vp-inline-block">
     <div class="p-1 v-flex">
       <h6 class="v-search-title">
         {{ $t("ID_DRILL_DOWN_NUMBER_TASKS_PROCESS") }}
@@ -70,13 +70,13 @@
           </div>
         </b-popover>
         <div class="vp-inline-block vp-right vp-padding-r40">
-          <h4
+          <span
             class="v-search-title"
             @click="showProcessesPopover"
             id="pm-task-process"
           >
             <i class="fas fa-cog"></i>
-          </h4>
+          </span>
         </div>
       </div>
       <div class="v-search-info">
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
index 8253b74a7..b2db2e2de 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
+    <div ref="v-pm-charts" class="v-pm-charts vp-inline-block">
         <div class="p-1 v-flex">
             <h6 class="v-search-title">
                 {{ $t("ID_DRILL_DOWN_RISK_MATRIX") }}
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
index f972dec09..79a2c732d 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
+  <div ref="v-pm-charts" class="v-pm-charts vp-inline-block">
     <div class="p-1 v-flex">
       <h6 class="v-search-title">
         {{ $t("ID_DRILL_DOWN_NUMBER_TASKS_PROCESS_BY_TASK") }}
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
index 302427f48..69cf59a34 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
+  <div ref="v-pm-charts" class="v-pm-charts vp-inline-block">
     <div class="p-1 v-flex">
       <h6 class="v-search-title">{{ $t("ID_DRILL_DOWN_NUMBER_TASKS") }}</h6>
       <BreadCrumb :options="dataBreadcrumbs" :settings="settingsBreadcrumbs" />
diff --git a/resources/assets/js/home/TaskReassignments.vue b/resources/assets/js/home/TaskReassignments.vue
index 4f4e35572..98c67b5c1 100644
--- a/resources/assets/js/home/TaskReassignments.vue
+++ b/resources/assets/js/home/TaskReassignments.vue
@@ -3,6 +3,7 @@
     <iframe
       :width="width"
       ref="xIFrame"
+      title="xIFrame"
       frameborder="0"
       :src="path"
       :height="height"
diff --git a/resources/assets/js/home/XCase.vue b/resources/assets/js/home/XCase.vue
index d5edc0195..24b107763 100644
--- a/resources/assets/js/home/XCase.vue
+++ b/resources/assets/js/home/XCase.vue
@@ -3,6 +3,7 @@
     <iframe
       :width="width"
       ref="xIFrame"
+      title="xIFrame"
       frameborder="0"
       :src="path"
       :height="height"
diff --git a/resources/assets/js/home/modal/ModalCancelCase.vue b/resources/assets/js/home/modal/ModalCancelCase.vue
index dd0493f85..38c93dd13 100644
--- a/resources/assets/js/home/modal/ModalCancelCase.vue
+++ b/resources/assets/js/home/modal/ModalCancelCase.vue
@@ -26,12 +26,13 @@
           ref="comment"
           cols="80"
           rows="5"
+          aria-label="commentsCancelCase"
         ></textarea>
       </div>
       <div class="row">
         <div class="col-md-12 ml-auto">
-          <input type="checkbox" class="" ref="send" />
-          <label class="form-check-label" for="sendEmail">
+          <input id="sendEmailCancelCase" type="checkbox" class="" ref="send" />
+          <label class="form-check-label" for="sendEmailCancelCase">
             Send email to participants</label
           >
         </div>
diff --git a/resources/assets/js/home/modal/ModalPauseCase.vue b/resources/assets/js/home/modal/ModalPauseCase.vue
index cfe85dc18..9992e9a74 100644
--- a/resources/assets/js/home/modal/ModalPauseCase.vue
+++ b/resources/assets/js/home/modal/ModalPauseCase.vue
@@ -21,13 +21,14 @@
         </b-alert>
         <b-row class="my-1">
           <b-col sm="3">
-            <label for="pauseDate">{{ $t('ID_PAUSE_DATE') }}</label>
+            <label aria-label="pauseDate">{{ $t('ID_PAUSE_DATE') }}</label>
           </b-col>
           <b-col sm="5">
             <b-form-datepicker
               disabled  
               id="pauseDate"
               class="mb-2"
+              aria-controls="pauseDate"
               v-model="pauseData.pauseDate"
               :locale="locale"
               :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
@@ -40,12 +41,13 @@
         
         <b-row class="my-1">
           <b-col sm="3">
-            <label for="unpauseDate">{{ $t('ID_UNPAUSE_DATE') }}</label>
+            <label aria-label="unpauseDate">{{ $t('ID_UNPAUSE_DATE') }}</label>
           </b-col>
           <b-col sm="5">
             <b-form-datepicker
               id="unpauseDate"
               class="mb-2"
+              aria-controls="unpauseDate"
               v-model="pauseData.unpauseDate"
               :locale="locale"
               :min="minDate"
diff --git a/resources/assets/js/home/modal/ModalReassignCase.vue b/resources/assets/js/home/modal/ModalReassignCase.vue
index 8fcd08b57..d8e2f021f 100644
--- a/resources/assets/js/home/modal/ModalReassignCase.vue
+++ b/resources/assets/js/home/modal/ModalReassignCase.vue
@@ -21,10 +21,10 @@
       <b-container fluid>
         <b-row class="my-1">
           <b-col sm="3">
-            <label for="selectUser">{{ $t('ID_SELECT_USER') }}</label>
+            <label aria-label="selectUser">{{ $t('ID_SELECT_USER') }}</label>
           </b-col>
           <b-col sm="9">
-            <b-form-select v-model="userSelected" :options="users"></b-form-select>
+            <b-form-select id="selectUser" v-model="userSelected" :options="users" aria-label="selectUser"></b-form-select>
           </b-col>
         </b-row>