Skip to content

Commit 983ed33

Browse files
laruisslaruiss
authored
Merge pull request #656 from dnum-mi/fix-639-dsfrradiobuttonset-fieldset__element
fix: 🐛 corrige case à cocher et bouton radio
2 parents 9bfeaa5 + 397dfc1 commit 983ed33

13 files changed

+154
-123
lines changed

‎src/components/DsfrCheckbox/DsfrCheckbox.e2e.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -141,8 +141,6 @@ describe('DsfrCheckboxSet', () => {
141141
.should('be.visible')
142142
.should('contain', legend)
143143
.get('.fr-fieldset')
144-
.find('.fr-fieldset__content')
145-
.should('be.visible')
146144
.get('.fr-fieldset')
147145
.find('fr-message--info')
148146
.should('not.exist')
@@ -236,8 +234,6 @@ describe('DsfrCheckboxSet', () => {
236234
.should('be.visible')
237235
.should('contain', legend)
238236
.get('.fr-fieldset')
239-
.find('.fr-fieldset__content')
240-
.should('be.visible')
241237
.get('.fr-fieldset')
242238
.find('.fr-message--info')
243239
.should('be.visible')
@@ -332,8 +328,6 @@ describe('DsfrCheckboxSet', () => {
332328
.should('be.visible')
333329
.should('contain', legend)
334330
.get('.fr-fieldset')
335-
.find('.fr-fieldset__content')
336-
.should('be.visible')
337331
.get('.fr-fieldset')
338332
.find('.fr-message--info')
339333
.should('be.visible')
@@ -422,7 +416,7 @@ describe('DsfrCheckboxSet', () => {
422416
})
423417
.get('.fr-form-group')
424418
.should('be.visible')
425-
.find('.fr-fieldset--inline')
419+
.find('.fr-fieldset__element--inline')
426420
.should('be.visible')
427421
})
428422
})

‎src/components/DsfrCheckbox/DsfrCheckbox.types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export type DsfrCheckboxProps = {
66
required?: boolean
77
modelValue?: boolean
88
small?: boolean
9+
inline?: boolean
910
label?: string
1011
errorMessage?: string
1112
validMessage?: string

‎src/components/DsfrCheckbox/DsfrCheckbox.vue‎

Lines changed: 51 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -28,56 +28,62 @@ const emitNewValue = ($event: InputEvent) => {
2828

2929
<template>
3030
<div
31-
class="fr-checkbox-group"
32-
:class="{
33-
'fr-checkbox-group--error': errorMessage,
34-
'fr-checkbox-group--valid': validMessage,
35-
'fr-checkbox-group--sm': small,
36-
}"
31+
class="fr-fieldset__element"
32+
:class="{ 'fr-fieldset__element--inline': inline }"
3733
>
38-
<input
39-
:id="id"
40-
:name="name"
41-
type="checkbox"
42-
:checked="modelValue"
43-
v-bind="$attrs"
44-
:data-testid="`input-checkbox-${id}`"
45-
:data-test="`input-checkbox-${id}`"
46-
@change="emitNewValue($event as InputEvent)"
47-
>
48-
<label
49-
:for="id"
50-
class="fr-label"
34+
<div
35+
class="fr-checkbox-group"
36+
:class="{
37+
'fr-checkbox-group--error': errorMessage,
38+
'fr-checkbox-group--valid': validMessage,
39+
'fr-checkbox-group--sm': small,
40+
}"
5141
>
52-
<!-- @slot Slot pour personnaliser tout le contenu de la balise <label> cf. [DsfrInput](/?path=/story/composants-champ-de-saisie-champ-simple-dsfrinput--champ-avec-label-personnalise). Une **props porte le même nom pour un label simple** (texte sans mise en forme) -->
53-
<slot name="label">
54-
{{ label }}
55-
<!-- @slot Slot pour indiquer que le champ est obligatoire. Par défaut, met une astérisque si `required` est à true (dans un `<span class="required">`) -->
56-
<slot name="required-tip">
57-
<span
58-
v-if="required"
59-
class="required"
60-
>&nbsp;*</span>
42+
<input
43+
:id="id"
44+
:name="name"
45+
type="checkbox"
46+
:checked="modelValue"
47+
v-bind="$attrs"
48+
:data-testid="`input-checkbox-${id}`"
49+
:data-test="`input-checkbox-${id}`"
50+
@change="emitNewValue($event as InputEvent)"
51+
>
52+
<label
53+
:for="id"
54+
class="fr-label"
55+
>
56+
<!-- @slot Slot pour personnaliser tout le contenu de la balise <label> cf. [DsfrInput](/?path=/story/composants-champ-de-saisie-champ-simple-dsfrinput--champ-avec-label-personnalise). Une **props porte le même nom pour un label simple** (texte sans mise en forme) -->
57+
<slot name="label">
58+
{{ label }}
59+
<!-- @slot Slot pour indiquer que le champ est obligatoire. Par défaut, met une astérisque si `required` est à true (dans un `<span class="required">`) -->
60+
<slot name="required-tip">
61+
<span
62+
v-if="required"
63+
class="required"
64+
>&nbsp;*</span>
65+
</slot>
6166
</slot>
62-
</slot>
6367

64-
<span
65-
v-if="hint"
66-
class="fr-hint-text"
67-
>
68-
{{ hint }}
69-
</span>
70-
</label>
71-
<div
72-
v-if="message"
73-
class="fr-messages-group"
74-
>
75-
<p
76-
class="fr-message--info flex items-center"
77-
:class="additionalMessageClass"
68+
<span
69+
v-if="hint"
70+
class="fr-hint-text"
71+
>
72+
{{ hint }}
73+
</span>
74+
</label>
75+
<div
76+
v-if="message"
77+
class="fr-messages-group"
78+
aria-live="assertive"
7879
>
79-
{{ message }}
80-
</p>
80+
<p
81+
class="fr-message--info flex items-center"
82+
:class="additionalMessageClass"
83+
>
84+
{{ message }}
85+
</p>
86+
</div>
8187
</div>
8288
</div>
8389
</template>

‎src/components/DsfrCheckbox/DsfrCheckboxSet.spec.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -120,19 +120,21 @@ describe('DsfrCheckboxSet', () => {
120120

121121
it('should render no checkboxes', async () => {
122122
// Given
123+
const legend = 'Le titre des checkboxes'
123124
// When
124-
const { container } = render(DsfrCheckboxSet, {
125+
const { getByText } = render(DsfrCheckboxSet, {
125126
global: {
126127
components: {
127128
VIcon,
128129
},
129130
},
130131
props: {
132+
legend,
131133
},
132134
})
133-
const checkboxes = container.querySelector('.fr-fieldset__content')
135+
const legendEl = getByText(legend)
134136

135137
// Then
136-
expect(checkboxes.firstElementChild).toBe(null)
138+
expect(legendEl.nextElementSibling).toBe(null)
137139
})
138140
})

‎src/components/DsfrCheckbox/DsfrCheckboxSet.stories.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ CheckboxSet.args = {
101101
label: 'Valeur 3',
102102
id: 'name3',
103103
name: 'name3',
104+
hint: 'Description 3',
104105
},
105106
],
106107
}
@@ -154,6 +155,7 @@ CheckboxSetRequis.args = {
154155
label: 'Valeur 3',
155156
id: 'name3',
156157
name: 'name3',
158+
hint: 'Description 3',
157159
},
158160
],
159161
}
@@ -211,6 +213,7 @@ CheckboxSetRequisPersonnalise.args = {
211213
label: 'Valeur 3',
212214
id: 'name3',
213215
name: 'name3',
216+
hint: 'Description 3',
214217
},
215218
],
216219
}
@@ -263,6 +266,7 @@ CheckboxSetAvecErreur.args = {
263266
label: 'Valeur 3',
264267
id: 'name3',
265268
name: 'name3',
269+
hint: 'Description 3',
266270
checked: false,
267271
},
268272
],
@@ -314,6 +318,7 @@ CheckboxSetAvecSucces.args = {
314318
label: 'Valeur 3',
315319
id: 'name3',
316320
name: 'name3',
321+
hint: 'Description 3',
317322
checked: false,
318323
},
319324
],
@@ -366,6 +371,7 @@ CheckboxSetInline.args = {
366371
label: 'Valeur 3',
367372
id: 'name3',
368373
name: 'name3',
374+
hint: 'Description 3',
369375
checked: false,
370376
},
371377
],
@@ -418,6 +424,7 @@ CheckboxSetInlineAvecErreur.args = {
418424
label: 'Valeur 3',
419425
id: 'name3',
420426
name: 'name3',
427+
hint: 'Description 3',
421428
checked: false,
422429
},
423430
],
@@ -470,6 +477,7 @@ CheckboxSetInlineAvecSucces.args = {
470477
label: 'Valeur 3',
471478
id: 'name3',
472479
name: 'name3',
480+
hint: 'Description 3',
473481
checked: false,
474482
},
475483
],

