Tabbing through list of columns in column visibility not working when using foundation styling

cuspenser

Link to test case: https://datatables.net/extensions/buttons/examples/styling/foundation.html
Description of problem:
Column Visibility using foundation does not allow you to tab through the column options. See the example above. When you click on the "Column Visibility" button and the menu of columns appear, tabbing only rotates through the first two options in the list and goes no further.

It doesn't look like focus is occurring correctly on the first column. The focus border is surrounding the anchor tag and not the li tag. Not sure if that's part of the issue, but it's something I've noticed.

I'm using Foundation 6.4.3 in my application, too, which I believe is also being used by DataTables.

Any ideas on a workaround?

Thank you,

Tanner

allan

Hi Tanner,

That is very odd! Thanks for letting me know about that, I'll take a look.

Allan

cuspenser

Thanks, Allan. I checked the other frameworks and it looks like Bootstrap 3 is doing the same thing and with Fomantic, tabbing doesn't work at all.

cuspenser

I was able to employ a rudimentary workaround for this issue. Tabbing now works through the columns, but the very first column listed does not show focus when tabbing into the modal; it will focus when shift+tab back into it after tabbing away from it. I'm not sure how to handle that, so I'm open to suggestions.

$(document).on('click keydown', '.dt-button-collection .menu .dt-button.buttons-columnVisibility', function(e) {
    const $items = $('.dt-button-collection .menu .dt-button.buttons-columnVisibility');
    let index = $items.index(this);
    
    switch(e.key) {
        case 'Tab':
        if (e.shiftKey) {
            // Shift+Tab: move backward
            $items.eq(index - 1).focus();
        } else {
            // Tab: move forward
            $items.eq(index + 1).focus();
        }
        e.preventDefault(); // Prevent browser from exiting the menu
        break;
    }
});

allan

Hi,

Where the tab index was being added wasn't very smart - it just did it on the button container, which is many of the styles is the button, but not for Foundation. I've committed a change to make it smarter if there is a liner which is a real button element. I've also tweaked the CSS to make the focus outline visible. In many cases it was being cut off by the overflow: hidden style.

This will be in the nightly build soon and the next Buttons release .

Thanks for pointing this issue out!

Allan

cuspenser

Thanks, Allan! I appreciate it