Skip to content

Commit 59026e1

Browse files
futa-ikedafuta-ikeda
committed
fix(search): Fix a11y issue with nested interactive controls
1 parent 358cbf5 commit 59026e1

File tree

1 file changed

+91
-96
lines changed

1 file changed

+91
-96
lines changed

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

Lines changed: 91 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -4,115 +4,110 @@
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="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="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"
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 class="word-break-word" [href]="affiliatedEntity.absoluteUrl" target="_blank" rel="noopener noreferrer">
38+
{{ affiliatedEntity.name }}{{ $last ? '' : ', ' }}
39+
</a>
5040
}
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="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>
41+
@if (resource().creators.length > limit) {
42+
<p class="inline">
43+
&nbsp;{{ 'resourceCard.andCountMore' | translate: { count: resource().creators.length - limit } }}
44+
</p>
6445
}
46+
</div>
47+
}
6548

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="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-
}
49+
@if (resource().isPartOf) {
50+
<div class="flex flex-row gap-1 line-height-3">
51+
<p class="white-space-nowrap">{{ 'resourceCard.labels.from' | translate }}</p>
52+
<a
53+
class="white-space-normal word-break-word"
54+
[href]="resource().isPartOf!.absoluteUrl"
55+
target="_blank"
56+
rel="noopener noreferrer"
57+
>
58+
{{ resource().isPartOf!.name }}
59+
</a>
60+
</div>
61+
}
7962

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>
63+
@if (resource().isContainedBy) {
64+
<div class="flex flex-row gap-1 line-height-3">
65+
<p class="white-space-nowrap">{{ 'resourceCard.labels.from' | translate }}</p>
66+
<a
67+
class="white-space-normal"
68+
[href]="resource().isContainedBy!.absoluteUrl"
69+
target="_blank"
70+
rel="noopener noreferrer"
71+
>
72+
{{ resource().isContainedBy!.name }}
73+
</a>
74+
</div>
75+
}
8476

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

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>
82+
@if (!$last && !isSmall()) {
83+
<p class="mx-1">
84+
{{ '|' }}
85+
</p>
86+
}
9887
}
88+
</div>
89+
}
9990

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

0 commit comments

Comments
 (0)