✨ Fix WCAG Issues and create new report (#427) (#431)

Parent issue: sequentech/meta#550
sequentech · Feb 21, 2024 · b2e55eb · b2e55eb
1 parent 4f3fa80
commit b2e55eb
Show file tree

Hide file tree

Showing 15 changed files with 139 additions and 92 deletions.
diff --git a/avBooth/audit-ballot-screen-directive/audit-ballot-screen-directive.html b/avBooth/audit-ballot-screen-directive/audit-ballot-screen-directive.html
@@ -1,4 +1,7 @@
 <!-- top navbar -->
+<a href="#main-content" class="skip-link">{{ 'avBooth.skipLinks.skipToMain' | i18next }}</a>
+<a href="#action-buttons" class="skip-link">{{ 'avBooth.skipLinks.skipToActions' | i18next }}</a>
+<a href="#footer" class="skip-link">{{ 'avBooth.skipLinks.skipToFooter' | i18next }}</a>
 <div avb-common-header
   ballot-hash="{{ showAuditBtn && stateData.ballotHash }}"
   ng-class="{'hash-margin': showAuditBtn && stateData.ballotHash}"
@@ -11,10 +14,10 @@
     class="sticky-top content"
     ng-class="{'sticky-top-alt': showAuditBtn && stateData.ballotHash}"
   >
-    <div avb-voting-step step="audit" with-election-list="!!parentAuthEvent"></div>
+    <aside avb-voting-step step="audit" with-election-list="!!parentAuthEvent"></aside>
   </div>
   <div class="sticky-padding"></div>
-  <div class="content avb-content">
+  <main class="content avb-content" id="main-content">
       <div class="row">
         <div class="col-xs-12">
           <h1 class="text-left audit-title">
@@ -60,11 +63,11 @@ <h2 class="tutorial-text">
           </div>
         </div>
       </div>
-  </div>
+  </main>
 </div>
 
 <div class="container" ng-if="!fixToBottom">
-  <div class="actions">
+  <section id="action-buttons" class="actions" aria-label="{{ 'avBooth.simultaneousQuestions.actionsSection' | i18next }}">
     <button
       id="print-btn"
       class="btn btn-lg btn-opt-action btn-plain col-xs-6 col-sm-4"
@@ -82,14 +85,14 @@ <h2 class="tutorial-text">
         <i class="fa fa-chevron-right"></i>
       </span>
     </button>
-  </div>
+  </section>
 </div>
 
-<div avb-common-footer ng-if="!fixToBottom"></div>
+<div avb-common-footer id="footer" ng-if="!fixToBottom"></div>
 
 <div class="hidden" ng-cloak av-affix-bottom ng-if="fixToBottom">
   <div class="container container-fixed">
-    <div class="actions">
+    <section id="action-buttons" class="actions" aria-label="{{ 'avBooth.simultaneousQuestions.actionsSection' | i18next }}">
       <button
         id="print-btn"
         class="btn btn-lg btn-opt-action btn-plain col-xs-6 col-sm-4"
@@ -107,7 +110,7 @@ <h2 class="tutorial-text">
           <i class="fa fa-chevron-right"></i>
         </span>
       </button>
-    </div>
+    </section>
   </div>
-  <div avb-common-footer float="true"></div>
+  <div avb-common-footer id="footer" float="true"></div>
 </div>
diff --git a/avBooth/booth-children-elections-directive/booth-children-elections-directive.html b/avBooth/booth-children-elections-directive/booth-children-elections-directive.html
@@ -1,21 +1,23 @@
-<div 
+<section
     ng-repeat="category in childrenElectionInfo.presentation.categories"
     ng-if="!category.hidden"
     class="election-category"
+    aria-label="{{ 'avBooth.electionChooserScreen.title' | i18next }}"
 >
     <h2 class="category-title">{{category | customI18n : 'title'}}</h2>
     <div class="category-elections-wrapper">
-        <div 
+        <section
             ng-repeat="election in category.events" 
             class="btn-election"
             ng-disabled="election.disabled"
             ng-if="!election.hidden"
             ng-class="{'selected': selectedElectionId === election.event_id, 'btn-election-open': checkElectionStarted(election.electionData) && canVoteElection(election)}"
             data-election-id="{{election.event_id}}"
             ng-click="canVoteElection(election) && click(election)"
+            aria-label="{{ election | customI18n : 'title' }} ( {{ hasVotedElection(election) ? ('avBooth.electionChooserScreen.voted' | i18next) : ('avBooth.electionChooserScreen.notVoted' | i18next) }} )"
         >
             <div class="text-container">
-                <h3 class="election-title">{{election | customI18n : 'title'}}</h3>
+                <h3 class="election-title" id="election-title-{{ election.event_id }}">{{election | customI18n : 'title'}}</h3>
                 <p class="election-description" ng-if="!!election.description">{{election | customI18n : 'description'}}</p>
                 <a
                     href="election/{{ election.event_id }}/public/home"
@@ -93,6 +95,6 @@ <h3 class="election-title">{{election | customI18n : 'title'}}</h3>
                 ng-click="canVoteElection(election) && click(election)"
                 ng-i18next="avBooth.electionChooserScreen.clickToVoteBtn">
             </button>
-        </div>
+        </section>
     </div>
-</div>
+</section>
diff --git a/avBooth/election-chooser-screen-directive/election-chooser-screen-directive.html b/avBooth/election-chooser-screen-directive/election-chooser-screen-directive.html
@@ -1,10 +1,12 @@
 <!-- top navbar -->
+<a href="#main-content" class="skip-link">{{ 'avBooth.skipLinks.skipToMain' | i18next }}</a>
+<a href="#footer" class="skip-link">{{ 'avBooth.skipLinks.skipToFooter' | i18next }}</a>
 <div avb-common-header></div>
 <div avb-watermark></div>
 
-<div class="container">
+<main class="container" id="main-content">
   <div class="sticky-top">
-    <div avb-voting-step step="'election-list'" with-election-list="true"></div>
+    <aside avb-voting-step step="'election-list'" with-election-list="true"></aside>
   </div>
   <div class="sticky-padding"></div>
 
@@ -30,6 +32,6 @@ <h1 class="election-chooser-header">
     parent-election="parentElection"
   ></div>
 
-</div>
+</main>
 
-<div avb-common-footer></div>
+<div avb-common-footer id="footer"></div>
diff --git a/avBooth/encrypting-ballot-screen-directive/encrypting-ballot-screen-directive.html b/avBooth/encrypting-ballot-screen-directive/encrypting-ballot-screen-directive.html
@@ -1,4 +1,6 @@
 <!-- top navbar -->
+<a href="#main-content" class="skip-link">{{ 'avBooth.skipLinks.skipToMain' | i18next }}</a>
+<a href="#footer" class="skip-link">{{ 'avBooth.skipLinks.skipToFooter' | i18next }}</a>
 <div avb-common-header></div>
 <div avb-watermark></div>
 
@@ -11,7 +13,7 @@
   </div>
 </div -->
 
-<div class="busy-gui container" ng-if="imagesPreloaded">
+<main id="main-content" class="busy-gui container" ng-if="imagesPreloaded">
   <div class="col-sm-offset-3 col-sm-6 margin-tb-15" aria-hidden="true">
     <div class="busy-img-central text-center" id="img-central">
         <div id="div-id-one">
@@ -69,6 +71,6 @@ <h1 class="text-center" ng-i18next="avBooth.busy.title" aria-label="{{ ariaDescr
       </div>
     </div>
   </div>
-</div>
+</main>
 
-<div avb-common-footer></div>
+<div id="footer" avb-common-footer></div>
diff --git a/avBooth/review-ballot-v2-directive/review-ballot-v2-directive.html b/avBooth/review-ballot-v2-directive/review-ballot-v2-directive.html
@@ -1,12 +1,12 @@
-<div
+<section
   class="question"
   ng-repeat="question in election.questions"
   ng-if="!question.disabled && question.disabled !== true"
-  aria-label="{{ editActionText }}">
+  aria-labelledby="question-{{ question.index }}">
 
   <!-- title -->
   <div class="title-container">
-    <h1 aria-level="2" class="text-brand-success question-title">
+    <h1 aria-level="2" class="text-brand-success question-title" id="question-{{ question.index }}">
       <span>{{$index + 1}}.</span>
       <span class="question-title title-text" ng-bind-html="question | customI18n : 'title'"></span>
     </h1>
@@ -19,9 +19,10 @@ <h1 aria-level="2" class="text-brand-success question-title">
   >
   </p>
 
-  <div
+  <section
     class="text-warning input-error error-list"
     ng-if="errors[question.index]"
+    aria-label="{{ 'avBooth.simultaneousQuestions.errorsList' | i18next }}"
   >
     <div class="input-warn" ng-repeat="error in errors[question.index]" ng-if="errors[question.index].length > 0">
       <div class="warn-box">
@@ -35,7 +36,7 @@ <h1 aria-level="2" class="text-brand-success question-title">
         </div>
       </div>
     </div>
-  </div>
+  </section>
 
   <div class="category-body">
     <div 
@@ -60,7 +61,7 @@ <h1 aria-level="2" class="text-brand-success question-title">
         </div>
       </div>
       <div class="categories" ng-if="question.hasCategories">
-          <div
+          <section
             ng-repeat="category in question.categories"
             ng-if="(category.answers | avbSelectedOptions).length > 0 || category.categoryAnswer.selected > -1"
             avb-simultaneous-questions-category-v2
@@ -70,6 +71,7 @@ <h1 aria-level="2" class="text-brand-success question-title">
             toggle-select-item-cumulative="toggleSelectItemCumulative"
             cumulative-checks="cumulativeChecks"
             is-review="true"
+            aria-label="{{ category | customI18n : 'title' }}"
             ng-class="{
               'flex-col-12': (question.extra_options.answer_group_columns_size === 12),
               'flex-col-6': (question.extra_options.answer_group_columns_size === 6),
@@ -78,7 +80,7 @@ <h1 aria-level="2" class="text-brand-success question-title">
               'empty-category': !category.title
             }"
           >
