Merge branch 'develop'

.gitignore

@@ -10,3 +10,6 @@ coverage/
 
 # Built code
 dist/
+
+# macOS
+.DS_Store

README.md

@@ -1,5 +1,5 @@
-# floating-focus-a11y [![Build Status](https://travis-ci.com/Q42/floating-focus-a11y.svg?token=zMS2E6VVY9WYyfREUSjH&branch=master)](https://travis-ci.com/Q42/floating-focus-a11y) [![npm version](https://badge.fury.io/js/%40q42%2Ffloating-focus-a11y.svg)](https://badge.fury.io/js/%40q42%2Ffloating-focus-a11y)
-A clear, beautiful and easy to implement focus-state solution.
+# Accessible Floating Focus [![Build Status](https://travis-ci.com/Q42/floating-focus-a11y.svg?token=zMS2E6VVY9WYyfREUSjH&branch=master)](https://travis-ci.com/Q42/floating-focus-a11y) [![npm version](https://badge.fury.io/js/%40q42%2Ffloating-focus-a11y.svg)](https://badge.fury.io/js/%40q42%2Ffloating-focus-a11y)
+A clear, beautiful and easy to implement focus-state solution that improves accessibility in an aesthetically pleasing way.
 
 ## Installation
 With [npm](https://www.npmjs.com/) installed, run
@@ -16,30 +16,49 @@ new FloatingFocus(containerElement); // Element is an optional parameter which d
 
 Define a default outline and outline-offset. Either of these values can be overruled per component:
 ```css
-// Hide all default focus states if a mouse is used, this is completely optional ofcourse
+/* Hide all default focus states if a mouse is used, this is completely optional ofcourse */
 *:focus {
   outline: none;
 }
 
-// Default outline value, which will be applied to all elements receiving focus, this is a required step.
-.floating-focus-enabled *:focus, .floating-focus-enabled .focus {
+/* Default outline value, which will be applied to all elements receiving focus, this is a required step. */
+/* The .focus class is used by the focus target, more below. */
+.floating-focus-enabled :focus, .floating-focus-enabled .focus {
   outline: dodgerblue solid 2px;
   outline-offset: 8px;
 }
 
-// Give all buttons a green focus state instead of dodgerblue, this is optional in case it's needed.
+/* Give all buttons a green focus state instead of dodgerblue, this is optional in case it's needed. */
 .floating-focus-enabled [type="button"]:focus {
   outline-color: green;
   outline-offset: 4px;
 }
 ```
 
-It's also possible to define a focus-target attribute on focusable elements:
+### Focus target
+
+Sometimes the actual element that receives focus is hidden from view, as is common with a custom input field. In this case it's possible to define a `focus-target` attribute on the focusable element.
+
 ```html
 <input type="file" class="hidden" id="file-upload-123" focus-target="file-upload-123-label"/>
 <label id="file-upload-123-label" for="file-upload-123">Please upload a file</label>
 ```
-This will append the `focus` class to the target element and make the focus box appear around the target element.
+
+This will append the `focus` class to the target element and make the visual focus box appear around the target element, instead of the element that actually has the native focus.
+
+### Separate stylesheet
+
+For convenience, the styles are included in the script by default. There is also an option to include the stylesheet separately. This is particularly useful with strict `style-src 'self'` CORS headers.
+
+Import unstyled dist file:
+```javascript
+import FloatingFocus from '@q42/floating-focus-a11y/dist/unstyled';
+```
+
+The stylesheet can then be separately imported with your favorite CSS preprocessor:
+```css
+@import '@q42/floating-focus-a11y/dist/unstyled';
+```
 
 ## Develop
 ```bash
@@ -53,7 +72,7 @@ $ npm run test
 # bump version
 $ npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]
 
-# pubplish
+# publish
 $ npm publish
 ```
 

example/index.html

@@ -5,22 +5,127 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<title>Document</title>
-	<script src="../dist/floating-focus.js"></script>
+	<script src="../dist/styled/index.js"></script>
 	<script>
 		window.addEventListener('load', function() {
 			new window['floating-focus'].default();
 		});
 	</script>
 	<style>
-		.floating-focus-enabled *:focus, .floating-focus-enabled .focus {
-			outline: dodgerblue solid 2px;
+		*, *::after, *::before {
+			box-sizing: border-box;
+		}
+
+		*:focus {
+			outline: none;
+		}
+
+		.floating-focus-enabled :focus, .floating-focus-enabled .focus {
+			outline: dodgerblue solid 3px;
 			outline-offset: 4px;
 		}
+
+		html {
+			height: 100%;
+		}
+
+		body {
+			min-height: 150%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: column;
+			margin: 20px;
+		}
+
+		body > fieldset,
+		body > input,
+		body > label {
+			margin: 10px;
+			width: 200px;
+		}
+
+		fieldset {
+			border: 0;
+			padding: 0;
+			white-space: nowrap;
+			overflow-x: scroll;
+			overflow-y: hidden;
+			padding-bottom: 20px;
+		}
+
+		fieldset > button {
+			width: 100%;
+		}
+
+		button, input, label, p {
+			padding: 5px 10px;
+			font: 15px sans-serif;
+		}
+
+		button, label {
+			background: darkgoldenrod;
+			color: white;
+			border-radius: 3px;
+			border: 0;
+		}
+
+		label {
+			position: relative;
+			overflow: hidden;
+		}
+
+		input[type="file"] {
+			position: absolute;
+			bottom: 200%;
+			right: 200%;
+		}
+
+		.input-warning-wrapper {
+			background: orangered;
+			width: 200px;
+			color: white;
+			max-height: 0;
+			box-sizing: border-box;
+			transition: max-height .25s ease;
+		}
+		.input-warning-wrapper > p {
+			margin: 0;
+		}
+		.input-warning-wrapper.show {
+			max-height: 50px;
+		}
 	</style>
 </head>
 <body>
-	<button>Test 1</button>
-	<button>Test 2</button>
-	<button>Test 3</button>
+	<fieldset>
+		<button>Test 1</button>
+		<button>Test 2</button>
+		<button>Test 3</button>
+	</fieldset>
+
+	<input type="text">
+	<input type="text">
+	<input type="text">
+
+	<label id="file-upload-label">
+		<input type="file" focus-target="file-upload-label"/>
+		Please upload a file
+	</label>
+
+	<div class="input-warning-wrapper" id="input-warning-wrapper"><p>Please input 3 or more characters!</p></div>
+	<input id="warning-field" type="text">
+
+	<script>
+		const warningField = document.querySelector('#warning-field');
+		const inputWarningWrapper = document.querySelector('#input-warning-wrapper');
+		warningField.addEventListener('input', function () {
+			if (warningField.value && warningField.value.length < 3) {
+				inputWarningWrapper.classList.add('show');
+			} else {
+				inputWarningWrapper.classList.remove('show');
+			}
+		})
+	</script>
 </body>
 </html>

index.d.ts

@@ -1,3 +1,5 @@
-export default class FloatingFocus {
-	constructor(container: Element = document.body) {}
+declare class FloatingFocus {
+	constructor(container?: Element);
 }
+
+export default FloatingFocus;