Add more accessible names to the console (#2652)

Author: ptkach

console-webapp/src/app/billingInfo/billingInfo.component.html

@@ -5,12 +5,16 @@ <h1 class="mat-headline-4">Billing Info</h1>
       <div class="console-app__billing-subhead">
         Billing records and information
       </div>
-      <a class="text-l" href="{{ driveFolderUrl() }}" target="_blank"
+      <a
+        class="text-l"
+        href="{{ driveFolderUrl() }}"
+        target="_blank"
+        aria-label="View billing records on Google Drive"
         >View on Google Drive</a
       >
     </div>
     <div>
-      <img src="./assets/billing.png" />
+      <img src="./assets/billing.png" alt="Generic billing image" />
     </div>
   </div>
 </app-selected-registrar-wrapper>

console-webapp/src/app/billingInfo/billingInfo.component.scss

@@ -16,7 +16,7 @@
     width: 100%;
   }
   &-subhead {
-    font-size: 20px;
+    font-size: 1.25rem;
     margin-bottom: 20px;
   }
 }

console-webapp/src/app/domains/domainList.component.html

@@ -25,7 +25,11 @@ <h1>No domains found</h1>
     } @else {
     <mat-menu #actions="matMenu">
       <ng-template matMenuContent let-domainName="domainName">
-        <button mat-menu-item (click)="openRegistryLock(domainName)">
+        <button
+          mat-menu-item
+          (click)="openRegistryLock(domainName)"
+          aria-label="Access registry lock for domain"
+        >
           <mat-icon>key</mat-icon>
           <span>Registry Lock</span>
         </button>

console-webapp/src/app/domains/registryLock.component.html

@@ -49,6 +49,7 @@ <h1>Unlock the domain {{ domainListService.selectedDomain }}</h1>
       color="primary"
       type="submit"
       [disabled]="!unlockDomain.valid"
+      aria-label="Submit domain unlock request"
     >
       Save
     </button>
@@ -73,6 +74,7 @@ <h1>Lock the domain {{ domainListService.selectedDomain }}</h1>
       color="primary"
       type="submit"
       [disabled]="!lockDomain.valid"
+      aria-label="Submit domain lock request"
     >
       Save
     </button>

console-webapp/src/app/header/header.component.html

@@ -2,7 +2,7 @@
   <mat-toolbar>
     <button
       mat-icon-button
-      aria-label="Open menu"
+      aria-label="Open navigation menu"
       (click)="toggleNavPane()"
       *ngIf="breakpointObserver.isMobileView()"
       class="console-app__menu-btn"

console-webapp/src/app/lock/registryLockVerify.component.scss

@@ -3,7 +3,7 @@
     margin-top: 30px;
   }
   &-subhead {
-    font-size: 20px;
+    font-size: 1.25rem;
     margin-bottom: 20px;
   }
 }

console-webapp/src/app/ote/newOte.component.html

@@ -30,7 +30,14 @@ <h1>Generated Successfully</h1>
         >
       </mat-form-field>
     </p>
-    <button mat-flat-button color="primary" type="submit">Save</button>
+    <button
+      mat-flat-button
+      color="primary"
+      type="submit"
+      aria-label="Submit new OT&E account"
+    >
+      Save
+    </button>
   </form>
   }
 </div>

console-webapp/src/app/registrar/newRegistrar.component.html

@@ -175,6 +175,7 @@ <h2>Contact Info</h2>
       mat-flat-button
       color="primary"
       type="submit"
+      aria-label="Submit new registrar request"
     >
       Save
     </button>

console-webapp/src/app/registrar/registrarDetails.component.html

@@ -16,7 +16,7 @@ <h1 class="mat-headline-4">Registrars</h1>
         *ngIf="oteButtonVisible"
         mat-stroked-button
         (click)="checkOteStatus()"
-        aria-label="Check OT&E account"
+        aria-label="Check OT&E account status"
         [elementId]="getElementIdForOteBlock()"
       >
         Check OT&E Status

console-webapp/src/app/resources/resources.component.html

@@ -11,6 +11,6 @@ <h1 class="mat-headline-4">Resources</h1>
     >
   </div>
   <div>
-    <img src="./assets/resources.png" />
+    <img src="./assets/resources.png" alt="Generic resources image" />
   </div>
 </div>