Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(b-form-group): accessibility when label-for prop not set (#6006)
  • Loading branch information
jacobmllr95 committed Nov 4, 2020
1 parent 37ec7e9 commit 16f777b
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 14 deletions.
3 changes: 2 additions & 1 deletion src/components/form-group/form-group.js
Expand Up @@ -383,7 +383,8 @@ export const BFormGroup = {
staticClass: 'bv-no-focus-ring',
attrs: {
tabindex: isFieldset ? '-1' : null,
role: isFieldset ? 'group' : null
role: isFieldset ? 'group' : null,
'aria-labelledby': isFieldset ? labelId : null
}
},
[normalizeSlot() || h(), $invalidFeedback, $validFeedback, $description]
Expand Down
19 changes: 6 additions & 13 deletions src/components/form-group/form-group.spec.js
Expand Up @@ -39,9 +39,7 @@ describe('form-group', () => {
expect(wrapper.find('label').exists()).toBe(false)
expect(wrapper.find('legend').exists()).toBe(false)
expect(wrapper.find('div').exists()).toBe(true)
expect(wrapper.find('div').attributes('role')).toBeDefined()
expect(wrapper.find('div').attributes('role')).toEqual('group')
expect(wrapper.find('div').attributes('tabindex')).toBeDefined()
expect(wrapper.find('div').attributes('tabindex')).toEqual('-1')
expect(wrapper.text()).toEqual('')

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

expect(wrapper.find('div').exists()).toBe(true)
expect(wrapper.find('div').attributes('role')).toBeDefined()
expect(wrapper.find('div').attributes('role')).toEqual('group')
expect(wrapper.find('div[role="group"]').text()).toEqual('foobar')
expect(wrapper.text()).toEqual('foobar')
Expand All @@ -82,7 +79,6 @@ describe('form-group', () => {
})

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

const formGroupId = wrapper.attributes('id')
expect(wrapper.element.tagName).not.toBe('FIELDSET')
expect(wrapper.element.tagName).toBe('DIV')
expect(wrapper.classes()).toContain('form-group')
expect(wrapper.classes().length).toBe(1)
expect(wrapper.attributes('id')).toBeDefined()
expect(wrapper.attributes('role')).toBeDefined()
expect(wrapper.attributes('role')).toEqual('group')
expect(wrapper.attributes('aria-labelledby')).not.toBeDefined()
expect(wrapper.find('legend').exists()).toBe(false)
expect(wrapper.find('label').exists()).toBe(true)
expect(wrapper.find('label').classes()).toContain('d-block')
expect(wrapper.find('label').text()).toEqual('test')
expect(wrapper.find('label').attributes('for')).toBeDefined()
expect(wrapper.find('label').attributes('for')).toEqual('input-id')
expect(wrapper.find('div > div').exists()).toBe(true)
expect(wrapper.find('div > div').classes()).toContain('bv-no-focus-ring')
expect(wrapper.find('div > div').classes().length).toBe(1)
expect(wrapper.find('div > div').attributes('role')).not.toBeDefined()
expect(wrapper.find('div > div').attributes('tabindex')).not.toBeDefined()
expect(wrapper.find('div > div').attributes('aria-labelledby')).not.toBeDefined()
expect(wrapper.find('div > div > input').exists()).toBe(true)
expect(wrapper.find('div > div > input').attributes('aria-describedby')).not.toBeDefined()
expect(wrapper.find('div > div > input').attributes('aria-labelledby')).not.toBeDefined()
expect(wrapper.find('div > div').text()).toEqual('')
const formGroupId = wrapper.attributes('id')
expect(wrapper.find('label').attributes('id')).toBeDefined()
expect(wrapper.find('label').attributes('id')).toEqual(`${formGroupId}__BV_label_`)

wrapper.destroy()
Expand Down Expand Up @@ -160,7 +154,6 @@ describe('form-group', () => {
expect(wrapper.classes()).toContain('form-group')
expect(wrapper.classes()).toContain('form-row')
expect(wrapper.classes().length).toBe(2)
expect(wrapper.attributes('role')).toBeDefined()
expect(wrapper.attributes('role')).toEqual('group')
expect(wrapper.attributes('aria-labelledby')).not.toBeDefined()
expect(wrapper.find('label').exists()).toBe(true)
Expand All @@ -176,6 +169,9 @@ describe('form-group', () => {
expect(wrapper.find('div > div').classes()).toContain('col')
expect(wrapper.find('div > div').classes()).toContain('bv-no-focus-ring')
expect(wrapper.find('div > div').classes().length).toBe(2)
expect(wrapper.find('div > div').attributes('role')).not.toBeDefined()
expect(wrapper.find('div > div').attributes('tabindex')).not.toBeDefined()
expect(wrapper.find('div > div').attributes('aria-labelledby')).not.toBeDefined()

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

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

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

wrapper.destroy()
})
Expand Down Expand Up @@ -329,7 +325,6 @@ describe('form-group', () => {

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

// With state = true, description and valid are visible
Expand All @@ -350,11 +345,9 @@ describe('form-group', () => {
state: false
})
await waitNT(wrapper.vm)
expect($input.attributes('aria-describedby')).toBeDefined()
expect($input.attributes('aria-describedby')).toEqual(
'group-id__BV_description_ group-id__BV_feedback_invalid_'
)
expect(wrapper.attributes('aria-invalid')).toBeDefined()
expect(wrapper.attributes('aria-invalid')).toEqual('true')
expect(wrapper.classes()).not.toContain('is-valid')
expect(wrapper.classes()).toContain('is-invalid')
Expand Down

0 comments on commit 16f777b

Please sign in to comment.