outline.ts 1.0 KB

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