🌐 AI搜索 & 代理 主页
Skip to content

Commit 16f777b

Browse files
jacobmllr95jacobmllr95
authored
fix(b-form-group): accessibility when label-for prop not set (#6006)
1 parent 37ec7e9 commit 16f777b

File tree

2 files changed

+8
-14
lines changed

2 files changed

+8
-14
lines changed

‎src/components/form-group/form-group.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -383,7 +383,8 @@ export const BFormGroup = {
383383
staticClass: 'bv-no-focus-ring',
384384
attrs: {
385385
tabindex: isFieldset ? '-1' : null,
386-
role: isFieldset ? 'group' : null
386+
role: isFieldset ? 'group' : null,
387+
'aria-labelledby': isFieldset ? labelId : null
387388
}
388389
},
389390
[normalizeSlot() || h(), $invalidFeedback, $validFeedback, $description]

‎src/components/form-group/form-group.spec.js‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,7 @@ describe('form-group', () => {
3939
expect(wrapper.find('label').exists()).toBe(false)
4040
expect(wrapper.find('legend').exists()).toBe(false)
4141
expect(wrapper.find('div').exists()).toBe(true)
42-
expect(wrapper.find('div').attributes('role')).toBeDefined()
4342
expect(wrapper.find('div').attributes('role')).toEqual('group')
44-
expect(wrapper.find('div').attributes('tabindex')).toBeDefined()
4543
expect(wrapper.find('div').attributes('tabindex')).toEqual('-1')
4644
expect(wrapper.text()).toEqual('')
4745

@@ -61,7 +59,6 @@ describe('form-group', () => {
6159
await waitNT(wrapper.vm)
6260

6361
expect(wrapper.find('div').exists()).toBe(true)
64-
expect(wrapper.find('div').attributes('role')).toBeDefined()
6562
expect(wrapper.find('div').attributes('role')).toEqual('group')
6663
expect(wrapper.find('div[role="group"]').text()).toEqual('foobar')
6764
expect(wrapper.text()).toEqual('foobar')
@@ -82,7 +79,6 @@ describe('form-group', () => {
8279
})
8380

8481
expect(wrapper.vm).toBeDefined()
85-
expect(wrapper.attributes('id')).toBeDefined()
8682
expect(wrapper.attributes('id')).toEqual('foo')
8783
expect(wrapper.attributes('aria-labelledby')).not.toBeDefined()
8884
expect(wrapper.find('label').attributes('id')).toEqual('foo__BV_label_')
@@ -106,31 +102,29 @@ describe('form-group', () => {
106102
// Auto ID is created after mounted
107103
await waitNT(wrapper.vm)
108104

105+
const formGroupId = wrapper.attributes('id')
109106
expect(wrapper.element.tagName).not.toBe('FIELDSET')
110107
expect(wrapper.element.tagName).toBe('DIV')
111108
expect(wrapper.classes()).toContain('form-group')
112109
expect(wrapper.classes().length).toBe(1)
113110
expect(wrapper.attributes('id')).toBeDefined()
114-
expect(wrapper.attributes('role')).toBeDefined()
115111
expect(wrapper.attributes('role')).toEqual('group')
116112
expect(wrapper.attributes('aria-labelledby')).not.toBeDefined()
117113
expect(wrapper.find('legend').exists()).toBe(false)
118114
expect(wrapper.find('label').exists()).toBe(true)
119115
expect(wrapper.find('label').classes()).toContain('d-block')
120116
expect(wrapper.find('label').text()).toEqual('test')
121-
expect(wrapper.find('label').attributes('for')).toBeDefined()
122117
expect(wrapper.find('label').attributes('for')).toEqual('input-id')
123118
expect(wrapper.find('div > div').exists()).toBe(true)
124119
expect(wrapper.find('div > div').classes()).toContain('bv-no-focus-ring')
125120
expect(wrapper.find('div > div').classes().length).toBe(1)
126121
expect(wrapper.find('div > div').attributes('role')).not.toBeDefined()
127122
expect(wrapper.find('div > div').attributes('tabindex')).not.toBeDefined()
123+
expect(wrapper.find('div > div').attributes('aria-labelledby')).not.toBeDefined()
128124
expect(wrapper.find('div > div > input').exists()).toBe(true)
129125
expect(wrapper.find('div > div > input').attributes('aria-describedby')).not.toBeDefined()
130126
expect(wrapper.find('div > div > input').attributes('aria-labelledby')).not.toBeDefined()
131127
expect(wrapper.find('div > div').text()).toEqual('')
132-
const formGroupId = wrapper.attributes('id')
133-
expect(wrapper.find('label').attributes('id')).toBeDefined()
134128
expect(wrapper.find('label').attributes('id')).toEqual(`${formGroupId}__BV_label_`)
135129

136130
wrapper.destroy()
@@ -160,7 +154,6 @@ describe('form-group', () => {
160154
expect(wrapper.classes()).toContain('form-group')
161155
expect(wrapper.classes()).toContain('form-row')
162156
expect(wrapper.classes().length).toBe(2)
163-
expect(wrapper.attributes('role')).toBeDefined()
164157
expect(wrapper.attributes('role')).toEqual('group')
165158
expect(wrapper.attributes('aria-labelledby')).not.toBeDefined()
166159
expect(wrapper.find('label').exists()).toBe(true)
@@ -176,6 +169,9 @@ describe('form-group', () => {
176169
expect(wrapper.find('div > div').classes()).toContain('col')
177170
expect(wrapper.find('div > div').classes()).toContain('bv-no-focus-ring')
178171
expect(wrapper.find('div > div').classes().length).toBe(2)
172+
expect(wrapper.find('div > div').attributes('role')).not.toBeDefined()
173+
expect(wrapper.find('div > div').attributes('tabindex')).not.toBeDefined()
174+
expect(wrapper.find('div > div').attributes('aria-labelledby')).not.toBeDefined()
179175

180176
wrapper.destroy()
181177
})
@@ -200,7 +196,6 @@ describe('form-group', () => {
200196

201197
const $input = wrapper.find('input')
202198
expect($input.exists()).toBe(true)
203-
expect($input.attributes('aria-describedby')).toBeDefined()
204199
expect($input.attributes('aria-describedby')).toEqual('/group-id__BV_description_')
205200

206201
wrapper.destroy()
@@ -249,6 +244,7 @@ describe('form-group', () => {
249244
expect(wrapper.find('fieldset > div > div').classes().length).toBe(2)
250245
expect(wrapper.find('fieldset > div > div').attributes('role')).toEqual('group')
251246
expect(wrapper.find('fieldset > div > div').attributes('tabindex')).toEqual('-1')
247+
expect(wrapper.find('fieldset > div > div').attributes('aria-labelledby')).toBeDefined()
252248

253249
wrapper.destroy()
254250
})
@@ -329,7 +325,6 @@ describe('form-group', () => {
329325

330326
const $input = wrapper.find('input')
331327
expect($input.exists()).toBe(true)
332-
expect($input.attributes('aria-describedby')).toBeDefined()
333328
expect($input.attributes('aria-describedby')).toEqual('group-id__BV_description_')
334329

335330
// With state = true, description and valid are visible
@@ -350,11 +345,9 @@ describe('form-group', () => {
350345
state: false
351346
})
352347
await waitNT(wrapper.vm)
353-
expect($input.attributes('aria-describedby')).toBeDefined()
354348
expect($input.attributes('aria-describedby')).toEqual(
355349
'group-id__BV_description_ group-id__BV_feedback_invalid_'
356350
)
357-
expect(wrapper.attributes('aria-invalid')).toBeDefined()
358351
expect(wrapper.attributes('aria-invalid')).toEqual('true')
359352
expect(wrapper.classes()).not.toContain('is-valid')
360353
expect(wrapper.classes()).toContain('is-invalid')

0 commit comments

Comments
 (0)