-          </div>
+          </section>
       </div>
       <div 
         ng-if="!question.hasCategories"
@@ -167,4 +169,4 @@ <h1 aria-level="2" class="text-brand-success question-title">
       ng-i18next="avBooth.emptyAnswer">
     </li>
   </ol>
-</div>
+</section>
diff --git a/avBooth/review-screen-directive/review-screen-directive.html b/avBooth/review-screen-directive/review-screen-directive.html
@@ -1,17 +1,20 @@
 <!-- top navbar -->
+<a href="#main-content" class="skip-link">{{ 'avBooth.skipLinks.skipToMain' | i18next }}</a>
+<a href="#action-buttons" class="skip-link">{{ 'avBooth.skipLinks.skipToActions' | i18next }}</a>
+<a href="#footer" class="skip-link">{{ 'avBooth.skipLinks.skipToFooter' | i18next }}</a>
 <div avb-common-header
   ballot-hash="{{ showAuditBtn && stateData.ballotHash }}"
   ng-class="{'hash-margin': showAuditBtn && stateData.ballotHash}"
   hash-help="ballotHashWarning()"
 ></div>
 <div avb-watermark></div>
 
-<div class="container">
+<main class="container" id="main-content">
   <div
     class="sticky-top content"
     ng-class="{'sticky-top-alt': showAuditBtn && stateData.ballotHash}"
   >
