focus-visible - npm Package Compare versions

Comparing version 5.0.2 to 5.1.0

dist/focus-visible.js

@@ -65,7 +65,7 @@ (function (global, factory) {
 
-      if (tagName == 'INPUT' && inputTypesWhitelist[type] && !el.readOnly) {
+      if (tagName === 'INPUT' && inputTypesWhitelist[type] && !el.readOnly) {
         return true;
       }
 
-      if (tagName == 'TEXTAREA' && !el.readOnly) {
+      if (tagName === 'TEXTAREA' && !el.readOnly) {
         return true;
@@ -178,3 +178,2 @@ }
           hadFocusVisibleRecently = false;
-          window.clearTimeout(hadFocusVisibleRecentlyTimeout);
         }, 100);
@@ -191,3 +190,3 @@ removeFocusVisibleClass(e.target);
     function onVisibilityChange(e) {
-      if (document.visibilityState == 'hidden') {
+      if (document.visibilityState === 'hidden') {
         // If the tab becomes active again, the browser will handle calling focus
@@ -282,2 +281,3 @@ // on the element (Safari actually calls it twice).
       document.documentElement.classList.add('js-focus-visible');
+      document.documentElement.setAttribute('data-js-focus-visible', '');
     }
@@ -284,0 +284,0 @@ }

dist/focus-visible.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define(t):t()}(0,function(){"use strict";function e(e){var t=!0,n=!1,o=null,d={text:!0,search:!0,url:!0,tel:!0,email:!0,password:!0,number:!0,date:!0,month:!0,week:!0,time:!0,datetime:!0,"datetime-local":!0};function i(e){return!!(e&&e!==document&&"HTML"!==e.nodeName&&"BODY"!==e.nodeName&&"classList"in e&&"contains"in e.classList)}function s(e){e.classList.contains("focus-visible")||(e.classList.add("focus-visible"),e.setAttribute("data-focus-visible-added",""))}function u(e){t=!1}function a(){document.addEventListener("mousemove",c),document.addEventListener("mousedown",c),document.addEventListener("mouseup",c),document.addEventListener("pointermove",c),document.addEventListener("pointerdown",c),document.addEventListener("pointerup",c),document.addEventListener("touchmove",c),document.addEventListener("touchstart",c),document.addEventListener("touchend",c)}function c(e){e.target.nodeName&&"html"===e.target.nodeName.toLowerCase()||(t=!1,document.removeEventListener("mousemove",c),document.removeEventListener("mousedown",c),document.removeEventListener("mouseup",c),document.removeEventListener("pointermove",c),document.removeEventListener("pointerdown",c),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",c),document.removeEventListener("touchstart",c),document.removeEventListener("touchend",c))}document.addEventListener("keydown",function(n){n.metaKey||n.altKey||n.ctrlKey||(i(e.activeElement)&&s(e.activeElement),t=!0)},!0),document.addEventListener("mousedown",u,!0),document.addEventListener("pointerdown",u,!0),document.addEventListener("touchstart",u,!0),document.addEventListener("visibilitychange",function(e){"hidden"==document.visibilityState&&(n&&(t=!0),a())},!0),a(),e.addEventListener("focus",function(e){var n,o,u;i(e.target)&&(t||(n=e.target,o=n.type,"INPUT"==(u=n.tagName)&&d[o]&&!n.readOnly||"TEXTAREA"==u&&!n.readOnly||n.isContentEditable))&&s(e.target)},!0),e.addEventListener("blur",function(e){var t;i(e.target)&&(e.target.classList.contains("focus-visible")||e.target.hasAttribute("data-focus-visible-added"))&&(n=!0,window.clearTimeout(o),o=window.setTimeout(function(){n=!1,window.clearTimeout(o)},100),(t=e.target).hasAttribute("data-focus-visible-added")&&(t.classList.remove("focus-visible"),t.removeAttribute("data-focus-visible-added")))},!0),e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&e.host?e.host.setAttribute("data-js-focus-visible",""):e.nodeType===Node.DOCUMENT_NODE&&document.documentElement.classList.add("js-focus-visible")}if("undefined"!=typeof window&&"undefined"!=typeof document){var t;window.applyFocusVisiblePolyfill=e;try{t=new CustomEvent("focus-visible-polyfill-ready")}catch(e){(t=document.createEvent("CustomEvent")).initCustomEvent("focus-visible-polyfill-ready",!1,!1,{})}window.dispatchEvent(t)}"undefined"!=typeof document&&e(document)});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define(t):t()}(0,function(){"use strict";function e(e){var t=!0,n=!1,o=null,d={text:!0,search:!0,url:!0,tel:!0,email:!0,password:!0,number:!0,date:!0,month:!0,week:!0,time:!0,datetime:!0,"datetime-local":!0};function i(e){return!!(e&&e!==document&&"HTML"!==e.nodeName&&"BODY"!==e.nodeName&&"classList"in e&&"contains"in e.classList)}function s(e){e.classList.contains("focus-visible")||(e.classList.add("focus-visible"),e.setAttribute("data-focus-visible-added",""))}function u(e){t=!1}function a(){document.addEventListener("mousemove",c),document.addEventListener("mousedown",c),document.addEventListener("mouseup",c),document.addEventListener("pointermove",c),document.addEventListener("pointerdown",c),document.addEventListener("pointerup",c),document.addEventListener("touchmove",c),document.addEventListener("touchstart",c),document.addEventListener("touchend",c)}function c(e){e.target.nodeName&&"html"===e.target.nodeName.toLowerCase()||(t=!1,document.removeEventListener("mousemove",c),document.removeEventListener("mousedown",c),document.removeEventListener("mouseup",c),document.removeEventListener("pointermove",c),document.removeEventListener("pointerdown",c),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",c),document.removeEventListener("touchstart",c),document.removeEventListener("touchend",c))}document.addEventListener("keydown",function(n){n.metaKey||n.altKey||n.ctrlKey||(i(e.activeElement)&&s(e.activeElement),t=!0)},!0),document.addEventListener("mousedown",u,!0),document.addEventListener("pointerdown",u,!0),document.addEventListener("touchstart",u,!0),document.addEventListener("visibilitychange",function(e){"hidden"===document.visibilityState&&(n&&(t=!0),a())},!0),a(),e.addEventListener("focus",function(e){var n,o,u;i(e.target)&&(t||(n=e.target,o=n.type,"INPUT"===(u=n.tagName)&&d[o]&&!n.readOnly||"TEXTAREA"===u&&!n.readOnly||n.isContentEditable))&&s(e.target)},!0),e.addEventListener("blur",function(e){var t;i(e.target)&&(e.target.classList.contains("focus-visible")||e.target.hasAttribute("data-focus-visible-added"))&&(n=!0,window.clearTimeout(o),o=window.setTimeout(function(){n=!1},100),(t=e.target).hasAttribute("data-focus-visible-added")&&(t.classList.remove("focus-visible"),t.removeAttribute("data-focus-visible-added")))},!0),e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&e.host?e.host.setAttribute("data-js-focus-visible",""):e.nodeType===Node.DOCUMENT_NODE&&(document.documentElement.classList.add("js-focus-visible"),document.documentElement.setAttribute("data-js-focus-visible",""))}if("undefined"!=typeof window&&"undefined"!=typeof document){var t;window.applyFocusVisiblePolyfill=e;try{t=new CustomEvent("focus-visible-polyfill-ready")}catch(e){(t=document.createEvent("CustomEvent")).initCustomEvent("focus-visible-polyfill-ready",!1,!1,{})}window.dispatchEvent(t)}"undefined"!=typeof document&&e(document)});
 //# sourceMappingURL=focus-visible.min.js.map

package.json

 {
   "name": "focus-visible",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "Polyfill for :focus-visible pseudo-selector",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -74,8 +74,12 @@ [![Build Status](https://travis-ci.org/WICG/focus-visible.svg?branch=master)](https://travis-ci.org/WICG/focus-visible)
 
-The script uses two heuristics to determine whether the keyboard is being used:
+The script uses two heuristics to determine whether the keyboard is being (or will be) used:
 
 - a `focus` event immediately following a `keydown` event where the key pressed was either `Tab`,
 `Shift + Tab`, or an arrow key.
+
 - focus moves into an element which requires keyboard interaction,
   such as a text field
+
+  - NOTE: this means that HTML elements like `<input type={text|email|password|...}>` or `<textarea>` will **always** match the `:focus-visible` selector, regardless of whether they are focused via a keyboard or a mouse.
+
 - _TODO: ideally, we also trigger keyboard modality
@@ -82,0 +86,0 @@ following a keyboard event which activates an element or causes a mutation;

src/focus-visible.js

@@ -59,7 +59,7 @@ /**
 
-    if (tagName == 'INPUT' && inputTypesWhitelist[type] && !el.readOnly) {
+    if (tagName === 'INPUT' && inputTypesWhitelist[type] && !el.readOnly) {
       return true;
     }
 
-    if (tagName == 'TEXTAREA' && !el.readOnly) {
+    if (tagName === 'TEXTAREA' && !el.readOnly) {
       return true;
@@ -172,3 +172,2 @@ }
         hadFocusVisibleRecently = false;
-        window.clearTimeout(hadFocusVisibleRecentlyTimeout);
       }, 100);
@@ -185,3 +184,3 @@ removeFocusVisibleClass(e.target);
   function onVisibilityChange(e) {
-    if (document.visibilityState == 'hidden') {
+    if (document.visibilityState === 'hidden') {
       // If the tab becomes active again, the browser will handle calling focus
@@ -276,2 +275,3 @@ // on the element (Safari actually calls it twice).
     document.documentElement.classList.add('js-focus-visible');
+    document.documentElement.setAttribute('data-js-focus-visible', '');
   }
@@ -278,0 +278,0 @@ }

test/specs/input-file.js

@@ -10,3 +10,7 @@ const { fixture, matchesKeyboard, matchesMouse } = require('./helpers');
   it('should apply .focus-visible on keyboard focus', function() {
-    return matchesKeyboard();
+    if (process.env.TEST_BROWSER.includes('Firefox')) {
+      this.skip();
+    } else {
+      return matchesKeyboard();
+    }
   });
@@ -13,0 +17,0 @@

w3c.json

  {
     "group":      ["80485"]
 ,   "contacts":   ["yoavweiss"]
-,   "shortName":  "modality"
-}
+,   "shortName":  "modality",
+    "repo-type":  "cg-report"
+}

No alert changes

Improved metrics

Total package byte prevSize

115754

increased by0.76%

Number of package files

83

increased by1.22%

Lines of code

1598

increased by0.38%

Number of lines in readme file

202

increased by2.02%

Worsened metrics

Number of low supply chain risk alerts

9

increased by12.5%

No dependency changes