diff --git a/src/components/dropdown/README.md b/src/components/dropdown/README.md index 5e72a46f454..7dc59356147 100644 --- a/src/components/dropdown/README.md +++ b/src/components/dropdown/README.md @@ -664,7 +664,8 @@ Providing a unique `id` prop ensures ARIA compliance by automatically adding the `aria-*` attributes in the rendered markup. The default ARIA role is set to `menu`, but you can change this default to another role (such as -`navigation`) via the `role` prop, depending on your user case. +`navigation`) via the `role` prop, depending on your user case. The `role` prop value will be used +to determine `aria-haspopup` attribute for the toggle button. When a menu item doesn't trigger navigation, it is recommended to use the `` sub-component (which is not announced as a link) instead of `` (which is presented diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index c7f72b7ed42..bc9ce938e9c 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -140,6 +140,7 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({ $buttonChildren = [h('span', { class: ['sr-only'] }, [this.toggleText])] buttonContentDomProps = {} } + const ariaHasPopupRoles = ['menu', 'listbox', 'tree', 'grid', 'dialog'] const $toggle = h( BButton, @@ -151,7 +152,7 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({ ...this.toggleAttrs, // Must have attributes id: this.safeId('_BV_toggle_'), - 'aria-haspopup': 'true', + 'aria-haspopup': ariaHasPopupRoles.includes(role) ? role : 'false', 'aria-expanded': toString(visible) }, props: { diff --git a/src/components/dropdown/dropdown.spec.js b/src/components/dropdown/dropdown.spec.js index 0a87dd816d7..d0f52380c46 100644 --- a/src/components/dropdown/dropdown.spec.js +++ b/src/components/dropdown/dropdown.spec.js @@ -63,7 +63,7 @@ describe('dropdown', () => { expect($button.classes()).toContain('dropdown-toggle') expect($button.classes().length).toBe(3) expect($button.attributes('aria-haspopup')).toBeDefined() - expect($button.attributes('aria-haspopup')).toEqual('true') + expect($button.attributes('aria-haspopup')).toEqual('menu') expect($button.attributes('aria-expanded')).toBeDefined() expect($button.attributes('aria-expanded')).toEqual('false') expect($button.attributes('id')).toBeDefined() @@ -125,7 +125,7 @@ describe('dropdown', () => { expect($toggle.classes()).toContain('dropdown-toggle-split') expect($toggle.classes().length).toBe(4) expect($toggle.attributes('aria-haspopup')).toBeDefined() - expect($toggle.attributes('aria-haspopup')).toEqual('true') + expect($toggle.attributes('aria-haspopup')).toEqual('menu') expect($toggle.attributes('aria-expanded')).toBeDefined() expect($toggle.attributes('aria-expanded')).toEqual('false') expect($toggle.attributes('id')).toBeDefined() @@ -551,7 +551,7 @@ describe('dropdown', () => { expect($dropdown.vm).toBeDefined() expect($toggle.attributes('aria-haspopup')).toBeDefined() - expect($toggle.attributes('aria-haspopup')).toEqual('true') + expect($toggle.attributes('aria-haspopup')).toEqual('menu') expect($toggle.attributes('aria-expanded')).toBeDefined() expect($toggle.attributes('aria-expanded')).toEqual('false') expect($dropdown.classes()).not.toContain('show') @@ -564,7 +564,7 @@ describe('dropdown', () => { await waitNT(wrapper.vm) expect($toggle.attributes('aria-haspopup')).toBeDefined() - expect($toggle.attributes('aria-haspopup')).toEqual('true') + expect($toggle.attributes('aria-haspopup')).toEqual('menu') expect($toggle.attributes('aria-expanded')).toBeDefined() expect($toggle.attributes('aria-expanded')).toEqual('true') expect($dropdown.classes()).toContain('show') @@ -754,7 +754,7 @@ describe('dropdown', () => { const $dropdown = wrapper.find('.dropdown') expect($toggle.attributes('aria-haspopup')).toBeDefined() - expect($toggle.attributes('aria-haspopup')).toEqual('true') + expect($toggle.attributes('aria-haspopup')).toEqual('menu') expect($toggle.attributes('aria-expanded')).toBeDefined() expect($toggle.attributes('aria-expanded')).toEqual('false') expect($dropdown.classes()).not.toContain('show') @@ -765,7 +765,7 @@ describe('dropdown', () => { expect(wrapper.emitted('show')).toBeDefined() expect(wrapper.emitted('show').length).toBe(1) expect($toggle.attributes('aria-haspopup')).toBeDefined() - expect($toggle.attributes('aria-haspopup')).toEqual('true') + expect($toggle.attributes('aria-haspopup')).toEqual('menu') expect($toggle.attributes('aria-expanded')).toBeDefined() expect($toggle.attributes('aria-expanded')).toEqual('false') expect($dropdown.classes()).not.toContain('show') @@ -777,7 +777,7 @@ describe('dropdown', () => { expect(wrapper.emitted('show')).toBeDefined() expect(wrapper.emitted('show').length).toBe(2) expect($toggle.attributes('aria-haspopup')).toBeDefined() - expect($toggle.attributes('aria-haspopup')).toEqual('true') + expect($toggle.attributes('aria-haspopup')).toEqual('menu') expect($toggle.attributes('aria-expanded')).toBeDefined() expect($toggle.attributes('aria-expanded')).toEqual('true') expect($dropdown.classes()).toContain('show') pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy