Skip to content

Commit ddf4693

Browse files
abelsiqueiraabelsiqueira
authored
Merge pull request #758 from citation-file-format/647-input-labels
2 parents e9aafa8 + a88ef77 commit ddf4693

16 files changed

Lines changed: 317 additions & 288 deletions

‎cypress.config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default defineConfig({
1010

1111
return config
1212
},
13-
supportFile: 'cypress/support/index.ts'
13+
supportFile: 'cypress/support/index.ts',
14+
video: false
1415
}
1516
})

‎cypress/e2e/errors.cy.ts‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ describe('From a fixed advanced app', () => {
5757
})
5858
it('should validate screen Start', () => {
5959
cy.visit('/start')
60+
cy.checkThatInputValidityIs(true, 'message')
6061
cy.dataCy('input-title')
6162
.clear()
6263
cy.checkThatStepperValidityIs(false, 'start')
@@ -69,26 +70,11 @@ describe('From a fixed advanced app', () => {
6970
cy.get('.q-field__messages > div')
7071
.should('have.length', 1)
7172

72-
cy.dataCy('input-message')
73-
.clear()
74-
cy.checkThatInputValidityIs(false, 'message')
75-
cy.get('.q-field__messages > div')
76-
.should('have.length', 2)
77-
7873
cy.dataCy('input-title')
7974
.type('A')
8075
cy.findInputError('title')
8176
.should('not.exist')
8277

83-
cy.checkThatStepperValidityIs(false, 'start')
84-
cy.dataCy('ta-cff-preview')
85-
.should('have.class', 'error')
86-
cy.dataCy('text-validation-msg')
87-
.should('have.class', 'invalid')
88-
.should('contain.text', 'minimum')
89-
90-
cy.dataCy('input-message')
91-
.type('A')
9278
cy.checkThatInputValidityIs(true, 'message')
9379
cy.checkThatStepperValidityIs(true, 'start')
9480
cy.dataCy('ta-cff-preview')

‎cypress/e2e/info-dialog.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const infoDialogs = [
55
},
66
{
77
screen: 'authors',
8-
values: ['authors', 'given-names', 'name-particle, family-names, name-suffix', 'email', 'affiliation', 'orcid'],
8+
values: ['authors', 'given-names, name-particle, family-names, name-suffix', 'email', 'affiliation', 'orcid'],
99
before: () => { cy.dataCy('btn-add-author').click() }
1010
},
1111
{

‎cypress/e2e/spec.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ describe('Basic usage', () => {
6161
.type('My Title')
6262
.should('have.value', 'My Title')
6363
cy.dataCy('input-message')
64-
.should('have.value', 'If you use this software, please cite it using the metadata from this file.')
64+
.should('have.value', '')
6565
cy.dataCy('btn-next')
6666
.click()
6767

‎src/components/AuthorCardEditing.vue‎

Lines changed: 69 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -4,88 +4,75 @@
44
bordered
55
class="bg-formcard q-pa-md"
66
>
7-
<div class="row">
8-
<h3 class="subquestion">
9-
The person's given names
10-
<InfoDialog name="authorGivenNames" />
11-
</h3>
12-
</div>
13-
<div class="row">
7+
<fieldset class="q-mb-md">
8+
<legend>
9+
Author's name, split into four parts
10+
<InfoDialog name="authorNames" />
11+
</legend>
1412
<q-input
1513
autofocus
1614
bg-color="white"
1715
class="col"
1816
data-cy="input-given-names"
1917
dense
20-
label="given-names"
18+
label="Given names"
2119
outlined
2220
standout
2321
v-bind:model-value="givenNames"
2422
v-bind:error="false"
2523
v-bind:error-message="''"
2624
v-on:update:modelValue="$emit('update', 'givenNames', $event)"
2725
/>
28-
</div>
29-
<div class="row">
30-
<h3 class="subquestion">
31-
The person's last names, split into parts
32-
<InfoDialog name="authorLastNames" />
33-
</h3>
34-
</div>
35-
<div class="row">
36-
<q-input
37-
bg-color="white"
38-
class="col-3"
39-
data-cy="input-name-particle"
40-
dense
41-
label="name-particle"
42-
outlined
43-
standout
44-
v-bind:model-value="nameParticle"
45-
v-bind:error="false"
46-
v-bind:error-message="''"
47-
v-on:update:modelValue="$emit('update', 'nameParticle', $event)"
48-
/>
49-
<q-input
50-
bg-color="white"
51-
class="col"
52-
data-cy="input-family-names"
53-
dense
54-
label="family-names"
55-
outlined
56-
standout
57-
v-bind:model-value="familyNames"
58-
v-bind:error="false"
59-
v-bind:error-message="''"
60-
v-on:update:modelValue="$emit('update', 'familyNames', $event)"
61-
/>
62-
<q-input
63-
bg-color="white"
64-
class="col-3"
65-
data-cy="input-name-suffix"
66-
dense
67-
label="name-suffix"
68-
outlined
69-
standout
70-
v-bind:model-value="nameSuffix"
71-
v-bind:error="false"
72-
v-bind:error-message="''"
73-
v-on:update:modelValue="$emit('update', 'nameSuffix', $event)"
74-
/>
75-
</div>
76-
<div class="row">
77-
<h3 class="subquestion">
78-
The person's email address
79-
<InfoDialog name="authorEmail" />
80-
</h3>
81-
</div>
26+
<div class="row">
27+
<q-input
28+
bg-color="white"
29+
class="col-3"
30+
data-cy="input-name-particle"
31+
dense
32+
label="Name particle"
33+
outlined
34+
standout
35+
v-bind:model-value="nameParticle"
36+
v-bind:error="false"
37+
v-bind:error-message="''"
38+
v-on:update:modelValue="$emit('update', 'nameParticle', $event)"
39+
/>
40+
<q-input
41+
bg-color="white"
42+
class="col"
43+
data-cy="input-family-names"
44+
dense
45+
label="Family names"
46+
outlined
47+
standout
48+
v-bind:model-value="familyNames"
49+
v-bind:error="false"
50+
v-bind:error-message="''"
51+
v-on:update:modelValue="$emit('update', 'familyNames', $event)"
52+
/>
53+
<q-input
54+
bg-color="white"
55+
class="col-3"
56+
data-cy="input-name-suffix"
57+
dense
58+
label="Name suffix"
59+
outlined
60+
standout
61+
v-bind:model-value="nameSuffix"
62+
v-bind:error="false"
63+
v-bind:error-message="''"
64+
v-on:update:modelValue="$emit('update', 'nameSuffix', $event)"
65+
/>
66+
</div>
67+
</fieldset>
8268
<div class="row">
8369
<q-input
70+
aria-label="E-mail. Press tab to reach help button."
8471
bg-color="white"
8572
class="col"
8673
data-cy="input-email"
8774
dense
88-
label="email"
75+
label="E-mail"
8976
outlined
9077
standout
9178
type="email"
@@ -94,39 +81,39 @@
9481
v-bind:error="emailErrors.length > 0"
9582
v-bind:error-message="emailErrors.join(', ')"
9683
v-on:update:modelValue="$emit('update', 'email', $event)"
97-
/>
98-
</div>
99-
<div class="row">
100-
<h3 class="subquestion col">
101-
The person's affiliation
102-
<InfoDialog name="authorAffiliation" />
103-
</h3>
104-
<h3 class="subquestion col">
105-
The person's ORCID
106-
<InfoDialog name="authorOrcid" />
107-
</h3>
84+
>
85+
<template v-slot:after>
86+
<InfoDialog name="authorEmail" />
87+
</template>
88+
</q-input>
10889
</div>
10990
<div class="row">
11091
<q-input
92+
aria-label="Affiliation. Press tab to reach help button."
11193
bg-color="white"
11294
class="col"
11395
data-cy="input-affiliation"
11496
dense
115-
label="affiliation"
97+
label="Affiliation"
11698
outlined
11799
standout
118100
v-bind:model-value="affiliation"
119101
v-bind:error="false"
120102
v-bind:error-message="''"
121103
v-on:update:modelValue="$emit('update', 'affiliation', $event)"
122-
/>
104+
>
105+
<template v-slot:after>
106+
<InfoDialog name="authorAffiliation" />
107+
</template>
108+
</q-input>
123109
<q-input
110+
aria-label="ORCID. Press tab to reach help button."
124111
bg-color="white"
125112
class="col"
126113
data-cy="input-orcid"
127114
dense
128115
hint="Format: https://orcid.org/0000-0000-0000-0000"
129-
label="orcid"
116+
label="ORCID"
130117
mask="https://orcid.org/####-####-####-###X"
131118
outlined
132119
standout
@@ -135,7 +122,11 @@
135122
v-bind:error="orcidErrors.length > 0"
136123
v-bind:error-message="orcidErrors.join(', ')"
137124
v-on:update:modelValue="$emit('update', 'orcid', $event)"
138-
/>
125+
>
126+
<template v-slot:after>
127+
<InfoDialog name="authorOrcid" />
128+
</template>
129+
</q-input>
139130
</div>
140131

141132
<q-card-actions align="right">

‎src/components/IdentifierCardEditing.vue‎

Lines changed: 37 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -15,49 +15,46 @@
1515
v-on:update:modelValue="$emit('updateType', 'type', $event)"
1616
/>
1717
</div>
18-
<div class="q-mt-md items-center no-wrap">
19-
<div class="row">
20-
<h3 class="subquestion">
21-
What is the value of the {{ label }}?
22-
<InfoDialog v-bind:name="identifierType" />
23-
</h3>
24-
</div>
25-
<q-input
26-
autofocus
27-
bg-color="white"
28-
data-cy="input-value"
29-
label="Value"
30-
outlined
31-
standout
32-
dense
33-
v-bind:class="identifierValueErrors.length > 0 ? 'has-error' : ''"
34-
v-bind:error="identifierValueErrors.length > 0"
35-
v-bind:error-message="identifierValueErrors.join(', ')"
36-
v-bind:model-value="value"
37-
v-on:update:modelValue="$emit('updateValue', 'value', $event)"
38-
/>
39-
</div>
40-
<div class="q-mt-md items-center no-wrap">
41-
<div class="row">
42-
<h3 class="subquestion">
43-
What is the description for the {{ label }}?
44-
<InfoDialog name="identifierDescription" />
45-
</h3>
46-
</div>
47-
<q-input
48-
bg-color="white"
49-
data-cy="input-description"
50-
label="Description"
51-
outlined
52-
standout
53-
dense
54-
v-bind:model-value="description"
55-
v-on:update:modelValue="$emit('updateDescription', 'description', $event)"
56-
/>
57-
</div>
18+
19+
<q-input
20+
autofocus
21+
bg-color="white"
22+
data-cy="input-value"
23+
dense
24+
outlined
25+
standout
26+
v-bind:aria-label="`Value of the ${label}. Press tab to reach help button.`"
27+
v-bind:class="identifierValueErrors.length > 0 ? 'has-error' : ''"
28+
v-bind:error-message="identifierValueErrors.join(', ')"
29+
v-bind:error="identifierValueErrors.length > 0"
30+
v-bind:label="`Value of the ${label}`"
31+
v-bind:model-value="value"
32+
v-on:update:modelValue="$emit('updateValue', 'value', $event)"
33+
>
34+
<template v-slot:after>
35+
<InfoDialog v-bind:name="identifierType" />
36+
</template>
37+
</q-input>
38+
39+
<q-input
40+
bg-color="white"
41+
data-cy="input-description"
42+
dense
43+
outlined
44+
standout
45+
v-bind:aria-label="`Description of the ${label}. Press tab to reach help button.`"
46+
v-bind:label="`Description of the ${label}`"
47+
v-bind:model-value="description"
48+
v-on:update:modelValue="$emit('updateDescription', 'description', $event)"
49+
>
50+
<template v-slot:after>
51+
<InfoDialog name="identifierDescription" />
52+
</template>
53+
</q-input>
5854
</q-card-section>
5955
<q-card-actions align="right">
6056
<q-btn
57+
aria-label="Remove identifier being edited"
6158
color="negative"
6259
data-cy="btn-remove"
6360
dense
@@ -142,10 +139,3 @@ export default defineComponent({
142139
]
143140
})
144141
</script>
145-
<style scoped>
146-
.row {
147-
display: flex;
148-
flex-direction: row;
149-
column-gap: 10px;
150-
}
151-
</style>

‎src/components/IdentifierCardViewing.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,21 @@
1515
<q-btn
1616
class="identifier-button"
1717
color="blue"
18-
v-bind:data-cy="'btn-move-up' + index"
19-
v-bind:disable="index == 0"
2018
icon="ion-arrow-up"
2119
tabindex="-1"
20+
v-bind:aria-label="`Move identifier ${index + 1} up`"
21+
v-bind:data-cy="'btn-move-up' + index"
22+
v-bind:disable="index == 0"
2223
v-on:click="$emit('moveUp')"
2324
/>
2425
<q-btn
2526
class="identifier-button"
2627
color="blue"
27-
v-bind:data-cy="'btn-move-down' + index"
28-
v-bind:disable="index >= numIdentifiers - 1"
2928
icon="ion-arrow-down"
3029
tabindex="-1"
30+
v-bind:aria-label="`Move identifier ${index + 1} down`"
31+
v-bind:data-cy="'btn-move-down' + index"
32+
v-bind:disable="index >= numIdentifiers - 1"
3133
v-on:click="$emit('moveDown')"
3234
/>
3335
<q-btn

0 commit comments

Comments
 (0)