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
ORCID · Dec 9, 2022 · 17d8f5a · 17d8f5a
1 parent 23fda7e
commit 17d8f5a
Show file tree

Hide file tree

Showing 45 changed files with 171 additions and 33 deletions.
diff --git a/src/app/cdk/panel/panel-source/panel-source.component.html b/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>

diff --git a/src/app/cdk/panel/panel-source/panel-source.component.ts b/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

diff --git a/src/app/cdk/panel/panel.module.ts b/src/app/cdk/panel/panel.module.ts
@@ -51,6 +51,7 @@ import { SharedModule } from '../../shared/shared.module'
     FormsModule,
     MatProgressBarModule,
     SharedModule,
+    A11yLinkModule,
   ],
   exports: [
     PanelComponent,

diff --git a/src/app/cdk/panel/panel/panel.component.html b/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>

diff --git a/src/app/cdk/panel/panel/panel.component.ts b/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

diff --git a/src/app/cdk/privacy-selector/privacy-selector/privacy-selector.component.html b/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"

diff --git a/src/app/cdk/privacy-selector/privacy-selector/privacy-selector.component.ts b/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

diff --git a/src/app/cdk/side-bar/side-bar-id/side-bar-id.component.html b/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"

diff --git a/src/app/cdk/side-bar/side-bar-id/side-bar-id.component.ts b/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

diff --git a/src/app/cdk/side-bar/side-bar/side-bar.component.html b/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 &&

diff --git a/src/app/cdk/side-bar/side-bar/side-bar.component.ts b/src/app/cdk/side-bar/side-bar/side-bar.component.ts
@@ -28,6 +28,12 @@ import { ModalWebsitesComponent } from '../modals/modal-websites/modal-websites.
   ],
 })
 export class SideBarComponent implements OnInit, OnDestroy {
+  labelManageYourEmails = $localize`:"@@record.manageYourEmails:Manage your emails`
+  labelManageYourWebsites = $localize`:"@@record.manageYourWebsite:Manage your websites & social links`
+  labelManageYourKeyword = $localize`:"@@record.labelManageYourKeyword:Manage your keywords`
+  labelManageYourCountries = $localize`:"@@record.labelManageYourCountries:Manage your countries`
+  labelManageYourPersonalIds = $localize`:"@@record.labelManageYourPersonalIds:Manage your personalIds`
+
   $destroy: Subject<boolean> = new Subject<boolean>()
 
   @Input() isPublicRecord: string

diff --git a/...-preview/top-bar-my-public-record-preview/top-bar-my-public-record-preview.component.html b/...-preview/top-bar-my-public-record-preview/top-bar-my-public-record-preview.component.html
@@ -52,7 +52,6 @@
 
   <div class="container">
     <div class="content">
-      <mat-icon class="margin-end">preview</mat-icon>
       <div
         class="margin-end"
         i18n="@@topBar.youAreManaging"

diff --git a/src/app/cdk/trusted-individuals-dropdown/trusted-individuals-dropdown.component.html b/src/app/cdk/trusted-individuals-dropdown/trusted-individuals-dropdown.component.html
@@ -7,12 +7,12 @@
   >Switch to another account</a
 >
 
-<mat-menu #menu="matMenu" class="mat-body-1 trusted-individuals">
-  <strong
-    class="header text-container"
-    i18n="@@delegators.switchAccount"
-    [attr.aria-label]="labelSwitchAccount"
-  >
+<mat-menu
+  #menu="matMenu"
+  class="mat-body-1 trusted-individuals"
+  [attr.aria-label]="labelSwitchAccount"
+>
+  <strong class="header text-container" i18n="@@delegators.switchAccount">
     Switch to another account
   </strong>
   <div class="text-container" *ngIf="delegators?.length">

diff --git a/src/app/constants.ts b/src/app/constants.ts
@@ -48,6 +48,7 @@ export const ITEM_ACTION_EDIT = 'edit'
 export const ITEM_ACTION_DELETE = 'delete'
 export const ITEM_ACTION_HIDE = 'hide'
 export const ITEM_ACTION_SHOW = 'show'
+export const ITEM_ACTION_SELECT = 'select'
 
 export const ApplicationRoutes = {
   myOrcid: 'my-orcid',

diff --git a/src/app/layout/language/language.component.html b/src/app/layout/language/language.component.html
@@ -18,6 +18,9 @@
   <div
     *ngFor="let language of languageMenuOptions | keyvalue"
     (click)="changeLanguage(language.key)"
+    mat-menu-item
+    [ngClass]="{ 'orcid-mat-menu-item-active': language.key === locale }"
+    class="orcid-menu-item-small"
   >
     <button
       mat-menu-item

diff --git a/src/app/layout/language/language.component.ts b/src/app/layout/language/language.component.ts
@@ -20,6 +20,7 @@ export class LanguageComponent implements OnInit {
     this.languageMenuOptions = environment.LANGUAGE_MENU_OPTIONS
     // LOCAL DEV GET'S `en-US` from locale but `en` is required
     this.locale = this.locale === 'en-US' ? 'en' : this.locale
+    this.labelLanguage += ` ${environment.LANGUAGE_MENU_OPTIONS[this.locale]}`
   }
 
   changeLanguage(languageKey: string) {

diff --git a/src/app/layout/search/search.component.html b/src/app/layout/search/search.component.html
@@ -35,13 +35,3 @@
     <mat-icon matSuffix>search</mat-icon>
   </button>
 </form>
-
-<mat-menu #menu="matMenu">
-  <button
-    mat-menu-item
-    *ngFor="let item of whereToSearch"
-    (click)="changeWhereToSearch(item)"
-  >
-    {{ item }}
-  </button>
-</mat-menu>
diff --git a/src/app/layout/user-menu/user-menu.component.html b/src/app/layout/user-menu/user-menu.component.html
@@ -7,7 +7,7 @@
     [matMenuTriggerFor]="menu"
     (menuOpened)="state = true"
     (menuClosed)="state = false"
-    [attr.aria-label]="labelUserMenu"
+    [attr.aria-label]="labelUserMenu + ' ' + displayName"
     id="cy-user-info"
   >
     <img src="./assets/vectors/profile-icon.svg" alt="" />

diff --git a/src/app/record/components/affiliation-stack/affiliation-stack.component.html b/src/app/record/components/affiliation-stack/affiliation-stack.component.html
@@ -9,6 +9,7 @@
   <!-- A PANEL COMPONENT FOR EACH AFFILIATION ON THE STACK -->
 
   <app-panel
+    panelId="affiliation-stack"
     [userRecord]="userRecord"
     [elements]="affiliation"
     [stackSiblings]="affiliationStack.affiliations"

diff --git a/src/app/record/components/funding-stack/funding-stack.component.html b/src/app/record/components/funding-stack/funding-stack.component.html
@@ -9,6 +9,7 @@
   <!-- A PANEL COMPONENT FOR EACH FUNDING ON THE STACK -->
 
   <app-panel
+    panelId="funding-stack"
     [userRecord]="userRecord"
     [stackSiblings]="fundingStack.fundings"
     [showVisibilityControl]="isPreferred(funding)"

diff --git a/src/app/record/components/peer-review-stack/peer-review-stack.component.html b/src/app/record/components/peer-review-stack/peer-review-stack.component.html
@@ -7,6 +7,7 @@
   "
 >
   <app-panel
+    panelId="peer-review"
     [elements]="subPeerReview"
     [type]="'top-bar'"
     [ngStyle]="{

diff --git a/src/app/record/components/peer-review-stacks-groups/peer-review-stacks-groups.component.html b/src/app/record/components/peer-review-stacks-groups/peer-review-stacks-groups.component.html
@@ -20,6 +20,7 @@
   >
     <ng-container *ngIf="peerReviews.length > 0">
       <app-panel
+        panelId="peer-review-stacks"
         class="top-bar"
         *ngFor="let peerReview of peerReviews"
         [elements]="peerReview"

diff --git a/src/app/record/components/research-resource-stack/research-resource-stack.component.html b/src/app/record/components/research-resource-stack/research-resource-stack.component.html
@@ -7,6 +7,7 @@
   "
 >
   <app-panel
+    panelId="research-resource-stack"
     [stackSiblings]="researchResourceStack.researchResources"
     [showVisibilityControl]="isPreferred(research)"
     class="top-bar"

diff --git a/src/app/record/components/research-resource/research-resource.component.html b/src/app/record/components/research-resource/research-resource.component.html
@@ -141,6 +141,7 @@ <h3 class="orc-font-body-small" i18n="@@shared.lastModified">
       </div>
       <div *ngFor="let item of researchDetail.items; index as i">
         <app-panel
+          panelId="research-resource"
           [elements]="item"
           [type]="'top-bar'"
           [editable]="false"