Blue border flash on sort

allan

In reply to Tobias' question: https://twitter.com/#!/tobiasbg/status/165584815318511616 :

This is caused by the full keyboard accessibility of DataTables 1.9. Because the sortable TH elements can now take focus (try tabbing through them) a focus outline is shown to users using this method. It disappears quickly because DataTables will blur the focus on mouse click.

To prevent this, but still retain full keyboard navigation support, simply add:

[code]
table.dataTable th:active {
outline: none;
}
[/code]

to the CSS. Then for the brief time the element is in the active state there will be no outline. I've just updated the bootstrap examples with this code.

Regards,
Allan

TobiasBg

Hi Allan,

thanks for the explanation!

Just to make sure I got it: By adding the "tabindex" attribute, the automatically became :focus/:active-able and then Chrome just applies the default user agent styling (blue outline) to those?

Thanks for making me smarter again! :-)

Best wishes,
Tobias

allan

Basically yes. It makes the element "focusable". If I removed the 'blur' from DataTables then the blue outline would remain since the element would still have focus (this is why it is important to blur only on click, not keyboard navigation).

So the important thing is to keep it looking visually attractive, while also retaining keyboard access. The trick with :active and blur on click allows this to be done :-)

Allan