focus-lock - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

_tests/focusMerge.spec.js

@@ -23,8 +23,12 @@ import {expect} from 'chai';
     // jump back
-    expect(newFocus([2,3,4],[1,2,3,4,5],1,4)).to.be.equal(2);
+    expect(newFocus([2, 3, 4], [1, 2, 3, 4, 5], 1, 4)).to.be.equal(2);
     // jump back
-    expect(newFocus([2,3,4],[1,2,3,4,5],1,3)).to.be.equal(1);
+    expect(newFocus([2, 3, 4], [1, 2, 3, 4, 5], 1, 3)).to.be.equal(1);
   });
 
+  it('should select auto focused', () => {
+    expect(newFocus([2, 3, 4], [1, 2, 3, 4, 5], 1, 0, 3)).to.be.equal(1);
+  });
 
+
 });

package.json

 {
   "name": "focus-lock",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "DOM trap for a focus",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -6,2 +6,13 @@ # focus-lock
 
+#WHY?
+From [MDN Article about accessible dialogs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role):
+ - The dialog must be properly labeled
+ - Keyboard __focus must be managed__ correctly
+ 
+This one is about managing the focus.
+
+I'v got a good [article about focus management, dialogs and  WAI-ARIA](https://medium.com/@antonkorzunov/its-a-focus-trap-699a04d66fb5).    
+
+#Implementations
+
 This is vanilla js base package for:
@@ -16,2 +27,6 @@ - [react-focus-lock](https://github.com/theKashey/react-focus-lock)
 
+#API
+
+`default(topNode, lastNode)` (aka setFocus), moves focus inside topNode, keeping in mind that last focus inside was - lastNode
+ 
 # Licence
@@ -18,0 +33,0 @@ MIT

src/focusMerge.js

@@ -5,3 +5,5 @@ import { orderByTabIndex } from './utils/tabOrder';
 
-export const newFocus = (innerNodes, outerNodes, activeElement, lastNode) => {
+const findAutoFocused = node => !!node.autofocus;
+
+export const newFocus = (innerNodes, outerNodes, activeElement, lastNode, autoFocused) => {
   const cnt = innerNodes.length;
@@ -20,2 +22,5 @@ const firstFocus = innerNodes[0];
   if (activeIndex === -1 || lastNodeInside === -1) {
+    if (autoFocused) {
+      return innerNodes.indexOf(autoFocused);
+    }
     return 0;
@@ -55,16 +60,22 @@ }
 
-  const innerNodes = getTabbableNodes(topNode);
-  if (!innerNodes[0]) {
+  const innerElements = getTabbableNodes(topNode);
+  if (!innerElements[0]) {
     return undefined;
   }
 
+  const innerNodes = innerElements.map(({ node }) => node);
+
   const outerNodes = orderByTabIndex(getFocusables(commonParent)).map(({ node }) => node);
 
-  const newId = newFocus(innerNodes.map(({ node }) => node), outerNodes, activeElement, lastNode);
+  const newId = newFocus(
+    innerNodes, outerNodes,
+    activeElement, lastNode, innerNodes.find(findAutoFocused),
+  );
+
   if (newId === undefined) {
     return newId;
   }
-  return innerNodes[newId];
+  return innerElements[newId];
 };
 
 export default getFocusMerge;

src/utils/tabbables.js

@@ -11,4 +11,8 @@ export default [
   'iframe',
+  'object',
+  'embed',
 
   '[tabindex]',
+  '[contenteditable]',
+  '[autofocus]',
 ];

No alert changes

Improved metrics

Total package byte prevSize

137445

increased by8.19%

Number of package files

28

increased by47.37%

Lines of code

532

increased by100.75%

Number of lines in readme file

34

increased by78.95%

No dependency changes