<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body class="container">
<article>
<p class="h3">Accessibility test for Angularjs ng-click and angular-hammer hm-tap</p>
<p>Using keyboard, press <code>Tab</code> until one of the buttons is focused, then press <code>space</code> or <code>enter</code>.</p>
<p>Expected: event should be triggered.</p>
</article>
<div class="test container" ng-controller="AppCtrl as vm">
<h2>Using buttons:</h2>
<nav>
<button class="btn btn-default" ng-click="vm.doSomething($event)" ng-keydown="vm.doSomething($event)">Ng-Click</button>
<button class="btn btn-default" hm-tap="vm.doSomething($event)" ng-keydown="vm.doSomething($event)">Hm-Tap</button>
</nav>
<br>
<article class="well">
<p ng-repeat="(event, count) in vm.message"><span ng-bind="event"></span>: <span ng-bind="count"></span></p>
</article>
</div>
<br>
<div class="test container" ng-controller="AppCtrl as vm">
<h2>Using anchors:</h2>
<nav>
<a class="btn btn-link" ng-click="vm.doSomething($event)" ng-keydown="vm.doSomething($event)" tabindex="0">Ng-Click</a>
<a class="btn btn-link" hm-tap="vm.doSomething($event)" ng-keydown="vm.doSomething($event)" tabindex="0">Hm-Tap</a>
</nav>
<br>
<article class="well">
<p ng-repeat="(event, count) in vm.message"><span ng-bind="event"></span>: <span ng-bind="count"></span></p>
</article>
</div>
<script data-require="hammer.js@2.0.4" data-semver="2.0.4" src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
<script data-require="angular.js@1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
<script src="http://ryanmullins.github.io/angular-hammer/angular.hammer.js"></script>
<script src="script.js"></script>
</body>
</html>
// Code goes here
angular.module('app', ['hmTouchEvents']);
angular.module('app')
.controller('AppCtrl', function() {
var vm = this;
vm.message = {
tap: 0,
click: 0,
keydown: 0
};
vm.doSomething = doSomething;
function doSomething(event) {
if(event.type === 'keydown') {
if(!(event.keyCode === 13 || event.keyCode === 32)) {
return;
} else {
event.preventDefault();
}
}
vm.message[event.type]++;
}
})
/* Styles go here */
.test {
padding:20px;
background: #e9e9e9;
}