outline.ts 1.1 KB

123456789101112131415161718192021222324252627282930313233343536
  1. // based on http://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/
  2. function outlineFixer() {
  3. let d: any = document;
  4. var style_element = d.createElement('STYLE');
  5. var dom_events = 'addEventListener' in d;
  6. var add_event_listener = function(type, callback) {
  7. // Basic cross-browser event handling
  8. if (dom_events) {
  9. d.addEventListener(type, callback);
  10. } else {
  11. d.attachEvent('on' + type, callback);
  12. }
  13. };
  14. var set_css = function(css_text) {
  15. // Handle setting of <style> element contents in IE8
  16. !!style_element.styleSheet
  17. ? (style_element.styleSheet.cssText = css_text)
  18. : (style_element.innerHTML = css_text);
  19. };
  20. d.getElementsByTagName('HEAD')[0].appendChild(style_element);
  21. // Using mousedown instead of mouseover, so that previously focused elements don't lose focus ring on mouse move
  22. add_event_listener('mousedown', function() {
  23. set_css(':focus{outline:0 !important}::-moz-focus-inner{border:0;}');
  24. });
  25. add_event_listener('keydown', function() {
  26. set_css('');
  27. });
  28. }
  29. outlineFixer();