✨ Fix WCAG Issues and create new repor (#379) (#382)

Parent issue: sequentech/meta#550

avRegistration/login-directive/login-directive.html

@@ -1,23 +1,27 @@
-<div class="container-login" ng-if="!isOpenId">
+<section class="container-login" ng-if="!isOpenId" aria-labelledby="login-header-text">
   <div class="row">
     <div class="col-sm-12 loginheader">
         <h3
           class="tex-center login-header-text"
+          id="login-header-text"
           ng-if="!isAdmin && !isOtl && !isCensusQuery"
           ng-i18next="[i18next]({name: orgName})avRegistration.loginHeader">
         </h3>
         <h3
           class="tex-center login-header-text"
+          id="login-header-text"
           ng-if="isAdmin && !isOtl"
           ng-i18next="[i18next]avRegistration.adminLoginHeader">
         </h3>
         <h3
           class="tex-center login-header-text"
+          id="login-header-text"
           ng-if="!!isCensusQuery"
           ng-i18next="avRegistration.censusQueryHeader">
         </h3>
         <h3
           class="tex-center login-header-text"
+          id="login-header-text"
           ng-if="isOtl"
           ng-i18next="avRegistration.otlHeader">
         </h3>
@@ -72,15 +76,15 @@
             </div>
 
           <div class="button-group">
-              <div class="input-error" ng-if="!isCensusQuery">
+              <section class="input-error" ng-if="!isCensusQuery" aria-label="{{ 'avRegistration.loginError.errorLabel' | i18next }}">
                 <div
                   class="error text-danger"
                   role="alert"
                   ng-if="error"
                   ng-i18next
                 >[html:i18next]({{errorData}}){{error}}</div>
-              </div>
-              <div class="input-warn">
+              </section>
+              <section class="input-warn" aria-label="{{ 'avRegistration.loginError.warningLabel' | i18next }}">
                 <div class="warn-box" ng-if="!form.$valid || sendingData" >
                   <span class="glyphicon glyphicon-warning-sign"></span>
                   <div
@@ -89,7 +93,7 @@
                     avRegistration.fillValidFormText
                   </div>
                 </div>
-              </div>
+              </section>
               <button
                 type="submit"
                 class="btn btn-block btn-lg btn-success-action"
@@ -241,5 +245,5 @@
         </div>
     </div>
   </div>
-</div>
+</section>
 

avUi/common-footer-directive/common-footer-directive.html

@@ -1,14 +1,14 @@
 <div class="hidden" ng-cloak av-affix-bottom ng-if="!float" class="footer-wrapper">
-    <div class="container footer-container row">
+    <footer class="container footer-container row" role="navigation">
         <i ng-i18next="[html:i18next]({url: configService.organization.orgUrl, name: configService.organization.orgName})avCommon.poweredBy">
         </i>
-    </div>
+    </footer>
 </div>
 
 <div ng-if="!!float" class="footer-wrapper">
-    <div class="container footer-container row">
+    <footer class="container footer-container row" role="navigation">
         <i ng-i18next="[html:i18next]({url: configService.organization.orgUrl, name: configService.organization.orgName})avCommon.poweredBy">
         </i>
-    </div>
+    </footer>
 </div>
 

avUi/common-header-directive/common-header-directive.html

@@ -1,6 +1,7 @@
 <!-- top navbar -->
 <nav 
   class="header-navbar"
+  id="header-navbar"
   av-affix-top=".navbar-unfixed-top"
   role="navigation"
 >
@@ -41,6 +42,7 @@
               target="_top"
               tabindex="0"
               class="config-version"
+              role="button"
               ng-click="showVersionsModal()"
           >
             <span

avUi/global.less

@@ -177,3 +177,23 @@ a:hover, a:active {
   bottom: 0;
 }
 
+.skip-link {
+  position: absolute;
+  display: inline-block;
+  padding: .375rem .75rem;
+  line-height: 1;
+  font-size: 1.25rem;
+  background-color: #047857;
+  color: white !important;
+  z-index: 1000;
+}
+
+.skip-link:not(:focus) {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  z-index: unset;
+}

dist/less/avUi/global.less

@@ -177,3 +177,23 @@ a:hover, a:active {
   bottom: 0;
 }
 
+.skip-link {
+  position: absolute;
+  display: inline-block;
+  padding: .375rem .75rem;
+  line-height: 1;
+  font-size: 1.25rem;
+  background-color: #047857;
+  color: white !important;
+  z-index: 1000;
+}
+
+.skip-link:not(:focus) {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  z-index: unset;
+}

dist/locales/en.json

@@ -35,6 +35,8 @@
 			"fail": "There was an error in the authentication. This could be for multiple causes and for security reasons we cannot reveal which one it is:<ul><li>The OTL might have been invalidated.</li><li>You might have provided incorrect data, please check.</li><li>The OTL authentication period might be finished or not started.</li><li>Other reasons</li></ul><p>Please try again later. If this continue to happen and you think it should not, please contact with election administrators.</p>"
 		},
 		"loginError": {
+			"errorLabel": "Login error",
+			"warningLabel": "Input warning",
 			"email": {
 				"unrecognizedServerResponse": "There was an error during authentication: <strong>Unrecognized Server Response</strong>.<p>Please try again later. If the problem persists, please contact support at __support__.</p>",
 				"invalidServerResponse": "There was an error during authentication: <strong>Invalid Server Response</strong>.<p>Please try again later. If the problem persists, please contact support at __support__.</p>",

dist/locales/es.json

@@ -84,7 +84,11 @@
 		"invalidDni": "DNI/NIE inválido",
 		"dniHelp": "Introduce un DNI/NIE válido. Ejemplos: 12343567R o X01234356R",
 		"imageHelp": "Añadir una imagen en formato jpg o png",
-		"invalidImage": "Imagen inválida"
+		"invalidImage": "Imagen inválida",
+		"loginError": {
+			"errorLabel": "Error de inicio de sesión",
+			"warningLabel": "Advertencia de formulario"
+		}
 	},
 	"avDocumentation": {
 		"legal": {

locales/en.json

@@ -36,6 +36,8 @@
       "fail": "There was an error in the authentication. This could be for multiple causes and for security reasons we cannot reveal which one it is:<ul><li>The OTL might have been invalidated.</li><li>You might have provided incorrect data, please check.</li><li>The OTL authentication period might be finished or not started.</li><li>Other reasons</li></ul><p>Please try again later. If this continue to happen and you think it should not, please contact with election administrators.</p>"
     },
     "loginError": {
+      "errorLabel": "Login error",
+      "warningLabel": "Input warning",
       "email": {
         "unrecognizedServerResponse": "There was an error during authentication: <strong>Unrecognized Server Response</strong>.<p>Please try again later. If the problem persists, please contact support at __support__.</p>",
         "invalidServerResponse": "There was an error during authentication: <strong>Invalid Server Response</strong>.<p>Please try again later. If the problem persists, please contact support at __support__.</p>",

locales/es.json

@@ -90,7 +90,11 @@
     "invalidDni": "DNI/NIE inválido",
     "dniHelp": "Introduce un DNI/NIE válido. Ejemplos: 12343567R o X01234356R",
     "imageHelp": "Añadir una imagen en formato jpg o png",
-    "invalidImage": "Imagen inválida"
+    "invalidImage": "Imagen inválida",
+    "loginError": {
+      "errorLabel": "Error de inicio de sesión",
+      "warningLabel": "Advertencia de formulario"
+    }
 
   },