Merge pull request #2 from Q42/develop

Merge: develop -> master

README.md

@@ -10,7 +10,7 @@ $ npm install @q42/floating-focus-a11y --save
 ## Usage
 Import the package and instantiate the class on page load:
 ```javascript
-import { FloatingFocus } from '@q42/floating-focus-a11y';
+import FloatingFocus from '@q42/floating-focus-a11y';
 new FloatingFocus();
 ```
 

src/floating-focus.js

@@ -1,7 +1,9 @@
 import './floating-focus.scss';
 
 export default class FloatingFocus {
-	constructor() {
+	constructor(container = document.body) {
+		this.container = container;
+
 		this.bindEventListenersToInstance();
 
 		this.addKeydownEvents();
@@ -15,7 +17,7 @@ export default class FloatingFocus {
 		const element = document.createElement('div');
 		element.classList.add('floating-focus');
 
-		document.body.appendChild(element);
+		this.container.appendChild(element);
 		return element; // Floater pun intended.
 	}
 
@@ -79,27 +81,29 @@ export default class FloatingFocus {
 	}
 
 	enableFloatingFocus() {
-		document.body.classList.add('floating-focus-enabled');
+		this.container.classList.add('floating-focus-enabled');
 		this.floater.classList.add('enabled');
 	}
 
 	disableFloatingFocus() {
-		document.body.classList.remove('floating-focus-enabled');
+		this.container.classList.remove('floating-focus-enabled');
 		this.floater.classList.remove('enabled');
 	}
 
 	handleFocus(e) {
 		const target = e.target;
 
-		if (!this.floater) {
+		if (!this.floater || !this.container) {
 			return;
 		}
 
 		if (target === this.floater) {
+			this.handleBlur();
 			return;
 		}
 
-		if (!document.body.contains(target)) {
+		if (!this.container.contains(target)) {
+			this.handleBlur();
 			return;
 		}
 
@@ -129,6 +133,10 @@ export default class FloatingFocus {
 		this.floater.classList.remove('helper');
 		this.floater.classList.remove('moving');
 
+		if (!this.target) {
+			return;
+		}
+
 		this.target.classList.remove('floating-focused');
 	}
 

src/floating-focus.scss

@@ -14,7 +14,7 @@
 	box-sizing: content-box;
 	pointer-events: none;
 	overflow: hidden;
-	z-index: 999;
+	z-index: 9999999999; // It should always be on top of everything, no matter what.
 
 	&.moving {
 		transition-property: opacity, border-radius, left, top, width, height;
@@ -47,10 +47,10 @@
 
 .floating-focused {
 	&:focus {
-		outline-width: 0;
+		outline-width: 0 !important;
 	}
 
 	&::-moz-focus-inner {
-		border: 0;
+		border: 0 !important;
 	}
 }