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

Commit d92c2f1

Browse files
sharlattaOlena Horal-Koretskaxanf
authored
fix(b-dropdown): Sets correct aria-haspopup attribute for the toggle button (#6865)
the `aria-haspopup` attribute on the toggle button is set based on the `role` property provided for the dropdown popup Co-authored-by: Olena Horal-Koretska <ohoralkoretska@gitlab.com> Co-authored-by: Illya Klymov <xanf@xanf.me>
1 parent d345353 commit d92c2f1

File tree

3 files changed

+11
-9
lines changed

3 files changed

+11
-9
lines changed

‎src/components/dropdown/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -664,7 +664,8 @@ Providing a unique `id` prop ensures ARIA compliance by automatically adding the
664664
`aria-*` attributes in the rendered markup.
665665

666666
The default ARIA role is set to `menu`, but you can change this default to another role (such as
667-
`navigation`) via the `role` prop, depending on your user case.
667+
`navigation`) via the `role` prop, depending on your user case. The `role` prop value will be used
668+
to determine `aria-haspopup` attribute for the toggle button.
668669

669670
When a menu item doesn't trigger navigation, it is recommended to use the `<b-dropdown-item-button>`
670671
sub-component (which is not announced as a link) instead of `<b-dropdown-item>` (which is presented

‎src/components/dropdown/dropdown.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
140140
$buttonChildren = [h('span', { class: ['sr-only'] }, [this.toggleText])]
141141
buttonContentDomProps = {}
142142
}
143+
const ariaHasPopupRoles = ['menu', 'listbox', 'tree', 'grid', 'dialog']
143144

144145
const $toggle = h(
145146
BButton,
@@ -151,7 +152,7 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
151152
...this.toggleAttrs,
152153
// Must have attributes
153154
id: this.safeId('_BV_toggle_'),
154-
'aria-haspopup': 'true',
155+
'aria-haspopup': ariaHasPopupRoles.includes(role) ? role : 'false',
155156
'aria-expanded': toString(visible)
156157
},
157158
props: {

‎src/components/dropdown/dropdown.spec.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ describe('dropdown', () => {
6363
expect($button.classes()).toContain('dropdown-toggle')
6464
expect($button.classes().length).toBe(3)
6565
expect($button.attributes('aria-haspopup')).toBeDefined()
66-
expect($button.attributes('aria-haspopup')).toEqual('true')
66+
expect($button.attributes('aria-haspopup')).toEqual('menu')
6767
expect($button.attributes('aria-expanded')).toBeDefined()
6868
expect($button.attributes('aria-expanded')).toEqual('false')
6969
expect($button.attributes('id')).toBeDefined()
@@ -125,7 +125,7 @@ describe('dropdown', () => {
125125
expect($toggle.classes()).toContain('dropdown-toggle-split')
126126
expect($toggle.classes().length).toBe(4)
127127
expect($toggle.attributes('aria-haspopup')).toBeDefined()
128-
expect($toggle.attributes('aria-haspopup')).toEqual('true')
128+
expect($toggle.attributes('aria-haspopup')).toEqual('menu')
129129
expect($toggle.attributes('aria-expanded')).toBeDefined()
130130
expect($toggle.attributes('aria-expanded')).toEqual('false')
131131
expect($toggle.attributes('id')).toBeDefined()
@@ -551,7 +551,7 @@ describe('dropdown', () => {
551551
expect($dropdown.vm).toBeDefined()
552552

553553
expect($toggle.attributes('aria-haspopup')).toBeDefined()
554-
expect($toggle.attributes('aria-haspopup')).toEqual('true')
554+
expect($toggle.attributes('aria-haspopup')).toEqual('menu')
555555
expect($toggle.attributes('aria-expanded')).toBeDefined()
556556
expect($toggle.attributes('aria-expanded')).toEqual('false')
557557
expect($dropdown.classes()).not.toContain('show')
@@ -564,7 +564,7 @@ describe('dropdown', () => {
564564
await waitNT(wrapper.vm)
565565

566566
expect($toggle.attributes('aria-haspopup')).toBeDefined()
567-
expect($toggle.attributes('aria-haspopup')).toEqual('true')
567+
expect($toggle.attributes('aria-haspopup')).toEqual('menu')
568568
expect($toggle.attributes('aria-expanded')).toBeDefined()
569569
expect($toggle.attributes('aria-expanded')).toEqual('true')
570570
expect($dropdown.classes()).toContain('show')
@@ -754,7 +754,7 @@ describe('dropdown', () => {
754754
const $dropdown = wrapper.find('.dropdown')
755755

756756
expect($toggle.attributes('aria-haspopup')).toBeDefined()
757-
expect($toggle.attributes('aria-haspopup')).toEqual('true')
757+
expect($toggle.attributes('aria-haspopup')).toEqual('menu')
758758
expect($toggle.attributes('aria-expanded')).toBeDefined()
759759
expect($toggle.attributes('aria-expanded')).toEqual('false')
760760
expect($dropdown.classes()).not.toContain('show')
@@ -765,7 +765,7 @@ describe('dropdown', () => {
765765
expect(wrapper.emitted('show')).toBeDefined()
766766
expect(wrapper.emitted('show').length).toBe(1)
767767
expect($toggle.attributes('aria-haspopup')).toBeDefined()
768-
expect($toggle.attributes('aria-haspopup')).toEqual('true')
768+
expect($toggle.attributes('aria-haspopup')).toEqual('menu')
769769
expect($toggle.attributes('aria-expanded')).toBeDefined()
770770
expect($toggle.attributes('aria-expanded')).toEqual('false')
771771
expect($dropdown.classes()).not.toContain('show')
@@ -777,7 +777,7 @@ describe('dropdown', () => {
777777
expect(wrapper.emitted('show')).toBeDefined()
778778
expect(wrapper.emitted('show').length).toBe(2)
779779
expect($toggle.attributes('aria-haspopup')).toBeDefined()
780-
expect($toggle.attributes('aria-haspopup')).toEqual('true')
780+
expect($toggle.attributes('aria-haspopup')).toEqual('menu')
781781
expect($toggle.attributes('aria-expanded')).toBeDefined()
782782
expect($toggle.attributes('aria-expanded')).toEqual('true')
783783
expect($dropdown.classes()).toContain('show')

0 commit comments

Comments
 (0)