CSS for Changing Header Keyboard Focus Colour?

  • Resolved justenbennettca

    (@justenbennettca)


    4 years, 7 months ago

    I’m trying to ensure the website I’m working on is WCAG 2.0 compliant and the one major issue I’m having with TablePress is with my header row. When I hover over it, the colour changes and that’s great. The problem is when I use keyboard focus to select a header column, there’s no indication that the particular header cell is active—no colour change or anything.

    Is there any CSS styling code I could use so when I tab to a header column with keyboard focus that the colour will change indicating that header cell is now active?

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Yes, this should be possible! Please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress .sorting:focus {
	background-color: #049cdb;
}

    Regards,
    Tobias

    Thread Starter justenbennettca

    (@justenbennettca)

    Works great! Thanks!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS for Changing Header Keyboard Focus Colour?’ is closed to new replies.