Skip to content

Commit fab6dc5

Browse files
jacobmllr95jacobmllr95
authored
feat(b-form-group): add content-cols props and scoped default slot (closes #6095, #6118) (#6178)
* fix(b-form-group): content markup * Update package.json * Update README.md * Update README.md * Update array.js * Update form-group.js * Update form-group.spec.js * Update package.json * Update README.md * Update form-radio-check-group.js * chore(docs): optimize all `<b-form-groups>` for A11Y
1 parent 451b06b commit fab6dc5

File tree

19 files changed

+732
-476
lines changed

19 files changed

+732
-476
lines changed

‎src/components/calendar/README.md‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,14 +71,23 @@ For disabling specific dates or setting minimum and maximum date limits, refer t
7171
```html
7272
<template>
7373
<div>
74-
<b-form-group label="Select calendar interactive state">
75-
<b-form-radio-group v-model="state" aria-controls="ex-disabled-readonly">
74+
<b-form-group label="Select calendar interactive state" v-slot="{ ariaDescribedby }">
75+
<b-form-radio-group
76+
v-model="state"
77+
:aria-describedby="ariaDescribedby"
78+
aria-controls="ex-disabled-readonly"
79+
>
7680
<b-form-radio value="disabled">Disabled</b-form-radio>
7781
<b-form-radio value="readonly">Readonly</b-form-radio>
7882
<b-form-radio value="normal">Normal</b-form-radio>
7983
</b-form-radio-group>
8084
</b-form-group>
81-
<b-calendar id="ex-disabled-readonly" :disabled="disabled" :readonly="readonly"></b-calendar>
85+
86+
<b-calendar
87+
id="ex-disabled-readonly"
88+
:disabled="disabled"
89+
:readonly="readonly"
90+
></b-calendar>
8291
</div>
8392
</template>
8493

‎src/components/form-checkbox/README.md‎

Lines changed: 77 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -41,17 +41,23 @@
4141
```html
4242
<template>
4343
<div>
44-
<b-form-group label="Using options array:">
44+
<b-form-group label="Using options array:" v-slot="{ ariaDescribedby }">
4545
<b-form-checkbox-group
4646
id="checkbox-group-1"
4747
v-model="selected"
4848
:options="options"
49+
:aria-describedby="ariaDescribedby"
4950
name="flavour-1"
5051
></b-form-checkbox-group>
5152
</b-form-group>
5253

53-
<b-form-group label="Using sub-components:">
54-
<b-form-checkbox-group id="checkbox-group-2" v-model="selected" name="flavour-2">
54+
<b-form-group label="Using sub-components:" v-slot="{ ariaDescribedby }">
55+
<b-form-checkbox-group
56+
id="checkbox-group-2"
57+
v-model="selected"
58+
:aria-describedby="ariaDescribedby"
59+
name="flavour-2"
60+
>
5561
<b-form-checkbox value="orange">Orange</b-form-checkbox>
5662
<b-form-checkbox value="apple">Apple</b-form-checkbox>
5763
<b-form-checkbox value="pineapple">Pineapple</b-form-checkbox>
@@ -220,41 +226,57 @@ or if using individual checkboxes not inside a `<b-form-checkbox-group>`, set th
220226
```html
221227
<template>
222228
<div>
223-
<b-form-group label="Form-checkbox-group inline checkboxes (default)">
229+
<b-form-group
230+
label="Form-checkbox-group inline checkboxes (default)"
231+
v-slot="{ ariaDescribedby }"
232+
>
224233
<b-form-checkbox-group
225234
v-model="selected"
226235
:options="options"
236+
:aria-describedby="ariaDescribedby"
227237
name="flavour-1a"
228238
></b-form-checkbox-group>
229239
</b-form-group>
230240

231-
<b-form-group label="Form-checkbox-group stacked checkboxes">
241+
<b-form-group
242+
label="Form-checkbox-group stacked checkboxes"
243+
v-slot="{ ariaDescribedby }"
244+
>
232245
<b-form-checkbox-group
233246
v-model="selected"
234247
:options="options"
248+
:aria-describedby="ariaDescribedby"
235249
name="flavour-2a"
236250
stacked
237251
></b-form-checkbox-group>
238252
</b-form-group>
239253

240-
<b-form-group label="Individual stacked checkboxes (default)">
254+
<b-form-group
255+
label="Individual stacked checkboxes (default)"
256+
v-slot="{ ariaDescribedby }"
257+
>
241258
<b-form-checkbox
242259
v-for="option in options"
243260
v-model="selected"
244261
:key="option.value"
245262
:value="option.value"
263+
:aria-describedby="ariaDescribedby"
246264
name="flavour-3a"
247265
>
248266
{{ option.text }}
249267
</b-form-checkbox>
250268
</b-form-group>
251269

252-
<b-form-group label="Individual inline checkboxes">
270+
<b-form-group
271+
label="Individual inline checkboxes"
272+
v-slot="{ ariaDescribedby }"
273+
>
253274
<b-form-checkbox
254275
v-for="option in options"
255276
v-model="selected"
256277
:key="option.value"
257278
:value="option.value"
279+
:aria-describedby="ariaDescribedby"
258280
name="flavour-4a"
259281
inline
260282
>
@@ -395,30 +417,42 @@ variants). The default `button-variant` is `secondary`.
395417
```html
396418
<template>
397419
<div>
398-
<b-form-group label="Button-group style checkboxes">
420+
<b-form-group
421+
label="Button-group style checkboxes"
422+
v-slot="{ ariaDescribedby }"
423+
>
399424
<b-form-checkbox-group
400425
v-model="selected"
401426
:options="options"
427+
:aria-describedby="ariaDescribedby"
402428
name="buttons-1"
403429
buttons
404430
></b-form-checkbox-group>
405431
</b-form-group>
406432

407-
<b-form-group label="Button-group style checkboxes with variant primary and large buttons">
433+
<b-form-group
434+
label="Button-group style checkboxes with variant primary and large buttons"
435+
v-slot="{ ariaDescribedby }"
436+
>
408437
<b-form-checkbox-group
409438
v-model="selected"
410439
:options="options"
440+
:aria-describedby="ariaDescribedby"
411441
buttons
412442
button-variant="primary"
413443
size="lg"
414444
name="buttons-2"
415445
></b-form-checkbox-group>
416446
</b-form-group>
417447

418-
<b-form-group label="Stacked (vertical) button-group style checkboxes">
448+
<b-form-group
449+
label="Stacked (vertical) button-group style checkboxes"
450+
v-slot="{ ariaDescribedby }"
451+
>
419452
<b-form-checkbox-group
420453
v-model="selected"
421454
:options="options"
455+
:aria-describedby="ariaDescribedby"
422456
stacked
423457
buttons
424458
></b-form-checkbox-group>
@@ -486,18 +520,26 @@ Render groups of checkboxes with the look of a switches by setting the prop `swi
486520
```html
487521
<template>
488522
<div>
489-
<b-form-group label="Inline switch style checkboxes">
523+
<b-form-group
524+
label="Inline switch style checkboxes"
525+
v-slot="{ ariaDescribedby }"
526+
>
490527
<b-form-checkbox-group
491528
v-model="selected"
492529
:options="options"
530+
:aria-describedby="ariaDescribedby"
493531
switches
494532
></b-form-checkbox-group>
495533
</b-form-group>
496534

497-
<b-form-group label="Stacked (vertical) switch style checkboxes">
535+
<b-form-group
536+
label="Stacked (vertical) switch style checkboxes"
537+
v-slot="{ ariaDescribedby }"
538+
>
498539
<b-form-checkbox-group
499540
v-model="selected"
500541
:options="options"
542+
:aria-describedby="ariaDescribedby"
501543
switches
502544
stacked
503545
></b-form-checkbox-group>
@@ -553,18 +595,20 @@ by setting the `plain` prop.
553595
```html
554596
<template>
555597
<div>
556-
<b-form-group label="Plain inline checkboxes">
598+
<b-form-group label="Plain inline checkboxes" v-slot="{ ariaDescribedby }">
557599
<b-form-checkbox-group
558600
v-model="selected"
559601
:options="options"
602+
:aria-describedby="ariaDescribedby"
560603
plain
561604
></b-form-checkbox-group>
562605
</b-form-group>
563606

564-
<b-form-group label="Plain stacked checkboxes">
607+
<b-form-group label="Plain stacked checkboxes" v-slot="{ ariaDescribedby }">
565608
<b-form-checkbox-group
566609
v-model="selected"
567610
:options="options"
611+
:aria-describedby="ariaDescribedby"
568612
plain
569613
stacked
570614
></b-form-checkbox-group>
@@ -747,22 +791,25 @@ modifier.
747791
</b-form-checkbox>
748792
</template>
749793

750-
<b-form-checkbox-group
751-
id="flavors"
752-
v-model="selected"
753-
:options="flavours"
754-
name="flavors"
755-
class="ml-4"
756-
aria-label="Individual flavours"
757-
stacked
758-
></b-form-checkbox-group>
759-
</b-form-group>
760-
761-
<div>
762-
Selected: <strong>{{ selected }}</strong><br>
763-
All Selected: <strong>{{ allSelected }}</strong><br>
764-
Indeterminate: <strong>{{ indeterminate }}</strong>
765-
</div>
794+
<template v-slot="{ ariaDescribedby }">
795+
<b-form-checkbox-group
796+
id="flavors"
797+
v-model="selected"
798+
:options="flavours"
799+
:aria-describedby="ariaDescribedby"
800+
name="flavors"
801+
class="ml-4"
802+
aria-label="Individual flavours"
803+
stacked
804+
></b-form-checkbox-group>
805+
</b-form-group>
806+
807+
<div>
808+
Selected: <strong>{{ selected }}</strong><br>
809+
All Selected: <strong>{{ allSelected }}</strong><br>
810+
Indeterminate: <strong>{{ indeterminate }}</strong>
811+
</div>
812+
</template>
766813
</div>
767814
</template>
768815

‎src/components/form-datepicker/README.md‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,14 +68,26 @@ For disabling specific dates or setting minimum and maximum date limits, refer t
6868
```html
6969
<template>
7070
<div>
71-
<b-form-group label="Select date picker interactive state">
72-
<b-form-radio-group v-model="state" aria-controls="ex-disabled-readonly">
71+
<b-form-group
72+
label="Select date picker interactive state"
73+
v-slot="{ ariaDescribedby }"
74+
>
75+
<b-form-radio-group
76+
v-model="state"
77+
:aria-describedby="ariaDescribedby"
78+
aria-controls="ex-disabled-readonly"
79+
>
7380
<b-form-radio value="disabled">Disabled</b-form-radio>
7481
<b-form-radio value="readonly">Readonly</b-form-radio>
7582
<b-form-radio value="normal">Normal</b-form-radio>
7683
</b-form-radio-group>
7784
</b-form-group>
78-
<b-form-datepicker id="ex-disabled-readonly" :disabled="disabled" :readonly="readonly"></b-form-datepicker>
85+
86+
<b-form-datepicker
87+
id="ex-disabled-readonly"
88+
:disabled="disabled"
89+
:readonly="readonly"
90+
></b-form-datepicker>
7991
</div>
8092
</template>
8193

0 commit comments

Comments
 (0)