fix(b-dropdown): Sets correct aria-haspopup attribute for the toggle button

Olena Horal-Koretska · Olena Horal-Koretska · commit f94b832d47fe · 2021-12-08T21:51:47.000+02:00
the `aria-haspopup` attribute on the toggle button is set based on the `role` property provided for the dropdown popup
diff --git 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 `<b-dropdown-item-button>`
 sub-component (which is not announced as a link) instead of `<b-dropdown-item>` (which is presented
diff --git 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: {
