Feature/tab order and extra labels (#1810)

* Add more labels and fix focus issues

* Unique ids

* Remove repetitive ids

* Revert "Remove repetitive ids"

This reverts commit 8d6d8a8.

* fix testing

* 🤖 GITHUB ACTIONS

Author: cryptalith

src/app/cdk/panel/panel-source/panel-source.component.html

@@ -37,12 +37,14 @@
         <a
           *ngIf="!displayTheStack && stackLength > 1"
           (click)="toggleStackMode()"
+          [attr.aria-label]="openOtherSources"
         >
           (<ng-container i18n="@@shared.of">of</ng-container>
           {{ stackLength }})&#x200E;
         </a>
         <a
           (click)="toggleStackMode()"
+          [attr.aria-label]="closeOtherSources"
           *ngIf="stackLength > 1 && displayTheStack"
         >
           <ng-container i18n="@@shared.closeOtherSources"
@@ -56,11 +58,7 @@
       class="preferred-source"
       *ngIf="!isPreferred && stackLength > 1 && !isPublicRecord"
     >
-      <a
-        (click)="clickMakePrimary()"
-        *ngIf="stackLength > 1"
-        i18n="@@record.closeOtherSources"
-      >
+      <a (click)="clickMakePrimary()" *ngIf="stackLength > 1">
         Make preferred source
       </a>
     </div>

src/app/cdk/panel/panel-source/panel-source.component.ts

@@ -17,6 +17,9 @@ import { VerificationEmailModalService } from 'src/app/core/verification-email-m
   preserveWhitespaces: true,
 })
 export class PanelSourceComponent implements OnInit {
+  closeOtherSources = $localize`:@@record.closeOtherSources:Close other sources`
+  openOtherSources = $localize`:@@record.openOtherSources:Open other sources`
+
   @Input() isPublicRecord
   @Input() isPreferred = true
   @Input() sourceName

src/app/cdk/panel/panel.module.ts

@@ -51,6 +51,7 @@ import { SharedModule } from '../../shared/shared.module'
     FormsModule,
     MatProgressBarModule,
     SharedModule,
+    A11yLinkModule,
   ],
   exports: [
     PanelComponent,

src/app/cdk/panel/panel/panel.component.html

@@ -7,7 +7,7 @@
     'staked-header': stackedHeader,
     'expand-button': !editable && !isPublicRecord && !customControls
   }"
-  id="cy-panel-component"
+  [attr.id]="'cy-panel-component-' + panelId + '_' + type + '_' + putCode"
 >
   <!-- [EXPAND BUTTONS] FOR NESTED PANELS -->
   <ng-container
@@ -18,14 +18,24 @@
         (toggle)="toggle()"
         [openState]="openState"
         [panelType]="this.type"
-        id="cy-panel-component-expand-button"
+        [attr.id]="
+          'cy-panel-component-expand-button-' +
+          panelId +
+          '_' +
+          type +
+          '_' +
+          putCode
+        "
       ></app-panel-expand-buttons>
       <ng-container *ngTemplateOutlet="tempHeader"></ng-container>
     </div>
   </ng-container>
 
   <div *ngIf="selectable">
     <mat-checkbox
+      [aria-label]="
+        type | appPanelActivityActionAriaLabel: 'select':this.panelTitle
+      "
       class="text-wrap"
       *ngIf="(defaultPutCode === putCode || displayTheStack) && !isPublicRecord"
       (change)="checked($event)"
@@ -44,14 +54,19 @@
       <ng-container *ngTemplateOutlet="tempHeader"></ng-container>
     </ng-container>
   </div>
-  <div class="buttons-container" id="cy-buttons-container">
+  <div
+    class="buttons-container"
+    [attr.id]="'cy-buttons-container-' + panelId + '_' + type + '_' + putCode"
+  >
     <!-- [PRIVACY display] FOR `AFFILIATIONS`, `WORKS`, `FUNDINGS`  -->
     <ng-container
       *ngIf="visibility && !isPublicRecord && showVisibilityControl"
     >
       <ng-container *ngIf="visibilityError">
         <mat-icon
-          id="cy-inconsistency-issue"
+          [attr.id]="
+            'cy-inconsistency-issue-' + panelId + '_' + type + '_' + putCode
+          "
           class="large-material-icon error"
           [matTooltip]="tooltipLabelVisibilityError"
           >info</mat-icon
@@ -114,7 +129,7 @@
           [matTooltip]="tooltipLabelEdit"
           [attr.aria-label]="this.editModalComponent | editButtonAriaLabel"
           (click)="openModal()"
-          id="edit-button"
+          [attr.id]="'edit-button-' + panelId"
         >
           <mat-icon class="material-icons-outlined">edit</mat-icon>
         </button>

src/app/cdk/panel/panel/panel.component.ts

@@ -38,6 +38,7 @@ import { TogglzService } from '../../../core/togglz/togglz.service'
   styleUrls: ['./panel.component.scss', 'panel.component.scss-theme.scss'],
 })
 export class PanelComponent implements OnInit {
+  @Input() panelId
   @Input() showVisibilityControl = false
   @Input() stackSiblings: any[]
   @Input() stackedHeader = false

src/app/cdk/privacy-selector/privacy-selector/privacy-selector.component.html

@@ -1,6 +1,8 @@
 <div class="panel" [ngClass]="{ 'white-background': whiteBackground }">
   <button
-    aria-label="limited public"
+    [attr.aria-label]="
+      ariaLabelPublic + (privacy === 'PUBLIC' ? ariaLabelCurrentlySelected : '')
+    "
     mat-icon-button
     (click)="public()"
     [ngClass]="{
@@ -32,6 +34,10 @@
   </button>
   <button
     aria-label="visibility limited"
+    [attr.aria-label]="
+      ariaLabelTrustedParty +
+      (privacy === 'LIMITED' ? ariaLabelCurrentlySelected : '')
+    "
     mat-icon-button
     (click)="limited()"
     [ngClass]="{
@@ -56,6 +62,10 @@
   </button>
   <button
     aria-label="visibility private"
+    [attr.aria-label]="
+      ariaLabelPrivate +
+      (privacy === 'PRIVATE' ? ariaLabelCurrentlySelected : '')
+    "
     mat-icon-button
     (click)="private()"
     class="private-button"
@@ -79,6 +89,7 @@
     </svg>
   </button>
 </div>
+
 <div class="hide">
   <div
     class="privacy-selector orc-font-body-small"

src/app/cdk/privacy-selector/privacy-selector/privacy-selector.component.ts

@@ -24,6 +24,29 @@ import { VisibilityStrings } from 'src/app/types/common.endpoint'
   ],
 })
 export class PrivacySelectorComponent implements OnInit, ControlValueAccessor {
+  ariaLabelPublic = $localize`:@@share.ariaLabelPublic:set item visibility to Everyone`
+  ariaLabelTrustedParty = $localize`:@@share.ariaLabelTrustedParty:set item visibility to Trusted Parties `
+  ariaLabelPrivate = $localize`:@@share.ariaLabelPrivate:set item visibility to Only Me`
+  ariaLabelCurrentlySelected = $localize`:@@share.currentSelected: (Currently selected)`
+
+  @Input() type:
+    | 'top-bar'
+    | 'side-bar'
+    | 'affiliations'
+    | 'employment'
+    | 'education'
+    | 'qualification'
+    | 'invited-position'
+    | 'distinction'
+    | 'membership'
+    | 'service'
+    | 'peer-review'
+    | 'main'
+    | 'works'
+    | 'activities'
+    | 'funding'
+    | 'research-resources'
+
   private onChange: (value: string) => void
   private onTouched: (value: string) => void
   @Input() whiteBackground = false

src/app/cdk/side-bar/side-bar-id/side-bar-id.component.html

@@ -31,6 +31,7 @@
   </div>
   <a
     [href]="id"
+    [attr.aria-label]="labelPreviewRecord"
     target="_blank"
     rel="noopener noreferrer"
     class="preview orc-font-small-print"

src/app/cdk/side-bar/side-bar-id/side-bar-id.component.ts

@@ -14,6 +14,7 @@ import { WINDOW } from '../../window'
   ],
 })
 export class SideBarIdComponent implements OnInit, OnDestroy {
+  labelPreviewRecord = $localize`:@@record.ariaLabelPreviewPublicRecord:Preview the public version of this record (Opens in a new tab)`
   $destroy: Subject<boolean> = new Subject<boolean>()
   labelPreviewPublicRecord = $localize`:@@record.ariaLabelpreviewPublicRecord:Preview the public version of this record (Opens in a new tab)`
   environment = environment

src/app/cdk/side-bar/side-bar/side-bar.component.html

@@ -18,6 +18,7 @@ <h2 class="sr-only" i18n="@@shared.personalInformation">
 
   <ng-container *ngIf="!orcidId">
     <app-panel
+      panelId="emails-panel"
       expandButtonsPosition="right"
       [isPublicRecord]="isPublicRecord"
       [elements]="userRecord.emails.emails"
@@ -58,6 +59,7 @@ <h3 header class="orc-font-body" i18n="@@shared.emails">Emails</h3>
     </app-panel>
 
     <app-panel
+      panelId="websites-panel"
       expandButtonsPosition="right"
       [elements]="userRecord.website.websites"
       [editModalComponent]="modalWebsitesComponent"
@@ -82,6 +84,7 @@ <h3 header class="orc-font-body" i18n="@@record.websitesAndSocialLinks">
           *ngFor="let website of userRecord.website.websites; let last = last"
           [visibility]="!isPublicRecord && website.visibility.visibility"
           ><a
+            tabindex="-1"
             [href]="website.url.value"
             [ngClass]="{
               'orc-font-body-small': getWebsite(website).length > 20
@@ -106,6 +109,7 @@ <h3 header class="orc-font-body" i18n="@@record.websitesAndSocialLinks">
     </app-panel>
 
     <app-panel
+      panelId="personal-identifiers-panel"
       expandButtonsPosition="right"
       *ngIf="
         userRecord?.externalIdentifier?.externalIdentifiers &&
@@ -135,6 +139,7 @@ <h3 header class="orc-font-body" i18n="@@record.otherIds">Other IDs</h3>
             !isPublicRecord && externalIdentifier.visibility.visibility
           "
           ><a
+            tabindex="-1"
             [href]="externalIdentifier.url"
             target="_blank"
             rel="me nofollow noopener noreferrer"
@@ -160,6 +165,7 @@ <h3 header class="orc-font-body" i18n="@@record.otherIds">Other IDs</h3>
       </app-panel-data>
     </app-panel>
     <app-panel
+      panelId="keywords-panel"
       expandButtonsPosition="right"
       *ngIf="
         userRecord?.keyword?.keywords &&
@@ -228,6 +234,7 @@ <h3 header class="orc-font-body" i18n="@@record.keywords">Keywords</h3>
       </app-panel-data>
     </app-panel>
     <app-panel
+      panelId="countries-panel"
       expandButtonsPosition="right"
       *ngIf="
         userRecord?.countries?.addresses &&