makeup-focusables
Advanced tools
makeup-focusables - npm Package Compare versions
Comparing version 0.3.1 to 0.3.2
| { | ||
| "dependencies":[ | ||
| "require: ./dist/index.js" | ||
| ] | ||
| "dependencies": ["require: ./dist/index.js"] | ||
| } |
@@ -7,9 +7,9 @@ "use strict"; | ||
| exports.default = _default; | ||
| var focusableElList = ['a[href]', 'area[href]', 'button:not([disabled])', 'embed', 'iframe', 'input:not([disabled])', 'object', 'select:not([disabled])', 'textarea:not([disabled])', '*[tabindex]', '*[contenteditable]']; | ||
| var focusableElSelector = focusableElList.join(); | ||
| const focusableElList = ["a[href]", "area[href]", "button:not([disabled])", "embed", "iframe", "input:not([disabled])", "object", "select:not([disabled])", "textarea:not([disabled])", "*[tabindex]", "*[contenteditable]"]; | ||
| const focusableElSelector = focusableElList.join(); | ||
| function _default(el) { | ||
| var keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| var callback = arguments.length > 2 ? arguments[2] : undefined; | ||
| let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| let callback = arguments.length > 2 ? arguments[2] : undefined; | ||
| if (callback) { | ||
| var request = requestAnimationFrame(() => { | ||
| const request = requestAnimationFrame(() => { | ||
| callback(getFocusables(el, keyboardOnly)); | ||
@@ -24,12 +24,12 @@ }); | ||
| function getFocusables(el) { | ||
| var keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| var focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector)); | ||
| let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector)); | ||
| // filter out elements with display: none | ||
| focusableEls = focusableEls.filter(function (focusableEl) { | ||
| return window.getComputedStyle(focusableEl).display !== 'none'; | ||
| return window.getComputedStyle(focusableEl).display !== "none"; | ||
| }); | ||
| if (keyboardOnly === true) { | ||
| focusableEls = focusableEls.filter(function (focusableEl) { | ||
| return focusableEl.getAttribute('tabindex') !== '-1'; | ||
| return focusableEl.getAttribute("tabindex") !== "-1"; | ||
| }); | ||
@@ -36,0 +36,0 @@ } |
| { | ||
| "name": "makeup-focusables", | ||
| "description": "Returns an array of all focusable descendants of the given element", | ||
| "version": "0.3.1", | ||
| "version": "0.3.2", | ||
| "main": "./dist/cjs/index.js", | ||
@@ -13,3 +13,3 @@ "module": "./dist/mjs/index.js", | ||
| }, | ||
| "repository": "https://github.com/makeup/makeup-js/tree/master/packages/makeup-focusables", | ||
| "repository": "https://github.com/makeup/makeup-js/tree/master/packages/core/makeup-focusables", | ||
| "author": "Ian McBurnie <ianmcburnie@hotmail.com>", | ||
@@ -37,3 +37,4 @@ "license": "MIT", | ||
| "extends @ebay/browserslist-config" | ||
| ] | ||
| ], | ||
| "gitHead": "4d199965cba30b5f63cfc38b5b58544cfc5b27c1" | ||
| } |
@@ -15,6 +15,6 @@ # makeup-focusables | ||
| <div class="widget"> | ||
| <h2 tabindex="-1">Widget Title</h2> | ||
| <p>Widget Text</p> | ||
| <button type="button">Widget Button</button> | ||
| <a href="#">Widget Link</a> | ||
| <h2 tabindex="-1">Widget Title</h2> | ||
| <p>Widget Text</p> | ||
| <button type="button">Widget Button</button> | ||
| <a href="#">Widget Link</a> | ||
| </div> | ||
@@ -24,6 +24,6 @@ ``` | ||
| ```js | ||
| import focusables from 'makeup-focusables'; | ||
| import focusables from "makeup-focusables"; | ||
| // get element reference | ||
| const widgetEl = document.querySelector('.widget'); | ||
| const widgetEl = document.querySelector(".widget"); | ||
@@ -33,3 +33,3 @@ // get array of all focusable elements (keyboard and programmatic) | ||
| console.log(allItems.length) // outputs: 3 | ||
| console.log(allItems.length); // outputs: 3 | ||
@@ -39,3 +39,3 @@ // get array of only keyboard focusable elements | ||
| console.log(keyboardItems.length) // outputs: 2 | ||
| console.log(keyboardItems.length); // outputs: 2 | ||
| ``` | ||
@@ -45,8 +45,8 @@ | ||
| * `el`: the element to search (default: undefined) | ||
| * `keyboardOnly`: return only elements focusable in sequential keyboard navigation (default: false) | ||
| * `callback`: if set, will call focusables after `requestAnimationFrame` and will pass the list of focusables in a callback method | ||
| - `el`: the element to search (default: undefined) | ||
| - `keyboardOnly`: return only elements focusable in sequential keyboard navigation (default: false) | ||
| - `callback`: if set, will call focusables after `requestAnimationFrame` and will pass the list of focusables in a callback method | ||
| ## Custom Events | ||
| * None | ||
| - None |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by22.87%
7350
- Lines of code
- increased by32.14%
111