Custom tabindex in modal does not work

Describe the bug

Elements with tabindex > 0 in the modal are never activated.

Steps to reproduce the bug

1. Create a modal with elements having tabindex > 0, ex:

<template>
    <b-modal title="Some title" id="edit-text-element-modal">
        <input tabindex=0 type="text" placeholder="Some input which can be tabbed">
        <template v-slot:modal-footer>
            <button tabindex="2">
                Cancel
            </button>
            <button tabindex="1">
                OK
            </button>
        </template>
    </b-modal>
</template>

1. Display it somehow, ex.

    mounted() {
        this.$bvModal.show("edit-text-element-modal");
    }

1. When modal is opened, try to navigate with TAB through all the tabable elements (here: input and two buttons)
2. Elements with tabindex > 0 are never focused.

Expected behavior

Elements with tabindex > 0 are focused in the correct order, i.e. “OK” button, “Cancel” button, input field.

Versions

Libraries:

• BootstrapVue: 2.14.0
• Vue: 2.6.11

Environment:

• Device: Lenovo Thinkpad
• OS: Ubuntu 20.04.2 LTS
• Browser: Firefox
• Version: 85.0 x64

Additional context

In short, this behavior caused problems when I wanted to change tab order of the buttons (make OK button get focus first even if it’s later in the DOM).

After looking through the https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/modal.js, I think it’s caused by tabTraps with tabindex="0". TAB index starts at index 0 and cannot leave that “0 level”, because when it is about to do so, it’s reset to one of the tabTraps at stays at 0.

[Voodu]

Here’s how you can achieve it: https://jsfiddle.net/websiter/mfL167jd/

It’s setting tabindex to -1 for all elements you want to exclude, setting footer buttons tabindex=0. Note their order in DOM should be the order in which you want the tabindex to select them and I’m also using CSS flexbox order to change their display order. It should work cross browser (but I haven’t tested it outside Chrome).

I woudn’t recommend setting tabindex values above 0 as in production scenarios you’re likely to have other elements with tabindex=0 in page and you might get weird results tabbing through elements in page while modal is open.

That CSS order should solve my problem. Thank you.

[andrei-gheorghiu]

I can’t seem to tab to the close button or input in your fiddle, is that intended?

Yep, it’s intended. I’ve set their tabidex values to -1 (a.k.a: skipped by tabbing - but programmatically focusable). If I leave them focusable the footer buttons become un-focusable. I’m not sure why at this point.