Keyboard navigation for Buttons collection possible?

sgustafsson

Is there a way to enable keyboard navigation for buttons with collections ( https://datatables.net/reference/button/collection ) ?

Using TAB, I can navigate from one button to the other, I can also hit return and the submenu opens in case the button has a a drop down with another set of buttons, but those buttons in the dropdown don't seems to be accessible via TAB or any other key.

The same goes for column visibility and page length buttons, how would I access the buttons in the respective dropdown via keyboard?

Here's a snippet of my code:

{
                extend: 'collection',
                text: 'Export',
                titleAttr: 'Export',
                className:  "my_button_space_class", 
                buttons: ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5', 'print'],
                fade: true
            }, { extend: 'colvis', className:  "my_button_space_class", titleAttr: 'Column visibility' }, { extend: 'pageLength', className:  "my_button_space_class", titleAttr: 'Show number of columns'}],

allan

That sounds like a limitation to me at the moment - thanks for highlighting it. You can set a tab index for the buttons, but you shouldn't need to. I'll look into this.

Allan

sgustafsson

When I inspect these elements, it seems as if they have tabindex=0 already set:

<ul class="dt-button-collection dropdown-menu" style="top: 643px; left: 47px;">
<li class="dt-button" tabindex="0" aria-controls="allComponentsTable" title="... CC">
<a href="#">... CC</a></li>
<li class="dt-button" tabindex="0" aria-controls="allComponentsTable" title="... PP">
<a href="#">... PP</a></li>
<li class="dt-button" tabindex="0" aria-controls="allComponentsTable" title="... OS">
<a href="#">... OS</a></li>
</ul>

Should I set another tabindex value for each button of the collection? Can you give an example ?

sgustafsson

Oh, I forgot to mention that I am using the accessibility plugin from here as well - https://github.com/paypal/bootstrap-accessibility-plugin - maybe it matters...

sgustafsson

After more research (a.k.a. browsing stackoverflow.com), it seems as if setting role="menu" on th ul element could help me. there's a working JSFiddle example at http://jsfiddle.net/damphat/WJS9p/

Problem is, I wasn't able to set this attribute yet, I kind of miss the right point in time (event?) when to set role="menu" on the ul elements or specifically all .dt-button-collection elements.

I tried in my initComplete functionfor the respective datatable, but no luck.

Any suggestions ?

allan

There is no callback event for that in Buttons. It would probably be best to add it to the source here. Would you like to send a PR?

Allan

sgustafsson

I am flattered, but you overestimate my development skills ;-) I have never worked with github and PR. I'll probably create separate buttons for the time being.

allan

I've added it here. It will be in the nightly version shortly and in the release version with the next release.

Regards,
Allan