Add more accessible names to the console (#2652)

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

@@ -5,12 +5,16 @@
       <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 @@
     } @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 @@
       color="primary"
       type="submit"
       [disabled]="!unlockDomain.valid"
+      aria-label="Submit domain unlock request"
     >
       Save
     </button>
@@ -73,6 +74,7 @@
       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 @@
         >
       </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 @@ JPY=billing-id-for-yen"
       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 @@
         *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 @@
     >
   </div>
   <div>
-    <img src="./assets/resources.png" />
+    <img src="./assets/resources.png" alt="Generic resources image" />
   </div>
 </div>

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

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

console-webapp/src/app/settings/contact/contactDetails.component.html

@@ -128,6 +128,7 @@
       mat-flat-button
       color="primary"
       type="submit"
+      aria-label="Save contact updates"
     >
       Save
     </button>

console-webapp/src/app/settings/security/securityEdit.component.html

@@ -23,7 +23,7 @@
       <button
         matSuffix
         mat-icon-button
-        aria-label="Remove"
+        [attr.aria-label]="'Remove IP entry ' + ip.value"
         (click)="removeIpEntry(ip)"
         [disabled]="isUpdating"
       >
@@ -36,6 +36,7 @@
       [disabled]="isUpdating"
       color="primary"
       (click)="createIpEntry()"
+      aria-label="Add new IP address"
       type="button"
     >
       + Add IP

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

@@ -14,6 +14,7 @@
         queryParamsHandling="merge"
         #rla="routerLinkActive"
         [active]="rla.isActive"
+        aria-label="Access contacts settings"
         >Contacts</a
       >
       <a
@@ -23,6 +24,7 @@
         queryParamsHandling="merge"
         #rla2="routerLinkActive"
         [active]="rla2.isActive"
+        aria-label="Access whois settings"
         >WHOIS Info</a
       >
       <a
@@ -32,6 +34,7 @@
         queryParamsHandling="merge"
         #rla3="routerLinkActive"
         [active]="rla3.isActive"
+        aria-label="Access security settings"
         >Security</a
       >
     </nav>

console-webapp/src/app/settings/whois/whoisEdit.component.html

@@ -149,7 +149,14 @@
       </mat-form-field>
       }
 
-      <button mat-flat-button color="primary" type="submit">Save</button>
+      <button
+        mat-flat-button
+        color="primary"
+        type="submit"
+        aria-label="Save WHOIS settings"
+      >
+        Save
+      </button>
     </form>
   </div>
 </div>

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

@@ -10,7 +10,10 @@
     For help with OT&E sandbox and certification, or new technical requirements
     for any of our new TLD launches.
   </p>
-  <a class="text-l" href="mailto:registry-integration@google.com"
+  <a
+    class="text-l"
+    href="mailto:registry-integration@google.com"
+    aria-label="Email us with OT&E sandbox/certification or new TLD technical requirements questions."
     >registry-integration&#64;google.com</a
   >
   <p class="text-l">
@@ -19,6 +22,7 @@
   </p>
   <a
     class="text-l"
+    aria-label="Email support with general purpose questions."
     href="mailto:{{ userDataService.userData()?.supportEmail }}"
     >{{ userDataService.userData()?.supportEmail }}</a
   >

console-webapp/src/app/users/userDetails.component.html

@@ -90,11 +90,12 @@
             <input
               [type]="isPasswordVisible ? 'text' : 'password'"
               [value]="userDetails().password"
-              disabled
+              aria-label="Password field"
+              readonly
             />
             <button
               mat-button
-              aria-label="Show password"
+              aria-hidden="true"
               (click)="isPasswordVisible = !isPasswordVisible"
             >
               {{ isPasswordVisible ? "Hide" : "View" }} password

console-webapp/src/app/users/userEditForm.component.html

@@ -33,7 +33,13 @@
       </mat-select>
     </mat-form-field>
   </p>
-  <button mat-flat-button color="primary" aria-label="Save user" type="submit">
+  <button
+    mat-flat-button
+    color="primary"
+    aria-label="Save user"
+    type="submit"
+    aria-label="Save changes to the user"
+  >
     Save
   </button>
 </form>

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

@@ -88,12 +88,7 @@
           <mat-icon>add</mat-icon>
           Add existing user
         </button>
-        <button
-          mat-flat-button
-          (click)="isNew = true"
-          aria-label="Create new user"
-          color="primary"
-        >
+        <button mat-flat-button (click)="isNew = true" color="primary">
           Create New User
         </button>
       </div>

console-webapp/src/styles.scss

@@ -55,13 +55,13 @@ body {
       font-weight: bold;
       width: var(--list-item-title-width);
       display: inline-block;
-      font-size: 14px;
+      font-size: 0.85rem;
       white-space: pre-line;
       color: #202124;
       flex-shrink: 0;
     }
     .console-app__list-value {
-      font-size: 14px;
+      font-size: 0.85rem;
       white-space: pre-line;
       word-break: break-word;
       color: var(--text);

console-webapp/src/theme.scss

@@ -83,10 +83,10 @@ $typographyConfig: mat.m2-define-typography-config(
 );
 
 .text-xl {
-  font-size: 18px;
+  font-size: 1.1rem;
 }
 .text-l {
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 mat-row:nth-child(odd) {