Skip to content

Commit 17d8f5a

Browse files
cryptalithcryptalith
authored
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
1 parent 23fda7e commit 17d8f5a

File tree

45 files changed

+171
-33
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+171
-33
lines changed

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,14 @@
3737
<a
3838
*ngIf="!displayTheStack && stackLength > 1"
3939
(click)="toggleStackMode()"
40+
[attr.aria-label]="openOtherSources"
4041
>
4142
(<ng-container i18n="@@shared.of">of</ng-container>
4243
{{ stackLength }})&#x200E;
4344
</a>
4445
<a
4546
(click)="toggleStackMode()"
47+
[attr.aria-label]="closeOtherSources"
4648
*ngIf="stackLength > 1 && displayTheStack"
4749
>
4850
<ng-container i18n="@@shared.closeOtherSources"
@@ -56,11 +58,7 @@
5658
class="preferred-source"
5759
*ngIf="!isPreferred && stackLength > 1 && !isPublicRecord"
5860
>
59-
<a
60-
(click)="clickMakePrimary()"
61-
*ngIf="stackLength > 1"
62-
i18n="@@record.closeOtherSources"
63-
>
61+
<a (click)="clickMakePrimary()" *ngIf="stackLength > 1">
6462
Make preferred source
6563
</a>
6664
</div>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ import { VerificationEmailModalService } from 'src/app/core/verification-email-m
1717
preserveWhitespaces: true,
1818
})
1919
export class PanelSourceComponent implements OnInit {
20+
closeOtherSources = $localize`:@@record.closeOtherSources:Close other sources`
21+
openOtherSources = $localize`:@@record.openOtherSources:Open other sources`
22+
2023
@Input() isPublicRecord
2124
@Input() isPreferred = true
2225
@Input() sourceName

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ import { SharedModule } from '../../shared/shared.module'
5151
FormsModule,
5252
MatProgressBarModule,
5353
SharedModule,
54+
A11yLinkModule,
5455
],
5556
exports: [
5657
PanelComponent,

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

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
'staked-header': stackedHeader,
88
'expand-button': !editable && !isPublicRecord && !customControls
99
}"
10-
id="cy-panel-component"
10+
[attr.id]="'cy-panel-component-' + panelId + '_' + type + '_' + putCode"
1111
>
1212
<!-- [EXPAND BUTTONS] FOR NESTED PANELS -->
1313
<ng-container
@@ -18,14 +18,24 @@
1818
(toggle)="toggle()"
1919
[openState]="openState"
2020
[panelType]="this.type"
21-
id="cy-panel-component-expand-button"
21+
[attr.id]="
22+
'cy-panel-component-expand-button-' +
23+
panelId +
24+
'_' +
25+
type +
26+
'_' +
27+
putCode
28+
"
2229
></app-panel-expand-buttons>
2330
<ng-container *ngTemplateOutlet="tempHeader"></ng-container>
2431
</div>
2532
</ng-container>
2633

