Skip to content

Commit a97c915

Browse files
futa-ikedafuta-ikeda
authored
fix(search): Fix a11y issue with nested interactive controls (#804)
* fix(search): Fix a11y issue with nested interactive controls * fix(search): Match CSS to what was there prior
1 parent 0d88c7c commit a97c915

File tree

2 files changed

+101
-97
lines changed

2 files changed

+101
-97
lines changed

‎src/app/shared/components/resource-card/resource-card.component.html‎

Lines changed: 97 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,118 @@
11
<div class="resource p-4">
22
<p-accordion (onOpen)="onOpen()">
3-
<p-accordion-panel value="0">
3+
<p-accordion-panel value="0" class="gap-2">
44
<p-accordion-header class="flex flex-row align-items-start gap-3 p-0">
55
<div osfStopPropagation class="flex flex-column align-items-start gap-2">
66
<p class="type py-1 px-3 font-bold">{{ cardTypeLabel() | translate }}</p>
7+
</div>
8+
</p-accordion-header>
79

8-
<div class="flex align-items-center gap-2">
9-
<h2>
10-
<a
11-
class="block line-height-4 dark-blue-link word-break-word"
12-
[href]="resource().absoluteUrl"
13-
target="_blank"
14-
rel="noopener noreferrer"
15-
>
16-
{{ displayTitle() | fixSpecialChar }}
17-
</a>
18-
</h2>
10+
<div class="flex align-items-center gap-2">
11+
<h2>
12+
<a
13+
class="block line-height-4 dark-blue-link word-break-word"
14+
[href]="resource().absoluteUrl"
15+
target="_blank"
16+
rel="noopener noreferrer"
17+
>
18+
{{ displayTitle() | fixSpecialChar }}
19+
</a>
20+
</h2>
1921

20-
@if (isWithdrawn()) {
21-
<p-tag severity="secondary">{{ 'resourceCard.labels.withdrawn' | translate }}</p-tag>
22-
}
22+
@if (isWithdrawn()) {
23+
<p-tag severity="secondary">{{ 'resourceCard.labels.withdrawn' | translate }}</p-tag>
24+
}
2325

24-
@let orcidValues = orcids();
25-
@if (orcidValues.length && orcidValues[0]) {
26-
<a [href]="orcidValues[0]" class="h-1rem" target="_blank" rel="noopener noreferrer">
27-
<img ngSrc="assets/icons/colored/orcid.svg" width="16" height="16" alt="orcid" />
28-
</a>
29-
}
30-
</div>
26+
@let orcidValues = orcids();
27+
@if (orcidValues.length && orcidValues[0]) {
28+
<a [href]="orcidValues[0]" class="h-1rem" target="_blank" rel="noopener noreferrer">
29+
<img ngSrc="assets/icons/colored/orcid.svg" width="16" height="16" alt="orcid" />
30+
</a>
31+
}
32+
</div>
3133

32-
@if (affiliatedEntities().length > 0) {
33-
<div class="line-height-3">
34-
@for (affiliatedEntity of affiliatedEntities().slice(0, limit); track $index) {
35-
<a
36-
class="word-break-word block line-height-3"
37-
[href]="affiliatedEntity.absoluteUrl"
38-
target="_blank"
39-
rel="noopener noreferrer"
40-
>
41-
{{ affiliatedEntity.name }}{{ $last ? '' : ', ' }}
42-
</a>
43-
}
44-
@if (resource().creators.length > limit) {
45-
<p class="inline">
46-
&nbsp;{{ 'resourceCard.andCountMore' | translate: { count: resource().creators.length - limit } }}
47-
</p>
48-
}
49-
</div>
34+
@if (affiliatedEntities().length > 0) {
35+
<div class="line-height-3">
36+
@for (affiliatedEntity of affiliatedEntities().slice(0, limit); track $index) {
37+
<a
38+
class="word-break-word block line-height-3"
39+
[href]="affiliatedEntity.absoluteUrl"
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
>
43+
{{ affiliatedEntity.name }}{{ $last ? '' : ', ' }}
44+
</a>
5045
}
51-
52-
@if (resource().isPartOf) {
53-
<div class="flex flex-row gap-1 line-height-3">
54-
<p class="white-space-nowrap">{{ 'resourceCard.labels.from' | translate }}</p>
55-
<a
56-
class="block line-height-4 white-space-normal word-break-word"
57-
[href]="resource().isPartOf!.absoluteUrl"
58-
target="_blank"
59-
rel="noopener noreferrer"
60-
>
61-
{{ resource().isPartOf!.name }}
62-
</a>
63-
</div>
46+
@if (resource().creators.length > limit) {
47+
<p class="inline">
48+
&nbsp;{{ 'resourceCard.andCountMore' | translate: { count: resource().creators.length - limit } }}
49+
</p>
6450
}
51+
</div>
52+
}
6553

66-
@if (resource().isContainedBy) {
67-
<div class="flex flex-row gap-1 line-height-3">
68-
<p class="white-space-nowrap">{{ 'resourceCard.labels.from' | translate }}</p>
69-
<a
70-
class="block line-height-4 white-space-normal"
71-
[href]="resource().isContainedBy!.absoluteUrl"
72-
target="_blank"
73-
rel="noopener noreferrer"
74-
>
75-
{{ resource().isContainedBy!.name }}
76-
</a>
77-
</div>
78-
}
54+
@if (resource().isPartOf) {
55+
<div class="flex flex-row gap-1 line-height-3">
56+
<p class="white-space-nowrap">{{ 'resourceCard.labels.from' | translate }}</p>
57+
<a
58+
class="block line-height-4 white-space-normal word-break-word"
59+
[href]="resource().isPartOf!.absoluteUrl"
60+
target="_blank"
61+
rel="noopener noreferrer"
62+
>
63+
{{ resource().isPartOf!.name }}
64+
</a>
65+
</div>
66+
}
7967

80-
@if (dateFields().length > 0) {
81-
<div class="flex flex-column md:flex-row line-height-3">
82-
@for (dateField of dateFields(); track $index) {
83-
<p>{{ dateField.label | translate }}: {{ dateField.date | date: 'MMMM d, y' : 'UTC' }}</p>
68+
@if (resource().isContainedBy) {
69+
<div class="flex flex-row gap-1 line-height-3">
70+
<p class="white-space-nowrap">{{ 'resourceCard.labels.from' | translate }}</p>
71+
<a
72+
class="block line-height-4 white-space-normal"
73+
[href]="resource().isContainedBy!.absoluteUrl"
74+
target="_blank"
75+
rel="noopener noreferrer"
76+
>
77+
{{ resource().isContainedBy!.name }}
78+
</a>
79+
</div>
80+
}
8481

85-
@if (!$last && !isSmall()) {
86-
<p class="mx-1">
87-
{{ '|' }}
88-
</p>
89-
}
90-
}
91-
</div>
92-
}
82+
@if (dateFields().length > 0) {
83+
<div class="flex flex-column md:flex-row line-height-3">
84+
@for (dateField of dateFields(); track $index) {
85+
<p>{{ dateField.label | translate }}: {{ dateField.date | date: 'MMMM d, y' : 'UTC' }}</p>
9386

94-
@if (resource().context) {
95-
<div class="flex flex-row gap-1 line-height-3 flex-wrap">
96-
<p [innerHTML]="`${'resourceCard.labels.context' | translate}: ${resource().context}`"></p>
97-
</div>
87+
@if (!$last && !isSmall()) {
88+
<p class="mx-1">
89+
{{ '|' }}
90+
</p>
91+
}
9892
}
93+
</div>
94+
}
9995

100-
@if (
101-
resource().resourceType === ResourceType.Registration ||
102-
resource().resourceType === ResourceType.RegistrationComponent
103-
) {
104-
<osf-data-resources
105-
class="mt-1"
106-
[absoluteUrl]="resource().absoluteUrl"
107-
[hasData]="!!resource().hasDataResource"
108-
[hasAnalyticCode]="resource().hasAnalyticCodeResource"
109-
[hasMaterials]="resource().hasMaterialsResource"
110-
[hasPapers]="resource().hasPapersResource"
111-
[hasSupplements]="resource().hasSupplementalResource"
112-
/>
113-
}
96+
@if (resource().context) {
97+
<div class="flex flex-row gap-1 line-height-3 flex-wrap">
98+
<p [innerHTML]="`${'resourceCard.labels.context' | translate}: ${resource().context}`"></p>
11499
</div>
115-
</p-accordion-header>
100+
}
101+
102+
@if (
103+
resource().resourceType === ResourceType.Registration ||
104+
resource().resourceType === ResourceType.RegistrationComponent
105+
) {
106+
<osf-data-resources
107+
class="mt-1"
108+
[absoluteUrl]="resource().absoluteUrl"
109+
[hasData]="!!resource().hasDataResource"
110+
[hasAnalyticCode]="resource().hasAnalyticCodeResource"
111+
[hasMaterials]="resource().hasMaterialsResource"
112+
[hasPapers]="resource().hasPapersResource"
113+
[hasSupplements]="resource().hasSupplementalResource"
114+
/>
115+
}
116116
<p-accordion-content>
117117
<div class="flex flex-column pt-1">
118118
<hr class="w-full break-line my-2" />

‎src/app/shared/components/resource-card/resource-card.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212
font-weight: 400;
1313
}
1414

15+
a {
16+
font-weight: 700;
17+
}
18+
1519
.break-line {
1620
border: none;
1721
border-top: 1px solid var(--grey-2);

0 commit comments

Comments
 (0)