Skip to content

Commit bb21f27

Browse files
cryptalithcryptalith
authored
8560-page-titles-accessibility (#1993)
* 8560-page-titles-accessibility * Fix testing
1 parent 7573bfc commit bb21f27

13 files changed

Lines changed: 231 additions & 5 deletions

‎src/app/app.component.spec.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { ErrorHandlerService } from './core/error-handler/error-handler.service'
1515
import { SnackbarService } from './cdk/snackbar/snackbar.service'
1616
import { MatSnackBar } from '@angular/material/snack-bar'
1717
import { Overlay } from '@angular/cdk/overlay'
18+
import { TitleService } from './core/title-service/title.service'
19+
import { of } from 'rxjs'
1820
describe('AppComponent', () => {
1921
beforeEach(() => {
2022
TestBed.configureTestingModule({
@@ -28,6 +30,12 @@ describe('AppComponent', () => {
2830
MatSnackBar,
2931
MatDialog,
3032
Overlay,
33+
{
34+
provide: TitleService,
35+
useValue: {
36+
init: () => of({}),
37+
},
38+
},
3139
],
3240
}).compileComponents()
3341
})

‎src/app/app.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
import { ERROR_REPORT } from './errors'
1818
import { ErrorHandlerService } from './core/error-handler/error-handler.service'
1919
import { environment } from 'src/environments/environment'
20+
import { TitleService } from './core/title-service/title.service'
2021

2122
@Component({
2223
selector: 'app-root',
@@ -48,8 +49,10 @@ export class AppComponent {
4849
_zendesk: ZendeskService,
4950
private _userService: UserService,
5051
private _errorHandler: ErrorHandlerService,
51-
@Inject(WINDOW) private _window: Window
52+
@Inject(WINDOW) private _window: Window,
53+
_titleService: TitleService
5254
) {
55+
_titleService.init()
5356
_platformInfo
5457
.get()
5558
.pipe(

‎src/app/app.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { CoreModule } from './core/core.module'
1010
import { LayoutModule } from './layout/layout.module'
1111
import { BidiModule } from '@angular/cdk/bidi'
1212
import { PseudoModule } from 'src/locale/i18n.pseudo.component'
13+
import { TitleService } from './core/title-service/title.service'
1314

1415
@NgModule({
1516
declarations: [AppComponent],
@@ -24,7 +25,7 @@ import { PseudoModule } from 'src/locale/i18n.pseudo.component'
2425
// Environmental dependent modules
2526
environment.SHOW_TEST_WARNING_BANNER ? EnvironmentBannerModule : [],
2627
],
27-
providers: [],
28+
providers: [TitleService],
2829
bootstrap: [AppComponent],
2930
})
3031
export class AppModule {

‎src/app/constants.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,34 @@ export const ApplicationRoutes = {
103103
home: '',
104104
}
105105

106+
export const ApplicationRoutesLabels = {
107+
[ApplicationRoutes.home]: $localize`:@@share.titleOrcid:ORCID`,
108+
[ApplicationRoutes.myOrcid]: '{dynamic}',
109+
[ApplicationRoutes.twoFactor]: $localize`:@@share.twoFactor:2FA - ORCID`,
110+
[ApplicationRoutes.twoFactorSetup]: $localize`:@@share.twoFactorSetup:2FA - ORCID`,
111+
[ApplicationRoutes.institutionalLinking]: $localize`:@@share.institutionalLinking:Institutional linking - ORCID`,
112+
[ApplicationRoutes.social]: $localize`:@@share.social:Social linking - ORCID`,
113+
[ApplicationRoutes.institutional]: $localize`:@@share.institutional:Institutional sign in - ORCID`,
114+
[ApplicationRoutes.inbox]: $localize`:@@share.inbox:Notifications inbox - ORCID`,
115+
[ApplicationRoutes.login]: $localize`:@@share.login:Sign in - ORCID`,
116+
[ApplicationRoutes.signin]: $localize`:@@share.signin:Sign in - ORCID`,
117+
[ApplicationRoutes.authorize]: $localize`:@@share.authorize:Oauth - ORCID`,
118+
[ApplicationRoutes.search]: $localize`:@@share.search:Search - ORCID`,
119+
[ApplicationRoutes.reactivation]: $localize`:@@share.reactivation:Account reactivation - ORCID`,
120+
[ApplicationRoutes.resetPassword]: $localize`:@@share.resetPassword:Reset password - ORCID`,
121+
[ApplicationRoutes.register]: $localize`:@@share.register:Register - ORCID`,
122+
[ApplicationRoutes.thirdPartySignIn]: $localize`:@@share.thirdPartySignIn:Sign in - ORCID`,
123+
[ApplicationRoutes.account]: $localize`:@@share.account:Account settings - ORCID`,
124+
[ApplicationRoutes.trustedParties]: $localize`:@@share.trustedParties:Trusted parties - ORCID `,
125+
[ApplicationRoutes.resetPasswordEmail]: $localize`:@@share.resetPasswordEmail:Reset password - ORCID`,
126+
[ApplicationRoutes.selfService]: $localize`:@@share.selfService:Self Service - ORCID`,
127+
}
128+
129+
export const ApplicationDynamicRoutesLabels = {
130+
orcidPageTitle: $localize`:@@share.orcidTitle:- ORCID`,
131+
orcidMyPageTitle: $localize`:@@share.myOrcidTitle:- My ORCID`,
132+
}
133+
106134
export const HeadlessOnOauthRoutes = [
107135
ApplicationRoutes.twoFactor,
108136
ApplicationRoutes.twoFactorSetup,

‎src/app/core/open-graph/open-graph.service.spec.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@ describe('OpenGraphService', () => {
66
let service: OpenGraphService
77

88
beforeEach(() => {
9-
TestBed.configureTestingModule({})
9+
TestBed.configureTestingModule({
10+
providers: [
11+
{
12+
provide: OpenGraphService,
13+
useValue: {},
14+
},
15+
],
16+
})
1017
service = TestBed.inject(OpenGraphService)
1118
})
1219

‎src/app/core/open-graph/open-graph.service.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Meta, Title } from '@angular/platform-browser'
33
import { NamesEndPoint } from 'src/app/types/record-name.endpoint'
44
import { UserRecord } from 'src/app/types/record.local'
55
import { environment } from 'src/environments/environment'
6+
import { TitleService } from '../title-service/title.service'
67

78
@Injectable({
89
providedIn: 'root',
@@ -19,7 +20,7 @@ export class OpenGraphService {
1920
private usernameMeta = 'profile:username'
2021
private siteNameMeta = 'og:site_name'
2122

22-
constructor(private meta: Meta, private _titleService: Title) {}
23+
constructor(private meta: Meta, private _titleService: TitleService) {}
2324

2425
addOpenGraphData(
2526
record: UserRecord,
@@ -43,7 +44,7 @@ export class OpenGraphService {
4344
displayedNameWithId !== undefined &&
4445
displayedNameWithId !== 'undefined'
4546
) {
46-
this._titleService.setTitle(displayedNameWithId)
47+
this._titleService.setDisplayName(displayedNameWithId)
4748
}
4849
return this.meta.addTags([
4950
{ property: this.titleMeta, content: displayedNameWithId },

‎src/app/core/title-service/title.service.spec.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { TestBed } from '@angular/core/testing'
2+
3+
import { TitleService } from './title.service'
4+
5+
describe('TitleServiceService', () => {
6+
let service: TitleService
7+
8+
beforeEach(() => {
9+
TestBed.configureTestingModule({
10+
providers: [
11+
{
12+
provide: TitleService,
13+
useValue: {},
14+
},
15+
],
16+
})
17+
service = TestBed.inject(TitleService)
18+
})
19+
20+
it('should be created', () => {
21+
expect(service).toBeTruthy()
22+
})
23+
})

‎src/app/core/title-service/title.service.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { Injectable, OnInit } from '@angular/core'
2+
import { Title } from '@angular/platform-browser'
3+
import { NavigationEnd, NavigationStart, Router } from '@angular/router'
4+
import { log } from 'console'
5+
import { ReplaySubject, combineLatest } from 'rxjs'
6+
import { filter, map, withLatestFrom } from 'rxjs/operators'
7+
import {
8+
ApplicationDynamicRoutesLabels,
9+
ApplicationRoutes,
10+
ApplicationRoutesLabels,
11+
ORCID_REGEXP,
12+
} from 'src/app/constants'
13+
14+
@Injectable()
15+
export class TitleService {
16+
private _displayName: ReplaySubject<string> = new ReplaySubject<string>(1)
17+
18+
constructor(private _titleService: Title, private _router: Router) {}
19+
20+
init() {
21+
this._displayName.next('')
22+
combineLatest([
23+
this._router.events.pipe(
24+
filter((event) => event instanceof NavigationEnd),
25+
map((event: NavigationEnd) => event as NavigationEnd)
26+
),
27+
this._displayName.asObservable(),
28+
]).subscribe(([event, dynamicTitle]) => {
29+
// PUBLIC PAGE
30+
if (
31+
!event?.url.startsWith('/my-orcid') &&
32+
ORCID_REGEXP.test(event?.url) &&
33+
dynamicTitle
34+
) {
35+
this.setTitle(
36+
`${dynamicTitle} ${ApplicationDynamicRoutesLabels.orcidPageTitle}`
37+
)
38+
} else {
39+
Object.keys(ApplicationRoutesLabels).forEach((route) => {
40+
if (event.url.startsWith('/' + route)) {
41+
// MY ORCID
42+
if (
43+
ApplicationRoutesLabels[route] === '{dynamic}' &&
44+
dynamicTitle
45+
) {
46+
this.setTitle(
47+
`${dynamicTitle} ${ApplicationDynamicRoutesLabels.orcidMyPageTitle}`
48+
)
49+
} else {
50+
// OTHER PAGES
51+
this.setTitle(ApplicationRoutesLabels[route])
52+
}
53+
}
54+
})
55+
}
56+
})
57+
}
58+
59+
setTitle(title: string) {
60+
if (title) this._titleService.setTitle(title)
61+
}
62+
63+
setDisplayName(displayedNameWithId: string) {
64+
this._displayName.next(displayedNameWithId)
65+
}
66+
}

‎src/app/record/pages/my-orcid/my-orcid.component.spec.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { getUserRecord } from '../../../core/record/record.service.spec'
2323
import { getUserSession } from '../../../core/user/user.service.spec'
2424
import { RecordPublicSideBarService } from '../../../core/record-public-side-bar/record-public-side-bar.service'
2525
import { getSideBarPublicUserRecord } from '../../../core/record-public-side-bar/record-public-side-bar.service.spec'
26+
import { OpenGraphService } from 'src/app/core/open-graph/open-graph.service'
2627

2728
describe('MyOrcidComponent', () => {
2829
let component: MyOrcidComponent
@@ -55,6 +56,10 @@ describe('MyOrcidComponent', () => {
5556
MatSnackBar,
5657
MatDialog,
5758
Overlay,
59+
{
60+
provide: OpenGraphService,
61+
useValue: {},
62+
}
5863
],
5964
}).compileComponents()
6065
})

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -576,3 +576,24 @@ shared.setVisibilityFor=Set visibility for
576576
shared.ariaLabelWork=Work
577577
shared.addInvitedPositionsMemberships=Add the invited positions or memberships you have held, awards or prizes you have received, and donations of time and resources given in service of organizations or institutions.
578578
shared.learnMoreProfessionalActivities=Learn more about adding professional activities to your ORCID record
579+
share.titleOrcid=ORCID
580+
share.twoFactor=2FA - ORCID
581+
share.twoFactorSetup=2FA - ORCID
582+
share.institutionalLinking=Institutional linking - ORCID
583+
share.social=Social linking - ORCID
584+
share.institutional=Institutional sign in - ORCID
585+
share.inbox=Notifications inbox - ORCID
586+
share.login=Sign in - ORCID
587+
share.signin=Sign in - ORCID
588+
share.authorize=Oauth - ORCID
589+
share.search=Search - ORCID
590+
share.reactivation=Account reactivation - ORCID
591+
share.resetPassword=Reset password - ORCID
592+
share.register=Register - ORCID
593+
share.thirdPartySignIn=Sign in - ORCID
594+
share.account=Account settings - ORCID
595+
share.trustedParties=Trusted parties - ORCID
596+
share.resetPasswordEmail=Reset password - ORCID
597+
share.selfService=Self Service - ORCID
598+
share.orcidTitle=- ORCID
599+
share.myOrcidTitle=- My ORCID

0 commit comments

Comments
 (0)