fix: Improve social icons accessibility text

ORCID · May 20, 2024 · c6bd9df · c6bd9df
1 parent 2ddbae9
commit c6bd9df
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/src/app/layout/footer/footer.component.html b/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>

diff --git a/src/app/layout/footer/footer.component.ts b/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,

diff --git a/src/locale/properties/layout/layout.en.properties b/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...