‎src/components/DsfrCheckbox/DsfrCheckboxSet.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,10 @@ const onChange = ({ name, checked }: { name: string, checked: boolean }) => {
4141
:class="{
4242
'fr-fieldset--error': errorMessage,
4343
'fr-fieldset--valid': validMessage,
44-
'fr-fieldset--inline': inline
4544
}"
4645
:disabled="disabled"
46+
:aria-labelledby="`${titleId} messages-${titleId}`"
47+
:role="(errorMessage || validMessage) ? 'group' : undefined"
4748
>
4849
<legend
4950
:id="titleId"
@@ -61,11 +62,8 @@ const onChange = ({ name, checked }: { name: string, checked: boolean }) => {
6162
</slot>
6263
</slot>
6364
</legend>
64-
<div
65-
class="fr-fieldset__content"
66-
role="group"
67-
:aria-labelledby="titleId"
68-
>
65+
66+
<slot>
6967
<DsfrCheckbox
7068
v-for="option in options"
7169
:id="option.id"
@@ -74,13 +72,15 @@ const onChange = ({ name, checked }: { name: string, checked: boolean }) => {
7472
:label="option.label"
7573
:disabled="option.disabled"
7674
:small="small"
75+
:inline="inline"
7776
:model-value="modelValue.includes(option.name)"
7877
:hint="option.hint"
7978
@update:model-value="onChange({ name: option.name, checked: $event })"
8079
/>
81-
</div>
80+
</slot>
8281
<div
8382
v-if="message"
83+
:id="`messages-${titleId}`"
8484
class="fr-messages-group"
8585
>
8686
<p

‎src/components/DsfrNavigation/DsfrNavigationMenuLink.spec.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { OhVueIcon as VIcon } from 'oh-vue-icons'
1+
import { OhVueIcon as VIcon, addIcons } from 'oh-vue-icons'
2+
import { RiCheckLine } from 'oh-vue-icons/icons'
23
import { render } from '@testing-library/vue'
34
import { createRouter, createWebHistory } from 'vue-router'
45
// import '@gouvfr/dsfr/dist/core/core.module.js'
@@ -14,6 +15,8 @@ const router = createRouter({
1415
}],
1516
})
1617