2734
<div *ngIf="selectable">
2835
<mat-checkbox
36+
[aria-label]="
37+
type | appPanelActivityActionAriaLabel: 'select':this.panelTitle
38+
"
2939
class="text-wrap"
3040
*ngIf="(defaultPutCode === putCode || displayTheStack) && !isPublicRecord"
3141
(change)="checked($event)"
@@ -44,14 +54,19 @@
4454
<ng-container *ngTemplateOutlet="tempHeader"></ng-container>
4555
</ng-container>
4656
</div>
47-
<div class="buttons-container" id="cy-buttons-container">
57+
<div
58+
class="buttons-container"
59+
[attr.id]="'cy-buttons-container-' + panelId + '_' + type + '_' + putCode"
60+
>
4861
<!-- [PRIVACY display] FOR `AFFILIATIONS`, `WORKS`, `FUNDINGS` -->
4962
<ng-container
5063
*ngIf="visibility && !isPublicRecord && showVisibilityControl"
5164
>
5265
<ng-container *ngIf="visibilityError">
5366
<mat-icon
54-
id="cy-inconsistency-issue"
67+
[attr.id]="
68+
'cy-inconsistency-issue-' + panelId + '_' + type + '_' + putCode
69+
"
5570
class="large-material-icon error"
5671
[matTooltip]="tooltipLabelVisibilityError"
5772
>info</mat-icon
@@ -114,7 +129,7 @@
114129
[matTooltip]="tooltipLabelEdit"
115130
[attr.aria-label]="this.editModalComponent | editButtonAriaLabel"
116131
(click)="openModal()"
117-
id="edit-button"
132+
[attr.id]="'edit-button-' + panelId"
118133
>
119134
<mat-icon class="material-icons-outlined">edit</mat-icon>
120135
</button>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import { TogglzService } from '../../../core/togglz/togglz.service'
3838
styleUrls: ['./panel.component.scss', 'panel.component.scss-theme.scss'],
3939
})
4040
export class PanelComponent implements OnInit {
41+
@Input() panelId
4142
@Input() showVisibilityControl = false
4243
@Input() stackSiblings: any[]
4344
@Input() stackedHeader = false

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<div class="panel" [ngClass]="{ 'white-background': whiteBackground }">
22
<button
3-
aria-label="limited public"
3+
[attr.aria-label]="
4+
ariaLabelPublic + (privacy === 'PUBLIC' ? ariaLabelCurrentlySelected : '')
5+
"
46
mat-icon-button
57
(click)="public()"
68
[ngClass]="{
@@ -32,6 +34,10 @@
3234
</button>
3335
<button
3436
aria-label="visibility limited"
37+
[attr.aria-label]="
38+
ariaLabelTrustedParty +
39+
(privacy === 'LIMITED' ? ariaLabelCurrentlySelected : '')
40+
"
3541
mat-icon-button
3642
(click)="limited()"
3743
[ngClass]="{
@@ -56,6 +62,10 @@
5662
</button>
5763
<button
5864
aria-label="visibility private"
65+
[attr.aria-label]="
66+
ariaLabelPrivate +
67+
(privacy === 'PRIVATE' ? ariaLabelCurrentlySelected : '')
68+
"
5969
mat-icon-button
6070
(click)="private()"
6171
class="private-button"
@@ -79,6 +89,7 @@
7989
</svg>
8090
</button>
8191
</div>
92+
8293
<div class="hide">
8394
<div
8495
class="privacy-selector orc-font-body-small"

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,29 @@ import { VisibilityStrings } from 'src/app/types/common.endpoint'
2424
],
2525
})
2626
export class PrivacySelectorComponent implements OnInit, ControlValueAccessor {
27+
ariaLabelPublic = $localize`:@@share.ariaLabelPublic:set item visibility to Everyone`
28+
ariaLabelTrustedParty = $localize`:@@share.ariaLabelTrustedParty:set item visibility to Trusted Parties `
29+
ariaLabelPrivate = $localize`:@@share.ariaLabelPrivate:set item visibility to Only Me`
30+
ariaLabelCurrentlySelected = $localize`:@@share.currentSelected: (Currently selected)`
31+
32+
@Input() type:
33+
| 'top-bar'
34+
| 'side-bar'
35+
| 'affiliations'
36+
| 'employment'
37+
| 'education'
38+
| 'qualification'
39+
| 'invited-position'
40+
| 'distinction'
41+
| 'membership'
42+
| 'service'
43+
| 'peer-review'
44+
| 'main'
45+
| 'works'
46+
| 'activities'
47+
| 'funding'
48+
| 'research-resources'
49+
2750
private onChange: (value: string) => void
2851
private onTouched: (value: string) => void
2952
@Input() whiteBackground = false

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
</div>
3232
<a
3333
[href]="id"
34+
[attr.aria-label]="labelPreviewRecord"
3435
target="_blank"
3536
rel="noopener noreferrer"
3637
class="preview orc-font-small-print"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { WINDOW } from '../../window'
1414
],
1515
})
1616
export class SideBarIdComponent implements OnInit, OnDestroy {
17+
labelPreviewRecord = $localize`:@@record.ariaLabelPreviewPublicRecord:Preview the public version of this record (Opens in a new tab)`
1718
$destroy: Subject<boolean> = new Subject<boolean>()
1819
labelPreviewPublicRecord = $localize`:@@record.ariaLabelpreviewPublicRecord:Preview the public version of this record (Opens in a new tab)`
1920
environment = environment

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ <h2 class="sr-only" i18n="@@shared.personalInformation">
1818

1919
<ng-container *ngIf="!orcidId">
2020
<app-panel
21+
panelId="emails-panel"
2122
expandButtonsPosition="right"
2223
[isPublicRecord]="isPublicRecord"
2324
[elements]="userRecord.emails.emails"
@@ -58,6 +59,7 @@ <h3 header class="orc-font-body" i18n="@@shared.emails">Emails</h3>
5859
</app-panel>
5960

6061
<app-panel
62+
panelId="websites-panel"
6163
expandButtonsPosition="right"
6264
[elements]="userRecord.website.websites"
6365
[editModalComponent]="modalWebsitesComponent"
@@ -82,6 +84,7 @@ <h3 header class="orc-font-body" i18n="@@record.websitesAndSocialLinks">
8284
*ngFor="let website of userRecord.website.websites; let last = last"
8385
[visibility]="!isPublicRecord && website.visibility.visibility"
8486
><a
87+
tabindex="-1"
8588
[href]="website.url.value"
8689
[ngClass]="{
8790
'orc-font-body-small': getWebsite(website).length > 20
@@ -106,6 +109,7 @@ <h3 header class="orc-font-body" i18n="@@record.websitesAndSocialLinks">
106109
</app-panel>
107110

108111
<app-panel
112+
panelId="personal-identifiers-panel"
109113
expandButtonsPosition="right"
110114
*ngIf="
111115
userRecord?.externalIdentifier?.externalIdentifiers &&
@@ -135,6 +139,7 @@ <h3 header class="orc-font-body" i18n="@@record.otherIds">Other IDs</h3>
135139
!isPublicRecord && externalIdentifier.visibility.visibility
136140
"
137141
><a
142+
tabindex="-1"
138143
[href]="externalIdentifier.url"
139144
target="_blank"
140145
rel="me nofollow noopener noreferrer"
@@ -160,6 +165,7 @@ <h3 header class="orc-font-body" i18n="@@record.otherIds">Other IDs</h3>
160165
</app-panel-data>
161166
</app-panel>
162167
<app-panel
168+
panelId="keywords-panel"
163169
expandButtonsPosition="right"
164170
*ngIf="
165171
userRecord?.keyword?.keywords &&
@@ -228,6 +234,7 @@ <h3 header class="orc-font-body" i18n="@@record.keywords">Keywords</h3>
228234
</app-panel-data>
229235
</app-panel>
230236
<app-panel
237+
panelId="countries-panel"
231238
expandButtonsPosition="right"
232239
*ngIf="
233240
userRecord?.countries?.addresses &&

0 commit comments

Comments
 (0)