├── .gitignore
├── LICENSE.txt
├── README.md
├── a11yclick.js
├── bower.json
├── example
    └── index.html
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bower_components
3 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) a11yclick – Scott Vinkle <scott.vinkle@shopify.com>
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 4 | this software and associated documentation files (the "Software"), to deal in
 5 | the Software without restriction, including without limitation the rights to
 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
 7 | of the Software, and to permit persons to whom the Software is furnished to do
 8 | so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # a11yclick
 2 | 
 3 | Easily handle keyboard click events on non semantic button elements.
 4 | 
 5 | This is a fork from the blog post entitled "[Ridiculously easy trick for keyboard accessibility](http://www.karlgroves.com/2014/11/24/ridiculously-easy-trick-for-keyboard-accessibility/)" by Karl Groves.
 6 | 
 7 | The script weighs in at 20 bytes gzipped and has no dependencies.
 8 | 
 9 | ## Installation
10 | 
11 | Install with [Bower](http://bower.io):
12 | 
13 | ```
14 | bower install --save a11yclick
15 | ```
16 | 
17 | Add a ```script``` tag at the bottom of the page, before your application logic.
18 | 
19 | ```html
20 | <script src="a11yclick.js"></script>
21 | <script src="app.js"></script>
22 | ```
23 | 
24 | ## Usage
25 | 
26 | Wrap the event logic with a conditional statement, checking the return value of the a11yclick() function. Make sure to pass in the event object.
27 | 
28 | ```javascript
29 | $('#fake-button').on('click keydown', function(event) {
30 |     if (a11yClick(event)) {
31 |         // Event logic
32 |     }
33 | });
34 | ```
35 | 
36 | ## Browser support
37 | 
38 | * Google Chrome (latest)
39 | * Opera (latest)
40 | * Firefox 4+
41 | * Safari 5+
42 | * Internet Explorer 7+
43 | 
44 | ## License
45 | 
46 | This project and its source code is licensed under the [MIT](LICENSE.txt) license.
47 | 


--------------------------------------------------------------------------------
/a11yclick.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * a11yclick - Easily handle keyboard click events on non semantic button elements.
 3 |  *
 4 |  * @param {Object} event Click/keyboard event object.
 5 |  * @returns {Boolean} Returns true or false depending on event type and code.
 6 |  */
 7 | var a11yclick = function(event) {
 8 |     'use strict';
 9 | 
10 |     var code = event.charCode || event.keyCode,
11 |         type = event.type;
12 | 
13 |     if (type === 'click') {
14 |         return true;
15 |     } else if (type === 'keydown') {
16 |         if (code === 32 || code === 13) {
17 |             event.preventDefault();
18 |             return true;
19 |         }
20 |     } else {
21 |         return false;
22 |     }
23 | };
24 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "a11yclick",
 3 |     "description": "Easily handle keyboard click events on non semantic button elements.",
 4 |     "version": "0.0.1",
 5 |     "main": "a11yclick.js",
 6 |     "author": "Scott Vinkle",
 7 |     "ignore": [
 8 |         ".gitignore",
 9 |         "package.json"
10 |     ]
11 | }
12 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="">
 3 |     <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>a11yclick Example</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <style>
10 |             body {
11 |                 font-family: sans-serif;
12 |                 margin: 2em;
13 |             }
14 |             .fake-button {
15 |                 background-color: #eee;
16 |                 border: solid #ccc 1px;
17 |                 border-radius: 5px;
18 |                 cursor: pointer;
19 |                 padding: 10px;
20 |             }
21 |         </style>
22 |     </head>
23 |     <body>
24 |         <span class="fake-button" tabindex="0" role="button">Fake Button</span>
25 | 
26 |         <script src="../a11yclick.js"></script>
27 |         <script>
28 |             (function(window, document, undefined) {
29 |                 'use strict';
30 | 
31 |                 // Global object
32 |                 var App = {};
33 | 
34 |                 // Fake button element
35 |                 App.button = document.querySelector('.fake-button');
36 | 
37 |                 // jQuery
38 |                 // App.button = $('.fake-button');
39 | 
40 |                 // Event handler
41 |                 App.handleClick = function(event) {
42 |                     // Check a11yclick, handle accessibility requirements
43 |                     if (a11yclick(event)) {
44 |                         App.doSomething();
45 |                     }
46 |                 };
47 | 
48 |                 // Event logic
49 |                 App.doSomething = function() {
50 |                     alert('Clicked!');
51 |                 };
52 | 
53 |                 // Event listeners
54 |                 App.button.addEventListener('click', function(event) {
55 |                     App.handleClick(event);
56 |                 }, false);
57 | 
58 |                 App.button.addEventListener('keydown', function(event) {
59 |                     App.handleClick(event);
60 |                 }, false);
61 | 
62 |                 // jQuery
63 |                 // App.button.on('click keydown', function(event) {
64 |                 //   App.handleClick(event);
65 |                 // });
66 | 
67 |             })(window, document);
68 |         </script>
69 |     </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "a11yclick",
3 |   "description": "Easily handle keyboard click events on non semantic button elements.",
4 |   "version": "0.0.1",
5 |   "devDependencies": {},
6 |   "scripts": {}
7 | }
8 | 


--------------------------------------------------------------------------------