-    <div avb-voting-step step="review" with-election-list="!!parentAuthEvent"></div>
+    <aside avb-voting-step step="review" with-election-list="!!parentAuthEvent"></aside>
   </div>
   <div class="sticky-padding"></div>
 
@@ -24,7 +27,7 @@ <h1 class="review-ballot-title">
   </p>
 
   <div avb-review-ballot-v2></div>
-</div>
+</main>
 
 <div class="container visible-xs" ng-if="!fixToBottom && showAuditBtn">
   <div class="actions actions-extra">
@@ -42,7 +45,7 @@ <h1 class="review-ballot-title">
 </div>
 
 <div class="container" ng-if="!fixToBottom">
-  <div class="actions">
+  <section id="action-buttons" class="actions" aria-label="{{ 'avBooth.simultaneousQuestions.actionsSection' | i18next }}">
     <button
       id="change-selection-btn"
       class="btn btn-lg btn-success-action btn-plain col-xs-6 col-sm-4"
@@ -77,10 +80,10 @@ <h1 class="review-ballot-title">
         <i class="fa fa-chevron-right"></i>
       </span>
     </button>
-  </div>
+  </sections>
 </div>
 
-<div avb-common-footer ng-if="!fixToBottom"></div>
+<div avb-common-footer id="footer" ng-if="!fixToBottom"></div>
 
 <div class="hidden" ng-cloak av-affix-bottom ng-if="fixToBottom">
   <div class="container container-fixed visible-xs" ng-if="showAuditBtn">
