Last active
April 5, 2019 14:03
-
-
Save jonathanconway/ae2739de99c52c971cbb to your computer and use it in GitHub Desktop.
Angular Directive that makes individual radio-buttons focusable using the keyboard only. (Useful for accessibility, on a case-by-case basis.)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @ngdoc directive | |
* @name radioTabbable | |
* @requires none | |
* @description | |
* Makes individual radio buttons focuseable using the TAB key. | |
* (By default, pressing TAB while on a radio button would have shifted focus to the next control outside of the radio group.) | |
* @usage | |
* <input type="radio" name="radioGroup" value="0" radio-tabbable="" /> | |
* <input type="radio" name="radioGroup" value="1" radio-tabbable="" /> | |
*/ | |
angular.module('app', []).directive('radioTabbable', [function() { | |
var groups = {}; | |
return { | |
restrict: 'A', | |
link: { | |
pre: function(scope, element, attrs) { | |
var el = element[0]; | |
var thisGroup = groups[el.name] = (groups[el.name] || []); | |
thisGroup.push(el); | |
el.addEventListener('keydown', function (e) { | |
setTimeout(function () { | |
var indexOfTarget = thisGroup.indexOf(e.target); | |
if (e.keyCode === 9) { | |
if (indexOfTarget < (thisGroup.length - 1) && !(e.shiftKey)) { | |
thisGroup[indexOfTarget + 1].focus(); | |
} | |
else if (indexOfTarget > 0 && e.shiftKey) { | |
thisGroup[indexOfTarget - 1].focus(); | |
} | |
} | |
}); | |
}); | |
} | |
} | |
}; | |
}]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is this library compatible with Angular 6?
If yes how to integrate it with Angular (Is this plugin available on npm?)