Add tabindex attribute to <b-dropdown>

Is your feature request related to a problem? Please describe…

Currently, there is no way to add the tabindex attribute to the button that opens the dropdown menu.

Current Problem I am having is with a dropdown menu I added to a custom form, which should not be included in the tab flow (tabindex=-1)

Describe the solution you’d like

A new attribute to define the tabindex of the button that opens the dropdown:

<b-dropdown tabindex="-1"/>
<b-dropdown toggle-tabindex="-1"/>

The menu can have one or two buttons, the tabindex attributes should probably both be set independently

Describe alternatives you’ve considered

Workaround I use at the moment:

import { BDropdown } from 'bootstrap-vue';

export default {
  mixins: [BDropdown],
  mounted() {
    this.patchTabindex();
  },
  updated() {
    this.patchTabindex();
  },

  methods: {
    patchTabindex() {
      // Fix dropdown button tabindex. We can't do this using bootstrap vue API. 
      // set tabindex="-1"
      this.$nextTick(() => {
        this.$el.querySelectorAll('.btn[aria-haspopup="true"]').forEach(btn => {
          btn.setAttribute('tabindex', '-1');
        });
      });
    }
  }
};

[michaelzangl]

@thiemeljiri The workaround in the first post should still be working.

[jakedolan]

An accessible use case for this is using a b-dropdown within a toolbar for use with a wysiwyg.

WAI-ARIA toolbar recommendations involve a roving tabindex so the user is able to tab/shift-tab beyond the toolbar and then return to the most recent button when tabbing back to the toolbar.

It does appear that adding toggleAttrs for user supplied toggle attributes was being worked on for v2.22, see commit from Jan 21. But the status of that release appears to be unknown.