makeup-active-descendant - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

index.js

 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -15,2 +17,6 @@
 
+var defaultOptions = {
+    activeDescendantClassName: 'active-descendant'
+};
+
 function onModelMutation() {
@@ -23,5 +29,5 @@ var modelIndex = this._navigationEmitter.model.index;
         if (index !== modelIndex) {
-            item.classList.remove('active-descendant');
+            item.classList.remove(this._options.activeDescendantClassName);
         } else {
-            item.classList.add('active-descendant');
+            item.classList.add(this._options.activeDescendantClassName);
         }
@@ -36,7 +42,7 @@ });
     if (fromItem) {
-        fromItem.classList.remove('active-descendant');
+        fromItem.classList.remove(this._options.activeDescendantClassName);
     }
 
     if (toItem) {
-        toItem.classList.add('active-descendant');
+        toItem.classList.add(this._options.activeDescendantClassName);
         this._focusEl.setAttribute('aria-activedescendant', toItem.id);
@@ -47,4 +53,4 @@ }
         detail: {
-            toIndex: e.detail.toIndex,
-            fromIndex: e.detail.fromIndex
+            fromIndex: e.detail.fromIndex,
+            toIndex: e.detail.toIndex
         }
@@ -54,2 +60,12 @@ }));
 
+function onModelReset() {
+    var activeClassName = this._options.activeDescendantClassName;
+
+    this._items.forEach(function (el) {
+        el.classList.remove(activeClassName);
+    });
+
+    this._focusEl.removeAttribute('aria-activedescendant');
+}
+
 var ActiveDescendant = function ActiveDescendant(el) {
@@ -61,5 +77,7 @@ _classCallCheck(this, ActiveDescendant);
     this._onChangeListener = onModelChange.bind(this);
+    this._onResetListener = onModelReset.bind(this);
 
     el.addEventListener('navigationModelMutation', this._onMutationListener);
     el.addEventListener('navigationModelChange', this._onChangeListener);
+    el.addEventListener('navigationModelReset', this._onResetListener);
 };
@@ -70,3 +88,3 @@
 
-    function LinearActiveDescendant(el, focusEl, ownedEl, itemSelector) {
+    function LinearActiveDescendant(el, focusEl, ownedEl, itemSelector, selectedOptions) {
         _classCallCheck(this, LinearActiveDescendant);
@@ -76,4 +94,9 @@
 
-        _this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, { autoInit: -1, autoReset: -1 });
+        _this._options = _extends({}, defaultOptions, selectedOptions);
 
+        _this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {
+            autoInit: -1,
+            autoReset: -1
+        });
+
         _this._focusEl = focusEl;
@@ -117,4 +140,4 @@ _this._ownedEl = ownedEl;
 
-function createLinear(el, focusEl, ownedEl, itemSelector) {
-    return new LinearActiveDescendant(el, focusEl, ownedEl, itemSelector);
+function createLinear(el, focusEl, ownedEl, itemSelector, selectedOptions) {
+    return new LinearActiveDescendant(el, focusEl, ownedEl, itemSelector, selectedOptions);
 }
@@ -121,0 +144,0 @@

package.json

 {
   "name": "makeup-active-descendant",
   "description": "Implements ARIA active descendant keyboard navigation",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "index.js",
@@ -22,7 +22,5 @@ "repository": "https://github.com/makeup-js/makeup-active-descendant.git",
     "watch": "onchange src/*.js docs/index.js -- npm run build",
-    "transpile": "babel src/index.js --out-file index.js && babel src/util.js --out-file util.js"
+    "transpile": "babel src/index.js --out-file index.js && babel src/util.js --out-file util.js",
+    "version": "npm run prepublishOnly && git add -A docs/static test/static"
   },
-  "pre-commit": [
-    "prepublishOnly"
-  ],
   "keywords": [
@@ -51,8 +49,7 @@ "makeup",
     "parallelshell": "^3",
-    "pre-commit": "^1",
     "rimraf": "^2"
   },
   "dependencies": {
-    "makeup-navigation-emitter": "~0.0",
-    "makeup-next-id": "^0.0.1"
+    "makeup-navigation-emitter": "~0.1.1",
+    "makeup-next-id": "~0.0.1"
   },
@@ -59,0 +56,0 @@ "files": [

README.md

@@ -10,3 +10,3 @@ # makeup-active-descendant
 
-Implements ARIA active descendant keyboard navigation.
+Implements ARIA <a href="https://www.w3.org/WAI/GL/wiki/Using_aria-activedescendant_to_allow_changes_in_focus_within_widgets_to_be_communicated_to_Assistive_Technology">active descendant</a> keyboard navigation.
 
@@ -39,3 +39,3 @@ A vanilla JavaScript port of <a href="https://github.com/ianmcburnie/jquery-active-descendant">jquery-active-descendant</a>.
 // get the focus element reference
-const inputEl = widgetEl.querySelector('input');
+const focusEl = widgetEl.querySelector('input');
 
@@ -45,12 +45,9 @@ // get the owned element reference
 
-// create a roving tabindex instance on the element
+// create an activeDescendant widget instance on the element
 const activeDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, ownedEl, 'li');
 
-// set the active element
-activeDescendant.index = 0;
-
 // listen for events (optional)
 widgetEl.addEventListener('activeDescendantChange', function(e) {
-    // console.log(e.detail);
-})
+    console.log(e.detail);
+});
 ```
@@ -71,11 +68,11 @@
 
-Markup after:
+Markup after instantiation:
 
 ```html
 <div class="widget" id="widget-0">
-    <input type="text" aria-activedescendant="widget-0-item-0" aria-owns="widget-0-list-0">
+    <input type="text" aria-owns="widget-0-list-0">
     <ul id="widget-0-list-0">
         <li id="widget-0-item-0" data-makeup-index="0">Item 1</li>
         <li id="widget-0-item-1" data-makeup-index="1">Item 2</li>
-        <li id="widget-0-item-1" data-makeup-index="2">Item 3</li>
+        <li id="widget-0-item-2" data-makeup-index="2">Item 3</li>
     </ul>
@@ -85,2 +82,27 @@ </div>
 
+Markup after pressing down arrow key on focusable element:
+
+```html
+<div class="widget" id="widget-0">
+    <input type="text" aria-activedescendant="widget-0-item-0" aria-owns="widget-0-list-0">
+    <ul id="widget-0-list-0">
+        <li class="active-descendant" id="widget-0-item-0" data-makeup-index="0">Item 1</li>
+        <li id="widget-0-item-1" data-makeup-index="1">Item 2</li>
+        <li id="widget-0-item-2" data-makeup-index="2">Item 3</li>
+    </ul>
+</div>
+```
+
+Use CSS to style the active descendant however you wish:
+
+```css
+.widget .active-descendant {
+    font-weight: bold;
+}
+```
+
+## Options
+
+* `activeDescendantClassName`: the HTML class name that will be applied to the ARIA active descendant element (default: 'active-descendant')
+
 ## Custom Events        
@@ -87,0 +109,0 @@

No alert changes

Improved metrics

Total package byte prevSize

173144

increased by0.85%

Dev dependency count

17

decreased by-5.56%

Lines of code

117

increased by17%

Number of lines in readme file

143

increased by18.18%

Dependency changes

• + Addedcustom-event-polyfill@1.0.7(transitive)

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

• + Addedmakeup-next-id@0.0.3(transitive)

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

• - Removedmakeup-next-id@0.0.1(transitive)

• Updatedmakeup-navigation-emitter@~0.1.1

• Updatedmakeup-next-id@~0.0.1