makeup-roving-tabindex - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

dist/cjs/index.js

@@ -7,81 +7,29 @@ 'use strict';
 exports.createLinear = createLinear;
-
 var NavigationEmitter = _interopRequireWildcard(require("makeup-navigation-emitter"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 var defaultOptions = {
-  autoReset: null,
-  index: 0,
+  autoInit: 'interactive',
+  autoReset: 'current',
   wrap: false,
   axis: 'both'
 };
-
-var nodeListToArray = function nodeListToArray(nodeList) {
-  return Array.prototype.slice.call(nodeList);
-};
-
-function onModelMutation() {
-  var modelIndex = this._navigationEmitter.model.index;
-  this.filteredItems.forEach(function (el, index) {
-    return el.setAttribute('tabindex', index !== modelIndex ? '-1' : '0');
+function refreshTabindex(items, focusIndex) {
+  items.forEach(function (el, i) {
+    el.setAttribute('tabindex', i === focusIndex ? '0' : '-1');
   });
 }
-
 function onModelInit(e) {
-  var items = e.detail.items;
-  nodeListToArray(items).filter(function (el, i) {
-    return i !== e.detail.toIndex;
-  }).forEach(function (el) {
-    return el.setAttribute('tabindex', '-1');
-  });
-
-  if (items[e.detail.toIndex]) {
-    items[e.detail.toIndex].setAttribute('tabindex', '0');
-  }
+  refreshTabindex(e.detail.items, e.detail.toIndex);
+  this._el.dispatchEvent(new CustomEvent('rovingTabindexInit', {
+    detail: e.detail
+  }));
 }
-
-function onModelReset(e) {
-  this._index = e.detail.toIndex; // seems unused internally. scheduled for deletion.
-
-  var items = this.filteredItems;
-  nodeListToArray(items).filter(function (el, i) {
-    return i !== e.detail.toIndex;
-  }).forEach(function (el) {
-    return el.setAttribute('tabindex', '-1');
-  });
-  items[e.detail.toIndex].setAttribute('tabindex', '0');
-}
-
 function onModelChange(e) {
-  var items = this.filteredItems;
+  var items = this.items;
   var fromItem = items[e.detail.fromIndex];
   var toItem = items[e.detail.toIndex];
-
   if (fromItem) {
     fromItem.setAttribute('tabindex', '-1');
   }
-
   if (toItem) {
@@ -91,15 +39,20 @@ toItem.setAttribute('tabindex', '0');
   }
-
   this._el.dispatchEvent(new CustomEvent('rovingTabindexChange', {
-    detail: {
-      fromIndex: e.detail.fromIndex,
-      toIndex: e.detail.toIndex
-    }
+    detail: e.detail
   }));
 }
-
-var RovingTabindex = /*#__PURE__*/function () {
-  function RovingTabindex(el) {
-    _classCallCheck(this, RovingTabindex);
-
+function onModelReset(e) {
+  refreshTabindex(this.items, e.detail.toIndex);
+  this._el.dispatchEvent(new CustomEvent('rovingTabindexReset', {
+    detail: e.detail
+  }));
+}
+function onModelMutation(e) {
+  refreshTabindex(this.items, e.detail.toIndex);
+  this._el.dispatchEvent(new CustomEvent('rovingTabindexMutation', {
+    detail: e.detail
+  }));
+}
+class RovingTabindex {
+  constructor(el) {
     this._el = el;
@@ -110,93 +63,52 @@ this._onMutationListener = onModelMutation.bind(this);
     this._onResetListener = onModelReset.bind(this);
-
     this._el.addEventListener('navigationModelMutation', this._onMutationListener);
-
     this._el.addEventListener('navigationModelChange', this._onChangeListener);
-
     this._el.addEventListener('navigationModelInit', this._onInitListener);
-
     this._el.addEventListener('navigationModelReset', this._onResetListener);
   }
+  destroy() {
+    this._el.removeEventListener('navigationModelMutation', this._onMutationListener);
+    this._el.removeEventListener('navigationModelChange', this._onChangeListener);
+    this._el.removeEventListener('navigationModelInit', this._onInitListener);
+    this._el.removeEventListener('navigationModelReset', this._onResetListener);
+  }
+}
+class LinearRovingTabindex extends RovingTabindex {
+  constructor(el, itemSelector, selectedOptions) {
+    super(el);
+    this._options = Object.assign({}, defaultOptions, selectedOptions);
+    this._itemSelector = itemSelector;
 
-  _createClass(RovingTabindex, [{
-    key: "destroy",
-    value: function destroy() {
-      this._el.removeEventListener('navigationModelMutation', this._onMutationListener);
-
-      this._el.removeEventListener('navigationModelChange', this._onChangeListener);
-
-      this._el.removeEventListener('navigationModelInit', this._onInitListener);
-
-      this._el.removeEventListener('navigationModelReset', this._onResetListener);
-    }
-  }]);
-
-  return RovingTabindex;
-}();
-
-var LinearRovingTabindex = /*#__PURE__*/function (_RovingTabindex) {
-  _inherits(LinearRovingTabindex, _RovingTabindex);
-
-  var _super = _createSuper(LinearRovingTabindex);
-
-  function LinearRovingTabindex(el, itemSelector, selectedOptions) {
-    var _this;
-
-    _classCallCheck(this, LinearRovingTabindex);
-
-    _this = _super.call(this, el);
-    _this._options = Object.assign({}, defaultOptions, selectedOptions);
-    _this._itemSelector = itemSelector;
-    _this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {
-      autoInit: _this._options.index,
-      autoReset: _this._options.autoReset,
-      wrap: _this._options.wrap,
-      axis: _this._options.axis
+    // todo: options.index is deprecated. Remove support in future release.
+    this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {
+      autoInit: this._options.index !== undefined ? this._options.index : this._options.autoInit,
+      autoReset: this._options.autoReset,
+      wrap: this._options.wrap,
+      axis: this._options.axis
     });
-    return _this;
   }
+  get index() {
+    return this._navigationEmitter.model.index;
+  }
+  set index(newIndex) {
+    this._navigationEmitter.model.index = newIndex;
+  }
+  set wrap(newWrap) {
+    this._navigationEmitter.model.options.wrap = newWrap;
+  }
+  get currentItem() {
+    return this._navigationEmitter.model.currentItem;
+  }
+  get items() {
+    return this._navigationEmitter.model.items;
+  }
+  reset() {
+    this._navigationEmitter.model.reset();
+  }
+  destroy() {
+    super.destroy();
+    this._navigationEmitter.destroy();
+  }
+}
 
-  _createClass(LinearRovingTabindex, [{
-    key: "index",
-    get: function get() {
-      return this._navigationEmitter.model.index;
-    },
-    set: function set(newIndex) {
-      this._navigationEmitter.model.index = newIndex;
-    }
-  }, {
-    key: "wrap",
-    set: function set(newWrap) {
-      this._navigationEmitter.model.options.wrap = newWrap;
-    }
-  }, {
-    key: "filteredItems",
-    get: function get() {
-      return this._navigationEmitter.model.filteredItems;
-    }
-  }, {
-    key: "items",
-    get: function get() {
-      return this._navigationEmitter.model.items;
-    } // backwards compat
-
-  }, {
-    key: "_items",
-    get: function get() {
-      return this.items;
-    }
-  }, {
-    key: "reset",
-    value: function reset() {
-      this._navigationEmitter.model.reset();
-    }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      this._navigationEmitter.destroy();
-    }
-  }]);
-
-  return LinearRovingTabindex;
-}(RovingTabindex);
 /*
@@ -210,5 +122,4 @@ class GridRovingTabindex extends RovingTabindex {
 
-
 function createLinear(el, itemSelector, selectedOptions) {
   return new LinearRovingTabindex(el, itemSelector, selectedOptions);
 }

dist/mjs/index.js

@@ -1,29 +0,19 @@
-"use strict";
 import * as NavigationEmitter from "makeup-navigation-emitter";
 const defaultOptions = {
-  autoReset: null,
-  index: 0,
+  autoInit: "interactive",
+  autoReset: "current",
   wrap: false,
   axis: "both"
 };
-const nodeListToArray = (nodeList) => Array.prototype.slice.call(nodeList);
-function onModelMutation() {
-  const modelIndex = this._navigationEmitter.model.index;
-  this.filteredItems.forEach((el, index) => el.setAttribute("tabindex", index !== modelIndex ? "-1" : "0"));
+function refreshTabindex(items, focusIndex) {
+  items.forEach(function(el, i) {
+    el.setAttribute("tabindex", i === focusIndex ? "0" : "-1");
+  });
 }
 function onModelInit(e) {
-  const items = e.detail.items;
-  nodeListToArray(items).filter((el, i) => i !== e.detail.toIndex).forEach((el) => el.setAttribute("tabindex", "-1"));
-  if (items[e.detail.toIndex]) {
-    items[e.detail.toIndex].setAttribute("tabindex", "0");
-  }
+  refreshTabindex(e.detail.items, e.detail.toIndex);
+  this._el.dispatchEvent(new CustomEvent("rovingTabindexInit", { detail: e.detail }));
 }
-function onModelReset(e) {
-  this._index = e.detail.toIndex;
-  const items = this.filteredItems;
-  nodeListToArray(items).filter((el, i) => i !== e.detail.toIndex).forEach((el) => el.setAttribute("tabindex", "-1"));
-  items[e.detail.toIndex].setAttribute("tabindex", "0");
-}
 function onModelChange(e) {
-  const items = this.filteredItems;
+  const items = this.items;
   const fromItem = items[e.detail.fromIndex];
@@ -38,9 +28,12 @@ const toItem = items[e.detail.toIndex];
   }
-  this._el.dispatchEvent(new CustomEvent("rovingTabindexChange", {
-    detail: {
-      fromIndex: e.detail.fromIndex,
-      toIndex: e.detail.toIndex
-    }
-  }));
+  this._el.dispatchEvent(new CustomEvent("rovingTabindexChange", { detail: e.detail }));
 }
+function onModelReset(e) {
+  refreshTabindex(this.items, e.detail.toIndex);
+  this._el.dispatchEvent(new CustomEvent("rovingTabindexReset", { detail: e.detail }));
+}
+function onModelMutation(e) {
+  refreshTabindex(this.items, e.detail.toIndex);
+  this._el.dispatchEvent(new CustomEvent("rovingTabindexMutation", { detail: e.detail }));
+}
 class RovingTabindex {
@@ -71,3 +64,3 @@ constructor(el) {
     this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {
-      autoInit: this._options.index,
+      autoInit: this._options.index !== void 0 ? this._options.index : this._options.autoInit,
       autoReset: this._options.autoReset,
@@ -87,4 +80,4 @@ wrap: this._options.wrap,
   }
-  get filteredItems() {
-    return this._navigationEmitter.model.filteredItems;
+  get currentItem() {
+    return this._navigationEmitter.model.currentItem;
   }
@@ -94,5 +87,2 @@ get items() {
   }
-  get _items() {
-    return this.items;
-  }
   reset() {
@@ -102,2 +92,3 @@ this._navigationEmitter.model.reset();
   destroy() {
+    super.destroy();
     this._navigationEmitter.destroy();
@@ -109,5 +100,4 @@ }
 }
-"use strict";
 export {
   createLinear
 };

package.json

 {
   "name": "makeup-roving-tabindex",
   "description": "Implements a roving tab index on given collection of elements",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "main": "./dist/cjs/index.js",
@@ -29,3 +29,3 @@ "module": "dist/mjs/index.js",
   "dependencies": {
-    "makeup-navigation-emitter": "~0.5.1"
+    "makeup-navigation-emitter": "~0.6.0"
   },
@@ -32,0 +32,0 @@ "files": [

README.md

@@ -43,5 +43,5 @@ # makeup-roving-tabindex
     <ul>
-        <li data-makeup-index="0" tabindex="0">Item 1</li>
-        <li data-makeup-index="1" tabindex="-1">Item 2</li>
-        <li data-makeup-index="2" tabindex="-1">Item 3</li>
+        <li tabindex="0">Item 1</li>
+        <li tabindex="-1">Item 2</li>
+        <li tabindex="-1">Item 3</li>
     </ul>
@@ -53,4 +53,16 @@ </div>
 
-* `autoReset`: the index position that should receive the roving tabindex when model is reset (default: null)
-* `index`: the initial index position of the roving tabindex (default: 0)
+* `autoInit`: declares the initial roving tabindex item (default: "interactive"). Possible values are:
+    * "none": no index position is set (useful in programmatic active-descendant)
+    * "interactive": first non aria-disabled or hidden element (default)
+    * "ariaChecked": first element with aria-checked=true (useful in ARIA menu)
+    * "ariaSelected": first element with aria-selected=true (useful in ARIA tabs)
+    * "ariaSelectedOrInteractive": first element with aria-selected=true, falling back to "interactive" if not found (useful in ARIA listbox)
+    * *number*: specific index position of items (throws error if non-interactive)
+* `autoReset`: declares the roving tabindex item after a reset and/or when keyboard focus exits the widget (default: "current"). Possible values are:
+    * "none": no index position is set (useful in programmatic active-descendant)
+    * "current": index remains current (radio button like behaviour)
+    * "interactive": index moves to first non aria-disabled or hidden element
+    * "ariaChecked": index moves to first element with aria-checked=true
+    * "ariaSelected": index moves to first element with aria-selected=true
+    * *number*: specific index position of items (throws error if non-interactive)
 * `wrap` : specify whether arrow keys should wrap/loop (default: false)
@@ -61,5 +73,6 @@ * `axis` : specify 'x' for left/right arrow keys, 'y' for up/down arrow keys, or 'both' (default: 'both')
 
-* `filteredItems`: returns filtered items (e.g. non-hidden items)
-* `index`: the index position of the roving tabindex (i.e. the element with tabindex="0")
-* `items`: returns all items that match item selector
+* `navigableItems`: returns navigable subset of matchingItems (e.g. non-hidden items)
+* `index`: the index position of the roving tabindex (i.e. the element with tabindex="0"). A no-op on aria-disabled or hidden items.
+* `matchingItems`: returns all items that match item selector
+* `ignoreByDelegateSelector`: CSS selector of descendant elements that will be ignored by the navigation emitters key event delegation (i.e. these elements will *not* operate the roving tabindex) (default: null)
 
@@ -73,2 +86,7 @@ ## Methods
 
+* `rovingTabindexInit`
+    * detail
+        * items
+        * fromIndex
+        * toIndex
 * `rovingTabindexChange`
@@ -78,1 +96,5 @@ * detail
         * toIndex
+* `rovingTabindexReset`
+    * detail
+        * fromIndex
+        * toIndex

No alert changes

Improved metrics

Total package byte prevSize

16824

increased by1.26%

Number of package files

7

increased by16.67%

Lines of code

294

increased by3.52%

Number of lines in readme file

96

increased by29.73%

Dependency changes

• + Addedmakeup-navigation-emitter@0.6.2(transitive)

• - Removedmakeup-navigation-emitter@0.5.1(transitive)

• Updatedmakeup-navigation-emitter@~0.6.0