Skip to content

Commit 5464393

Browse files
abelsiqueiraabelsiqueira
authored
Merge pull request #765 from citation-file-format/764-infodialog-a11y
2 parents 72f268f + 18ae170 commit 5464393

2 files changed

Lines changed: 75 additions & 55 deletions

File tree

‎src/components/InfoDialog.vue‎

Lines changed: 44 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,46 @@
11
<template>
2-
<q-icon
3-
name="ion-information-circle-outline"
4-
size="24px"
5-
color="primary"
2+
<q-btn
3+
class="transparent"
4+
flat
5+
icon="ion-information-circle-outline"
6+
round
67
v-bind:data-cy="'info-icon-' + data.title"
8+
v-bind:aria-label="'Open help for ' + data.title"
79
v-on:click="showDialog = true"
8-
style="cursor:pointer;"
910
/>
1011
<q-dialog
12+
aria-modal="true"
13+
role="dialog"
14+
v-bind:aria-label="'Help for ' + data.title"
1115
v-bind:data-cy="'info-dialog-' + data.title"
1216
v-model="showDialog"
1317
>
1418
<q-card
1519
class="window-width help-dialog"
1620
>
1721
<q-card-section class="row items-center q-pb-none">
18-
<div class="text-h5">
22+
<h2>
1923
CFF field: {{ data.title }}
20-
</div>
24+
</h2>
2125
<q-space />
2226
<q-btn
2327
icon="close"
2428
flat
25-
round
29+
label="close"
2630
dense
2731
v-close-popup
2832
/>
2933
</q-card-section>
3034