18+
addIcons(RiCheckLine)
19+
1720
describe('DsfrNavigationMenuLink', () => {
1821
it('should render a navigation menu link (internal) with icon', async () => {
1922
const to = '/'
@@ -37,9 +40,11 @@ describe('DsfrNavigationMenuLink', () => {
3740
await router.isReady()
3841

3942
const link = getByTestId('nav-router-link')
40-
expect(link.innerHTML).toBe('<svg class="ov-icon" style="font-size: 1.2em;" aria-hidden="true" width="0" height="0" viewBox="0 0 0 0" fill="currentColor"></svg> ' + text)
43+
expect(link.innerHTML).toContain(text)
44+
expect(link.innerHTML).toContain('<svg')
4145
expect(link).toHaveAttribute('href', to)
4246
})
47+
4348
it('should render a navigation menu link (internal) without icon', async () => {
4449
const to = '/'
4550
const text = 'Texte du lien'

‎src/components/DsfrRadioButton/DsfrRadioButton.stories.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -104,13 +104,15 @@ export const RichRadioButton = (args) => ({
104104
return args
105105
},
106106
template: `
107-
<DsfrRadioButton
108-
v-for="option of options"
109-
:modelValue="modelValue"
110-
v-bind="option"
111-
:small="small"
112-
@update:modelValue="updateCheckedValue($event)"
113-
/>
107+
<DsfrRadioButtonSet>
108+
<DsfrRadioButton
109+
v-for="option of options"
110+
:modelValue="modelValue"
111+
v-bind="option"
112+
:small="small"
113+
@update:modelValue="updateCheckedValue($event)"
114+
/>
115+
<DsfrRadioButtonSet>
114116
`,
115117
methods: {
116118
updateCheckedValue (val) {

‎src/components/DsfrRadioButton/DsfrRadioButton.types.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export type DsfrRadioButtonProps = {
33
name?: string
44
modelValue?: string | number
55
small?: boolean
6+
inline?: boolean
67
value: string | number
78
label?: string
89
hint?: string
@@ -12,9 +13,9 @@ export type DsfrRadioButtonProps = {
1213
export type DsfrRadioButtonSetProps = {
1314
titleId?: string,
1415
disabled?: boolean,
15-
inline?: boolean,
1616
required?: boolean,
1717
small?: boolean,
18+
inline?: boolean,
1819
name?: string,
1920
errorMessage?: string,
2021
validMessage?: string,

0 commit comments

Comments
 (0)