Merge pull request #2262 from ORCID/fix/fix/9179-accessible-text-for-…

…tabbable-items-is-missing-on-record-summary-1

fix: Add aria-label `opens in a new tab` to link in record summary to enhance accessibility

src/app/cdk/trusted-summary/component/summary-panel/summary-panel.component.html

@@ -73,7 +73,10 @@
           </svg>
         </a>
       </div>
-      <div class="body-wrapper">
+      <div
+        class="body-wrapper"
+        aria-hidden="true"
+      >
         <caption class="orc-font-small-print">
           <ng-container *ngIf="activity.startDate">
             {{ activity.startDate }}
@@ -115,6 +118,7 @@
       tabindex="0"
       (click)="goToActivitySection(activitySection)"
       (keydown)="goToActivitySection(activitySection, $event)"
+      [attr.aria-label]="ariaLabelMore"
       >+ {{ count - 3 }}
       <ng-container *ngIf="count - 3 === 1">{{
         moreLabelSingular

src/app/cdk/trusted-summary/component/summary-panel/summary-panel.component.ts

@@ -14,8 +14,6 @@ import { ActivitySummary } from 'src/app/types/trust-summary'
   preserveWhitespaces: true,
 })
 export class SummaryPanelComponent implements OnInit {
-  validatedSourceAriaLabel = $localize`:@@summary.validatedSource:Validated source`
-  selftAssertedSource = $localize`:@@summary.selfAssertedSource:Self-asserted source`
   @Input() activitySummary: ActivitySummary[]
   @Input() url: string = ''
   @Input() count: number = 0
@@ -29,6 +27,10 @@ export class SummaryPanelComponent implements OnInit {
   acitivityCountOverflow: boolean
   unsubscribe = new Subject()
 
+  validatedSourceAriaLabel = $localize`:@@summary.validatedSource:Validated source`
+  selftAssertedSource = $localize`:@@summary.selfAssertedSource:Self-asserted source`
+  ariaLabelMore: string
+
   constructor(@Inject(WINDOW) private _window: Window) {}
 
   ngOnDestroy(): void {
@@ -42,6 +44,14 @@ export class SummaryPanelComponent implements OnInit {
       this.activitiesToDisplay = this.activitySummary.slice(0, 3)
 
       this.acitivityCountOverflow = this.count > 3
+
+      if (this.standaloneMode) {
+        if (this.count - 3 > 1) {
+          this.ariaLabelMore = RecordUtil.appendOpensInNewTab(this.moreLabel)
+        } else {
+          this.ariaLabelMore = RecordUtil.appendOpensInNewTab(this.moreLabelSingular)
+        }
+      }
     }
   }
   goToUrl(url: string, event?: KeyboardEvent) {

src/app/cdk/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.html

@@ -91,6 +91,7 @@
       tabindex="0"
       (click)="goToActivitySection(activitySection)"
       (keydown)="goToActivitySection(activitySection, $event)"
+      [attr.aria-label]="ariaLabelActivitySection"
       >+ {{ count - 3 }}
       <ng-container *ngIf="count - 3 > 1">{{ moreLabel }}</ng-container>
       <ng-container *ngIf="count - 3 === 1">{{

src/app/cdk/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.ts

@@ -4,6 +4,7 @@ import { takeUntil } from 'rxjs/operators'
 import { PlatformInfoService } from 'src/app/cdk/platform-info'
 import { WINDOW } from 'src/app/cdk/window'
 import { RecordUtil } from 'src/app/shared/utils/record.util'
+import { TrustedSummary } from 'src/app/types/trust-summary'
 
 export interface SimpleActivityModel {
   verified?: boolean
@@ -24,8 +25,6 @@ export interface SimpleActivityModel {
   ],
 })
 export class SummarySimplePanelComponent implements OnInit {
-  validatedSourceAriaLabel = $localize`:@@summary.validatedSource:Validated source`
-  selfAssertedSource = $localize`:@@summary.selfAssertedSource:Self-asserted source`
   @Input() simpleActivities: SimpleActivityModel[] = []
   @Input() count: number = 0
   @Input() moreLabel: string = ''
@@ -34,15 +33,29 @@ export class SummarySimplePanelComponent implements OnInit {
   @Input() overflowUrl: string = ''
   @Input() standaloneMode: boolean
   @Input() activitySection: string
+  @Input() trustedSummary: TrustedSummary
 
   unsubscribe = new Subject()
   mobile: boolean
   acitivityCountOverflow = false
+  ariaLabelActivitySection: string
+
+  validatedSourceAriaLabel = $localize`:@@summary.validatedSource:Validated source`
+  selfAssertedSource = $localize`:@@summary.selfAssertedSource:Self-asserted source`
+
   constructor(@Inject(WINDOW) private _window: Window) {}
 
   ngOnInit(): void {
     this.acitivityCountOverflow = this.simpleActivities.length > 3
     this.simpleActivities = this.simpleActivities.slice(0, 3)
+
+    if (this.standaloneMode) {
+      if (this.count - 3 > 1) {
+        this.ariaLabelActivitySection = RecordUtil.appendOpensInNewTab(this.moreLabel)
+      } else {
+        this.ariaLabelActivitySection = RecordUtil.appendOpensInNewTab(this.moreLabelSingular)
+      }
+    }
   }
   goToUrl(url?: string, event?: KeyboardEvent) {
     if (!url) {

src/app/cdk/trusted-summary/component/trusted-summary/trusted-summary.component.html

@@ -334,6 +334,8 @@ <h3 class="orc-font-small-print" i18n="@@summary.keyDates">
           [hoverEffect]="externalIdentifiersHover"
           [standaloneMode]="standaloneMode"
           [activitySection]="'other-identifiers'"
+          [trustedSummary]="trustedSummary"
+          *ngIf="!trustedSummary"
         ></app-summary-simple-panel>
       </ng-container>
     </div>

src/app/cdk/trusted-summary/component/trusted-summary/trusted-summary.component.ts

@@ -77,6 +77,7 @@ export class TrustedSummaryComponent implements OnInit, OnDestroy {
   modifiedToday: boolean
   creationDateWithOffset: any
   lastUpdateDate: any
+  loading = false
 
   constructor(
     private _trustedSummary: TrustedSummaryService,
@@ -112,6 +113,8 @@ export class TrustedSummaryComponent implements OnInit, OnDestroy {
 
     this._trustedSummary.getSummary(this.orcid).subscribe((data) => {
       this.trustedSummary = data
+      this.loading = true
+
       if (this.trustedSummary.creation) {
         this.creationDateWithOffset = this.dateWithOffset(
           this.trustedSummary.creation
@@ -266,6 +269,11 @@ export class TrustedSummaryComponent implements OnInit, OnDestroy {
   }
 
   private getAriaLabelSection(section: string): string {
-    return `${section} ${this.trustedSummary.name} ${this.labelOrcidRecord}`
+    const ariaLabel = `${section} ${this.trustedSummary.name} ${this.labelOrcidRecord}`
+    if (this.standaloneMode) {
+      return RecordUtil.appendOpensInNewTab(ariaLabel)
+    }
+    return ariaLabel
   }
+
 }

src/app/layout/footer/footer.component.html

@@ -23,35 +23,35 @@
           <img
             src="./assets/vectors/social/Linkedin.svg"
             class="social"
-            alt="Linkedin"
+            alt="{{linkedin}}"
           />
         </a>
         <a href="https://www.facebook.com/ORCID.org">
           <img
             src="./assets/vectors/social/Facebook.svg"
             class="social"
-            alt="Facebook"
+            alt="{{facebook}}"
           />
         </a>
         <a href="https://scicomm.xyz/@ORCID_Org">
           <img
             src="./assets/vectors/social/Mastodon.svg"
             class="social"
-            alt="Mastodon"
+            alt="{{mastodon}}"
           />
         </a>
         <a href="https://vimeo.com/orcidvideos">
           <img
             src="./assets/vectors/social/Vimeo.svg"
             class="social"
-            alt="Vimeo"
+            alt="{{vimeo}}"
           />
         </a>
         <a href="https://www.youtube.com/@orcid_org">
           <img
             src="./assets/vectors/social/Youtube.svg"
             class="social"
-            alt="Youtube"
+            alt="{{youtube}}"
           />
         </a>
         <a href="{{ infoSiteBaseUrl }}blog/feed" class="social">
@@ -61,14 +61,14 @@
           <img
             src="./assets/vectors/social/Github.svg"
             class="social"
-            alt="Github"
+            alt="{{github}}"
           />
         </a>
         <a href="https://twitter.com/orcid_org">
           <img
             src="./assets/vectors/social/Twitter.svg"
             class="social"
-            alt="Twitter"
+            alt="{{twitter}}"
           />
         </a>
       </div>

src/app/layout/footer/footer.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Inject } from '@angular/core'
 import { PlatformInfoService } from 'src/app/cdk/platform-info'
 import { WINDOW } from 'src/app/cdk/window'
 import { environment } from '../../../environments/environment'
+import { RecordUtil } from 'src/app/shared/utils/record.util'
 
 @Component({
   selector: 'app-footer',
@@ -17,7 +18,16 @@ export class FooterComponent implements OnInit {
   isTablet = false
   isMobile = false
 
-  license = $localize`:@@footer.ariaLabelLicense:license (opens in new tab)`
+  license = RecordUtil.appendOpensInNewTab($localize`:@@footer.ariaLabelLicense:license`)
+  linkedin = RecordUtil.appendOpensInNewTab('Linkedin')
+  facebook = RecordUtil.appendOpensInNewTab('Facebook')
+  mastodon = RecordUtil.appendOpensInNewTab('Mastodon')
+  vimeo = RecordUtil.appendOpensInNewTab('Vimeo')
+  youtube = RecordUtil.appendOpensInNewTab('Youtube')
+  rss = RecordUtil.appendOpensInNewTab('RSS')
+  github = RecordUtil.appendOpensInNewTab('Github')
+  twitter = RecordUtil.appendOpensInNewTab('Twitter')
+
 
   constructor(
     _platformInfo: PlatformInfoService,

src/app/record/components/record-header/record-header.component.html

@@ -207,6 +207,7 @@ <h2 class="orc-font-body-large" i18n="@@summary.recordSummary">
         target="_blank"
         rel="noopener"
         i18n="@@summary.findOutMoreAboutRecordSummaries"
+        [attr.aria-label]="ariaLabelFindoutMore"
         >Find out more about record summaries</a
       >
       <svg

src/app/record/components/record-header/record-header.component.ts

@@ -36,6 +36,8 @@ export class RecordHeaderComponent implements OnInit {
   @Input() newRecordHeaderWithSummaryTogglz: boolean
   _recordSummaryOpen: boolean
 
+  ariaLabelFindoutMore = RecordUtil.appendOpensInNewTab($localize`:@@summary.findOutMoreAboutRecordSummaries:Find out more about record summaries`)
+
   @Input()
   set recordSummaryOpen(value: boolean) {
     this._recordSummaryOpen = value

src/app/shared/utils/record.util.ts

@@ -117,4 +117,8 @@ export class RecordUtil {
       }
     }
   }
+
+  static appendOpensInNewTab(ariaLabel: string): string {
+    return `${ariaLabel} ${$localize`:@@shared.opensInNewTab:(opens in a new tab)`}`
+  }
 }

src/locale/properties/layout/layout.en.properties

@@ -111,6 +111,6 @@ layout.searchTitle=Search
 layout.howManyPeopleAreUsingORCID=How many people are using ORCID?
 footer.contactSupport=Contact support
 footer.cookieSettings=Cookie Settings
-footer.ariaLabelLicense=license (opens in new tab)
+footer.ariaLabelLicense=license
 layout.ariaLabelConnectingResearchers=Connecting research and researchers
 layout.ariaLabelSearchRegistry=Search the ORCID registry...

src/locale/properties/shared/shared.en.properties

@@ -635,3 +635,4 @@ shared.professionalActivitiesSortSource=Sort professional activities by source
 shared.worksSortSource=Sort works by source
 shared.showDetailsFor=Show details for
 shared.hideDetailsFor=Hide details for
+shared.opensInNewTab=(opens in a new tab)

src/locale/properties/shared/shared.lr.properties

@@ -662,3 +662,4 @@ shared.useOrganizationName=LR
 shared.addLocationManually=LR
 shared.organizationWithIdentifiers=LR
 shared.selectCountryOrLocation=LR
+shared.opensInNewTab=LR

src/locale/properties/shared/shared.rl.properties

@@ -658,3 +658,4 @@ shared.useOrganizationName=RL
 shared.addLocationManually=RL
 shared.organizationWithIdentifiers=RL
 shared.selectCountryOrLocation=RL
+shared.opensInNewTab=RL

src/locale/properties/shared/shared.xx.properties

@@ -658,3 +658,4 @@ shared.useOrganizationName=X
 shared.addLocationManually=X
 shared.organizationWithIdentifiers=X
 shared.selectCountryOrLocation=X
+shared.opensInNewTab=X