aria-selected attribute is not set correctly when switching tabs

[chaitanyagupta]

When a user selects a tab, the active tab element should set its attribute aria-selected=true and all other tabs should set aria-selected=false. bootstrap.js does this and at least one popular theme relies on this.

For demo, take a look at the following pages:

1. http://deftask-design.deftask.com.s3-website.us-east-2.amazonaws.com/bootstrap/index.html#features
   This uses bootstrap.js and you'll see that both tabs are switched correctly and the active tab is highlighted.

2. Now look at http://deftask-design.deftask.com.s3-website.us-east-2.amazonaws.com/bn-tab-aria-selected-bug/index.html#features
   This uses bootstrap-native alongwith my fixes from Fix clicks on child elements of a tab #253. You will notice that tabs switch correctly but the active tab does not get highlighted correctly.

3. Lastly look at http://deftask-design.deftask.com.s3-website.us-east-2.amazonaws.com/bn-tab-click-fix/index.html#features
   This uses the fixed bootstrap native from the previous example alongwith a little bit of event handling that sets aria-selected when tab is hidden or shown. In this example tabs switch correctly and the active tab is also highlighted correctly on switching.

The event handling code which fixes the issue is this:

document.querySelectorAll('[role=tab]').forEach(function (node) {
    node.addEventListener('shown.bs.tab', function (e) {
        e.currentTarget.setAttribute('aria-selected', true);
    });
    node.addEventListener('hidden.bs.tab', function (e) {
        e.currentTarget.setAttribute('aria-selected', false);
    });
});

The reason I have filed an issue is because I don't need to use this event handling code when using bootstrap.js. Only with bootstrap-native do I need it. So I think this should be fixed.

I am not sure what would be the correct way to fix this in code, which is why I have filed an issue and not a PR.

[thednp]

Will look into it, thanks for reporting.

[thednp]

@chaitanyagupta please test latest master and let me know how it goes :)

[chaitanyagupta]

Hi @thednp I checked it and its fixed! Thanks you!