angular-hammer icon indicating copy to clipboard operation
angular-hammer copied to clipboard

[Accessibility] Cannot trigger "hm-tap" in button using keyboard

Open adgoncal opened this issue 9 years ago • 1 comments

When you use the keyboard "tab" key to focus the button and then press "enter" key, hm-tap does not get triggered, but ng-click does. http://plnkr.co/edit/ooecDAoIrGRLmcbvOsDA?p=preview

Additionally, if I use anchor elements instead, neither one of the events gets focus unless they have an href attribute and if that is the case, then it behaves the same way as the buttons, hm-tap does not trigger, but ng-click does. http://plnkr.co/edit/aE99UzMiTJk4khzSjEBK?p=preview

It may be related to: https://github.com/hammerjs/hammer.js/issues/312

adgoncal avatar Jul 15 '15 22:07 adgoncal

I am currently adding ng-keydown and checking for "enter" or "space" keyCode as a solution.

http://plnkr.co/edit/MABVJKLLXIQH1xmCpdg3?p=preview

HTML:

<button hm-tap="doSomething($event)" ng-keydown="doSomething($event)"></button>
<a hm-tap="doSomething($event)" ng-keydown="doSomething($event)" tabindex="0"></a>

JavaScript:

function doSomething(event) {
  if(event.type === 'keydown') {
    // quit early if keyCode is not "enter" or "space" key.
    if(!(event.keyCode === 13 || event.keyCode === 32)) {
      return;
    }
  }

  // do something ...
}

adgoncal avatar Jul 16 '15 15:07 adgoncal