Skip to content

Instantly share code, notes, and snippets.

@jonathanconway
Last active April 5, 2019 14:03
Show Gist options
  • Save jonathanconway/ae2739de99c52c971cbb to your computer and use it in GitHub Desktop.
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.)
/**
* @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();
}
}
});
});
}
}
};
}]);
@VinaySarvankarPersonal
Copy link

Is this library compatible with Angular 6?
If yes how to integrate it with Angular (Is this plugin available on npm?)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment