0

I have a few input elements inside a Bootstrap panel-heading. I've got click handlers on these which works fine using a mouse, but I need them to be keyboard operable for WCAG compliance. Is there an easy way to have them respond to click OR spacebar/enter press? The only way I can see are either:

  • Changing the tags to buttons and removing the button styling with CSS
  • Adding a keydown trigger to the document and checking e.keyCode

Both of which seem long winded and kind if hackey.

EDIT: To be specific. In the header, I have the following structure:

------------------------------------------
- \/ Section Name      [15]       [On/Off]
------------------------------------------

Wrapping the elements in individual <a> tags allows them to receive focus, but only actually clicking the section name will trigger the expand handler.

Echilon
  • 10,064
  • 33
  • 131
  • 217
  • 1
    Input elements can receive tab focus by default, which is usually sufficient to be considered accessible to keyboard-only users. Can you please explain what action you want to achieve with a "click OR spacebar/enter press?" – Josh Dec 20 '17 at 14:35
  • Detail added :) – Echilon Dec 20 '17 at 14:39
  • I guess that I'm a little confused here. My understanding of Bootstrap panels is that they are static (and also deprecated in v4). What you're describing here seems to be more like a Bootstrap Accordion component. Is there some reason that you're not using one of those? https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example – Josh Dec 20 '17 at 15:39
  • The accordion is pretty much what we have, but we use BS3 and upgrading to BS4 isn't planned until next year. – Echilon Dec 21 '17 at 14:19

1 Answers1

1

I worked around this by using <button> elements instead of anchors and spans and toggling the aria-expanded attribute via JavaScript.

Echilon
  • 10,064
  • 33
  • 131
  • 217