aria-components - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

CHANGELOG.md

 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## 0.1.0
+## 0.1.2
 
-Initial release.
+**Fixed**
 
+- Corrects Menu search scoping (#8)
+- Shift-TAB from a Popup's last interactive child no longer closes the Popup (#10)
+- Corrects `lib/` exports (#12)
+- Corrects MenuBar static method reference (#13)
+
 ## 0.1.1
@@ -14,1 +19,5 @@
 - Activates MenuBar sublist `menuitem` links with the spacebar or return key (#3)
+
+## 0.1.0
+
+Initial release.

package.json

 {
   "name": "aria-components",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "JavaScript classes to aid in accessible web development.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -1,2 +0,2 @@
-[![npm version][npmjs-img]][npmjs]
+[![npm version][npmjs-img]][npmjs] [![Build Status][ci-img]][ci]
 
@@ -68,1 +68,3 @@ AriaComponents
 [npmjs]: https://badge.fury.io/js/aria-components
+[ci-img]: https://travis-ci.com/goodguyry/AriaComponents.svg?branch=master
+[ci]: https://travis-ci.com/goodguyry/AriaComponents

src/AriaComponent.js

@@ -35,3 +35,2 @@ /**
     this.setSelfReference = this.setSelfReference.bind(this);
-    this.typeAhead = this.typeAhead.bind(this);
   }
@@ -76,35 +75,2 @@
   }
-
-  /**
-   * Select the item that matches a search string.
-   * If a match is found, return it so that it can be selected.
-   *
-   * @param {Number} key A keyCode value.
-   * @return {HTMLElement|null} The matched element or null if no match.
-   */
-  typeAhead(key, items) {
-    const character = String.fromCharCode(key);
-
-    // Append the new character to the searchString
-    this.searchString += character;
-
-    if (this.keyClear) {
-      clearTimeout(this.keyClear);
-      this.keyClear = null;
-    }
-
-    // Clear the typed string after timeout.
-    this.keyClear = setTimeout(() => {
-      this.searchString = '';
-      this.keyClear = null;
-    }, 500);
-
-    // Find the item by matching the search string to the item text.
-    const match = items.filter((item) => {
-      const itemText = item.textContent.toLowerCase();
-      return 0 === itemText.indexOf(this.searchString.toLowerCase());
-    });
-
-    return match.length ? match[0] : null;
-  }
 }

src/lib/index.js

@@ -1,9 +0,9 @@
-import ariaDescribedbyElementsFound from './ariaDescribedbyElementsFound';
+import { ariaDescribedbyElementsFound } from './ariaDescribedbyElementsFound';
 import interactiveChildren from './interactiveChildren';
 import isInstanceOf from './isInstanceOf';
 import keyCodes from './keyCodes';
-import nextPrevious from './nextPrevious';
-import rovingTabIndex from './rovingTabIndex';
-import typeAhead from './typeAhead';
-import uniqueId from './uniqueId';
+import { nextPrevious } from './nextPrevious';
+import { rovingTabIndex } from './rovingTabIndex';
+import { setUniqueId } from './uniqueId';
+import Search from './Search';
 
@@ -17,4 +17,4 @@ export {
   rovingTabIndex,
-  typeAhead,
-  uniqueId,
+  setUniqueId,
+  Search,
 };

src/Listbox/index.js

@@ -5,2 +5,3 @@ import AriaComponent from '../AriaComponent';
 import keyCodes from '../lib/keyCodes';
+import Search from '../lib/Search';
 
@@ -103,2 +104,8 @@ /**
 
+    /**
+     * Initialize search.
+     * @type {Search}
+     */
+    this.search = new Search(this.options);
+
     /*
@@ -367,3 +374,3 @@ * Set the `option` role for each list itme and ensure each has a unique ID.
       default: {
-        const itemToFocus = this.typeAhead(keyCode, this.options);
+        const itemToFocus = this.search.getItem(keyCode);
         if (null !== itemToFocus) {
@@ -370,0 +377,0 @@ this.setState({ activeDescendant: itemToFocus });

src/Menu/index.js

@@ -6,2 +6,3 @@ import AriaComponent from '../AriaComponent';
 import { missingDescribedByWarning } from '../lib/ariaDescribedbyElementsFound';
+import Search from '../lib/Search';
 
@@ -133,2 +134,8 @@ /**
     /**
+     * Initialize search.
+     * @type {Search}
+     */
+    this.search = new Search(this.menuItems);
+
+    /**
      * The number of menu items.
@@ -203,2 +210,3 @@ *
       END,
+      ESC,
     } = keyCodes;
@@ -289,2 +297,11 @@ const { activeElement } = document;
       /*
+       * Listen for the ESC key to prevent it from being caught as a search
+       * string. Otherwise the MenuButton won't close as expected.
+       */
+      case ESC: {
+        // do nothing.
+        break;
+      }
+
+      /*
        * Select the Menu item based on a search string created by
@@ -294,3 +311,4 @@ * collecting key presses.
       default: {
-        const itemToFocus = this.typeAhead(keyCode, this.menuItems);
+        event.stopPropagation();
+        const itemToFocus = this.search.getItem(keyCode);
         if (null !== itemToFocus) {
@@ -297,0 +315,0 @@ itemToFocus.focus();

src/MenuBar/index.js

@@ -9,2 +9,3 @@ import AriaComponent from '../AriaComponent';
 import { missingDescribedByWarning } from '../lib/ariaDescribedbyElementsFound';
+import Search from '../lib/Search';
 
@@ -162,2 +163,8 @@ /**
     /**
+     * Initialize search.
+     * @type {Search}
+     */
+    this.search = new Search(this.menuBarItems);
+
+    /**
      * The number of menubar items.
@@ -174,3 +181,3 @@ *
      */
-    missingDescribedByWarning(Menu.getHelpIds());
+    missingDescribedByWarning(MenuBar.getHelpIds());
 
@@ -381,3 +388,3 @@ /*
       default: {
-        const itemToFocus = this.typeAhead(keyCode, this.menuBarItems);
+        const itemToFocus = this.search.getItem(keyCode);
         if (null !== itemToFocus) {
@@ -384,0 +391,0 @@ this.setState({ menubarItem: itemToFocus });

src/Popup/index.js

@@ -277,13 +277,12 @@ import AriaComponent from '../AriaComponent';
     } else if (TAB === keyCode) {
-      if (
-        shiftKey
-        && ([this.firstChild, this.target].includes(activeElement))
-      ) {
-        event.preventDefault();
-        /*
-         * Move focus back to the controller if the Shift key is pressed with
-         * the Tab key, but only if the Event target is the Popup's first
-         * interactive child or the Popup itself.
-         */
-        this.controller.focus();
+      if (shiftKey) {
+        if ([this.firstChild, this.target].includes(activeElement)) {
+          event.preventDefault();
+          /*
+           * Move focus back to the controller if the Shift key is pressed with
+           * the Tab key, but only if the Event target is the Popup's first
+           * interactive child or the Popup itself.
+           */
+          this.controller.focus();
+        }
       } else if (this.lastChild === activeElement) {
@@ -290,0 +289,0 @@ /*

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

110095

increased by1.72%

Number of package files

32

increased by3.23%

Lines of code

2875

increased by2.17%

Number of lines in readme file

70

increased by2.94%

No dependency changes