accessibility -tabindex of responsive controls

[MuellerMatthew]

There is currently no tabindex set to allow users to tab through the show/hide control used in the responsive layout, so when users are tabbing across a table the focus shifts from the top of the table to the bottom skipping over the controls to expand/collapse the child cells with the hidden data. There should be a tabindex of 0 set by default for each control to make it accessible.

[DataTables]

Thanks for filing this - I had thought I had something similar already, but it looks like it is in my own todo list!

The icons used for the show / hide control are currently :before pseudo elements, so tabindex wouldn't work with them. Responsive will need to be retooled for accessibility which is something I'd like to do for its 1.1 release (due to other development commitments and plans, that is likely a good few months away unfortunately).

[MuellerMatthew]

I found an easier and cleaner method to fix this issue by adding a createdRow function in the table initialization with the following code:

"createdRow" : function ( row, data, dataIndex) {
        $( row )
          .children( '.details-control' )
          .attr( 'tabindex', 0 )
          .keypress( function( e ) {
            if( e.which == 13 ) {//Enter key pressed
              $(e.currentTarget).click();
            }
          });
      }

Essentially every time a row is added, i check if it has a control element, and if it does, I make it so it can receive focus, and adds an event handler. This works when changing the filter, pagination, and when replacing all the data in the table, and it is cleaner than my other fix. I think DT Responsive could piggy back off this to make all the tables responsive by adding a default callback to the createdRow function in the plugin so that all of the tables are automatically accessible, or you could just add an example to the website, since it is a pretty simple change, that any user could do if they want their table accessible.

[johnpalaganas]

Any updates on the keyboard accessibility for the Responsive plugin?

[DataTables]

Not yet. I'll post back here when it is done.

[johnpalaganas]

Thank you Allan!

[DataTables]

Finally fixed now. it will be released as part of Responsive 2.0.0 - likely in about two weeks time. Any feedback on the v2 implementation is welcome.

[johnpalaganas]

I appreciate all your hard work Allan, it works great! :D

Observation:

• When the responsive mode is enabled (narrow window width) and I focus and hit enter key on the (+) to expand the hidden information.
• As soon as I resize the window to a large enough width to show every column. The information below disappears which is normal but the code below stays. Leaving a white space below the row.

<tr class="child"><td class="child" colspan="11"><ul data-dtr-index="5"><li data-dtr-index="0"><span class="dtr-title"></span> <span class="dtr-data"></span></li></ul></td></tr>

[DataTables]

Are you able to give me a link to the page showing the issue please. I've just tried to reproduce it locally but couldn't.

[johnpalaganas]

Sorry no live example to show you but will try to recreate it using live.datatables.net