@@ -98,7 +101,7 @@ <h1 class="review-ballot-title">
     </div>
   </div>
   <div class="container container-fixed">
-    <div class="actions">
+    <section id="action-buttons" class="actions" aria-label="{{ 'avBooth.simultaneousQuestions.actionsSection' | i18next }}">
       <button
         id="change-selection-btn"
         class="btn btn-lg btn-success-action btn-plain col-xs-6 col-sm-4"
@@ -133,7 +136,7 @@ <h1 class="review-ballot-title">
           <i class="fa fa-chevron-right"></i>
         </span>
       </button>
-    </div>
+    </section>
   </div>
-  <div avb-common-footer float="true"></div>
+  <div avb-common-footer id="footer" float="true"></div>
 </div>
diff --git a/.../simultaneous-question-answer-v2-directive/simultaneous-question-answer-v2-directive.html b/.../simultaneous-question-answer-v2-directive/simultaneous-question-answer-v2-directive.html
@@ -1,6 +1,7 @@
-<div
+<section
   class="question-answer"
   ng-class="{'is-category-list': isCategoryList, 'read-only': readOnly()}"
+  aria-labelledby="question_{{question.index}}_answer_{{answer.id}}"
 >
   <div
     role="checkbox"
@@ -150,6 +151,7 @@
           tabindex="0"
           class="plurality-checkbox"
           role="checkbox"
+          aria-checked="{{answer.selected > -1 ? 'true' : 'false'}}"
           aria-labelledby="question_{{question.index}}_answer_{{answer.id}}"
           ng-if="question.tally_type === 'plurality-at-large'"
           ng-click="$event.stopPropagation(); !readOnly() && toggleSelectItem(question, answer)"
@@ -187,4 +189,4 @@
       </div>
     </div>
   </div>
-</div>
+</section>
diff --git a/...taneous-questions-category-v2-directive/simultaneous-questions-category-v2-directive.html b/...taneous-questions-category-v2-directive/simultaneous-questions-category-v2-directive.html
@@ -1,6 +1,6 @@
 <div class="category-heading-container">
-    <h3 class="category-heading">
-        {{ category.title }}
+    <h3 class="category-heading" id="question_{{question.index}}_answer_{{category.categoryAnswer.id}}">
+        {{ category | customI18n : 'title' }}
     </h3>
     <div
         class="vertilize-col answer-glyphicon"    
@@ -9,6 +9,8 @@ <h3 class="category-heading">
         <span
             class="check-title"
             tabindex="0"
+            role="checkbox"
+            aria-checked="{{ category.categoryAnswer.selected > -1 }}"
             aria-labelledby="question_{{question.index}}_answer_{{category.categoryAnswer.id}}"
             ng-click="!isReview && toggleSelectItem(question, category.categoryAnswer)"
         >
@@ -74,6 +76,8 @@ <h3 class="category-heading">
     >
         <span
             tabindex="0"
+            role="checkbox"
+            aria-checked="{{ category.categoryAnswer.selected > -1 }}"
             aria-labelledby="question_{{question.index}}_answer_{{category.categoryAnswer.id}}"
             ng-click="!isReview && toggleSelectItem(question, category.categoryAnswer)"
         >