3135
<q-card-section>
32-
{{ data.description }}
36+
<p>
37+
{{ data.description }}
38+
</p>
3339
</q-card-section>
3440
<q-card-section v-if="data.examples">
35-
<div class="text-h6">
41+
<h3>
3642
Examples
37-
</div>
43+
</h3>
3844
<ul>
3945
<li
4046
v-for="item in data.examples"
@@ -51,21 +57,22 @@
5157
</ul>
5258
</q-card-section>
5359
<q-card-section v-if="data.url">
54-
<div class="text-h6">
60+
<h3>
5561
Related links
56-
</div>
57-
<div
58-
v-for="item in data.url"
59-
v-bind:key="item"
60-
>
61-
<a
62-
v-bind:href="item.link"
63-
tabindex="-1"
64-
target="_blank"
62+
</h3>
63+
<ul>
64+
<li
65+
v-for="item in data.url"
66+
v-bind:key="item"
6567
>
66-
{{ item.text }}
67-
</a>
68-
</div>
68+
<a
69+
v-bind:href="item.link"
70+
target="_blank"
71+
>
72+
{{ item.text }}
73+
</a>
74+
</li>
75+
</ul>
6976
</q-card-section>
7077
</q-card>
7178
</q-dialog>
@@ -99,4 +106,17 @@ export default defineComponent({
99106
.help-dialog {
100107
background-color: var(--fgcolor, lightslategray);
101108
}
109+
h2 {
110+
font-size: 2rem;
111+
line-height: normal;
112+
margin-top: 12px;
113+
margin-bottom: 7px;
114+
letter-spacing: normal;
115+
}
116+
h3 {
117+
font-size: 1.25rem;
118+
line-height: normal;
119+
margin: 0px;
120+
letter-spacing: normal;
121+
}
102122
</style>

‎src/store/help-data.ts‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export const helpData = {
33
title: 'abstract',
44
url: [
55
{
6-
text: 'Click here to see the documentation for abstract.',
6+
text: 'Documentation for abstract.',
77
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#abstract'
88
}
99
],
@@ -13,7 +13,7 @@ export const helpData = {
1313
title: 'affiliation',
1414
url: [
1515
{
16-
text: 'Click here to see the documentation for affiliation.',
16+
text: 'Documentation for affiliation.',
1717
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonaffiliation'
1818
}
1919
],
@@ -27,7 +27,7 @@ export const helpData = {
2727
title: 'email',
2828
url: [
2929
{
30-
text: 'Click here to see the documentation for email.',
30+
text: 'Documentation for email.',
3131
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonemail'
3232
}
3333
],
@@ -40,19 +40,19 @@ export const helpData = {
4040
title: 'given-names, name-particle, family-names, name-suffix',
4141
url: [
4242
{
43-
text: 'Click here to see the documentation for given-names.',
43+
text: 'Documentation for given-names.',
4444
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersongiven-names'
4545
},
4646
{
47-
text: 'Click here to see the documentation for name-particle.',
47+
text: 'Documentation for name-particle.',
4848
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonname-particle'
4949
},
5050
{
51-
text: 'Click here to see the documentation for family-name.',
51+
text: 'Documentation for family-name.',
5252
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonfamily-names'
5353
},
5454
{
55-
text: 'Click here to see the documentation for name-suffix.',
55+
text: 'Documentation for name-suffix.',
5656
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonname-suffix'
5757
}
5858
],
@@ -68,7 +68,7 @@ export const helpData = {
6868
title: 'given-names',
6969
url: [
7070
{
71-
text: 'Click here to see the documentation for given-names.',
71+
text: 'Documentation for given-names.',
7272
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersongiven-names'
7373
}
7474
],
@@ -82,15 +82,15 @@ export const helpData = {
8282
title: 'name-particle, family-names, name-suffix',
8383
url: [
8484
{
85-
text: 'Click here to see the documentation for name-particle.',
85+
text: 'Documentation for name-particle.',
8686
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonname-particle'
8787
},
8888
{
89-
text: 'Click here to see the documentation for family-name.',
89+
text: 'Documentation for family-name.',
9090
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonfamily-names'
9191
},
9292
{
93-
text: 'Click here to see the documentation for name-suffix.',
93+
text: 'Documentation for name-suffix.',
9494
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonname-suffix'
9595
}
9696
],
@@ -105,7 +105,7 @@ export const helpData = {
105105
title: 'orcid',
106106
url: [
107107
{
108-
text: 'Click here to see the documentation for orcid.',
108+
text: 'Documentation for orcid.',
109109
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonorcid'
110110
},
111111
{
@@ -122,7 +122,7 @@ export const helpData = {
122122
title: 'authors',
123123
url: [
124124
{
125-
text: 'Click here to see the documentation for authors.',
125+
text: 'Documentation for authors.',
126126
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#authors'
127127
},
128128
{
@@ -141,7 +141,7 @@ export const helpData = {
141141
title: 'commit',
142142
url: [
143143
{
144-
text: 'Click here to see the documentation for commit.',
144+
text: 'Documentation for commit.',
145145
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#commit'
146146
}
147147
],
@@ -155,7 +155,7 @@ export const helpData = {
155155
title: 'date-released',
156156
url: [
157157
{
158-
text: 'Click here to see the documentation for date-released.',
158+
text: 'Documentation for date-released.',
159159
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#date-released'
160160
}
161161
],
@@ -165,7 +165,7 @@ export const helpData = {
165165
title: 'description',
166166
url: [
167167
{
168-
text: 'Click here to see the documentation for description.',
168+
text: 'Documentation for description.',
169169
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionsidentifier-description'
170170
}
171171
],
@@ -181,7 +181,7 @@ export const helpData = {
181181
title: 'doi',
182182
url: [
183183
{
184-
text: 'Click here to see the documentation for doi.',
184+
text: 'Documentation for doi.',
185185
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionsdoi'
186186
}
187187
],
@@ -194,7 +194,7 @@ export const helpData = {
194194
title: 'other',
195195
url: [
196196
{
197-
text: 'Click here to see the documentation for other.',
197+
text: 'Documentation for other.',
198198
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionsidentifier'
199199
}
200200
],
@@ -207,7 +207,7 @@ export const helpData = {
207207
title: 'swh',
208208
url: [
209209
{
210-
text: 'Click here to see the documentation for swh.',
210+
text: 'Documentation for swh.',
211211
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionsswh-identifier'
212212
}
213213
],
@@ -220,7 +220,7 @@ export const helpData = {
220220
title: 'url',
221221
url: [
222222
{
223-
text: 'Click here to see the documentation for url.',
223+
text: 'Documentation for url.',
224224
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionsurl'
225225
}
226226
],
@@ -236,7 +236,7 @@ export const helpData = {
236236
title: 'identifiers',
237237
url: [
238238
{
239-
text: 'Click here to see the documentation for identifiers.',
239+
text: 'Documentation for identifiers.',
240240
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#identifiers'
241241
}
242242
],
@@ -252,7 +252,7 @@ export const helpData = {
252252
title: 'keywords',
253253
url: [
254254
{
255-
text: 'Click here to see the documentation for keywords.',
255+
text: 'Documentation for keywords.',
256256
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#keywords'
257257
}
258258
],
@@ -267,7 +267,7 @@ export const helpData = {
267267
title: 'license',
268268
url: [
269269
{
270-
text: 'Click here to see the documentation for license.',
270+
text: 'Documentation for license.',
271271
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#license'
272272
}
273273
],
@@ -282,7 +282,7 @@ export const helpData = {
282282
title: 'message',
283283
url: [
284284
{
285-
text: 'Click here to see the documentation for message.',
285+
text: 'Documentation for message.',
286286
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#message'
287287
}
288288
],
@@ -297,7 +297,7 @@ export const helpData = {
297297
title: 'repository',
298298
url: [
299299
{
300-
text: 'Click here to see the documentation for repository.',
300+
text: 'Documentation for repository.',
301301
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#repository'
302302
}
303303
],
@@ -310,7 +310,7 @@ export const helpData = {
310310
title: 'repository-artifact',
311311
url: [
312312
{
313-
text: 'Click here to see the documentation for repository-artifact.',
313+
text: 'Documentation for repository-artifact.',
314314
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#repository-artifact'
315315
}
316316
],
@@ -323,7 +323,7 @@ export const helpData = {
323323
title: 'repository-code',
324324
url: [
325325
{
326-
text: 'Click here to see the documentation for repository-code.',
326+
text: 'Documentation for repository-code.',
327327
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#repository-code'
328328
}
329329
],
@@ -336,7 +336,7 @@ export const helpData = {
336336
title: 'title',
337337
url: [
338338
{
339-
text: 'Click here to see the documentation for title.',
339+
text: 'Documentation for title.',
340340
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#title'
341341
}
342342
],
@@ -351,7 +351,7 @@ export const helpData = {
351351
title: 'type',
352352
url: [
353353
{
354-
text: 'Click here to see the documentation for type.',
354+
text: 'Documentation for type.',
355355
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#type'
356356
}
357357
],
@@ -361,7 +361,7 @@ export const helpData = {
361361
title: 'url',
362362
url: [
363363
{
364-
text: 'Click here to see the documentation for url.',
364+
text: 'Documentation for url.',
365365
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#url'
366366
}
367367
],
@@ -374,7 +374,7 @@ export const helpData = {
374374
title: 'version',
375375
url: [
376376
{
377-
text: 'Click here to see the documentation for version.',
377+
text: 'Documentation for version.',
378378
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#version'
379379
}
380380
],

0 commit comments

Comments
 (0)