Merge pull request #17 from Brightspace/dbatiste/focus-behavior

Dbatiste/focus behavior
BrightspaceUI · Feb 16, 2018 · 56c67ef · 56c67ef
2 parents ca03a7c + b80f028
commit 56c67ef
Show file tree

Hide file tree

Showing 9 changed files with 191 additions and 31 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ bower_components
 bower_components-1.x
 bower-1.x.json
 node_modules/
+package-lock.json
diff --git a/d2l-focusable-behavior.html b/d2l-focusable-behavior.html
@@ -0,0 +1,22 @@
+<link rel="import" href="../polymer/polymer.html">
+<script>
+	window.D2L = window.D2L || {};
+	window.D2L.PolymerBehaviors = window.D2L.PolymerBehaviors || {};
+
+	/** @polymerBehavior */
+	D2L.PolymerBehaviors.FocusableBehavior = {
+
+		/**
+		 * Applies focus to descendent with `d2l-focusable` class.
+		 */
+		focus: function() {
+			// Note: focus event will not be triggered with using Polymer 1 + shady.  If necessary,
+			// we can raise a custom event. For now, keeping this bare-bones.
+			var elem = Polymer.dom(this.root).querySelector('.d2l-focusable');
+			if (!elem) return;
+			elem.focus();
+		}
+
+	};
+
+</script>
diff --git a/demo/dom-focus-demo.html → demo/dom-focus/d2l-dom-focus-component.html b/demo/dom-focus-demo.html → demo/dom-focus/d2l-dom-focus-component.html
@@ -1,6 +1,6 @@
-<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../../polymer/polymer.html">
 
-<dom-module id="d2l-dom-focus-demo">
+<dom-module id="d2l-dom-focus-component">
 	<template>
 		<style>
 			:host {
@@ -13,13 +13,13 @@
 			</div>
 			<slot></slot>
 			<div>
-				<a id="shadow2" href="javascript:void(0);" tabindex="0">Shadow 2</a>
+				<a id="shadow2" class="d2l-focusable" href="javascript:void(0);" tabindex="0">Shadow 2</a>
 			</div>
 		</div>
 	</template>
 	<script>
 		Polymer({
-			is: 'd2l-dom-focus-demo',
+			is: 'd2l-dom-focus-component',
 			getShadow1: function() { return this.$.shadow1; },
 			getShadow2: function() { return this.$.shadow2; }
 		});

diff --git a/demo/dom-focus.html → demo/dom-focus/index.html b/demo/dom-focus.html → demo/dom-focus/index.html
@@ -1,20 +1,11 @@
 <html>
 <head>
 	<title>D2L DOM Focus</title>
-	<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-	<script>
-		var shadow = (window.location.search.indexOf('dom=shadow') > -1);
-		if (shadow) {
-			window.Polymer = window.Polymer || {};
-			window.Polymer.dom = 'shadow';
-		}
-	</script>
-	<link rel="stylesheet" href="demo-styles.css">
-	<link rel="import" href="../../polymer/polymer.html">
-	<link rel="import" href="../d2l-dom-focus.html">
-	<link rel="import" href="dom-focus-demo.html">
-	<style>
-	</style>
+	<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+	<link rel="stylesheet" href="../demo-styles.css">
+	<link rel="import" href="../../../polymer/polymer.html">
+	<link rel="import" href="../../d2l-dom-focus.html">
+	<link rel="import" href="d2l-dom-focus-component.html">
 </head>
 <body unresolved>
 
@@ -52,9 +43,9 @@ <h2>Component</h2>
 	<div id="fixture" style="width: 60%;">
 
 		<a id="light1" href="http://www.nasa.gov/topics/technology/index.html">Technology Drives Exploration (L1)</a>
-		<d2l-dom-focus-demo id="wc1">
+		<d2l-dom-focus-component id="wc1">
 			<a id="light2" href="http://www.nasa.gov/topics/solarsystem/index.html">Solar System and Beyond (L2)</a>
-		</d2l-dom-focus-demo>
+		</d2l-dom-focus-component>
 		<a id="light3" href="http://www.nasa.gov/topics/journeytomars/index.html">Journey to Mars (L3)</a>
 
 	</div>

diff --git a/demo/focusable-behavior/d2l-focusable-component.html b/demo/focusable-behavior/d2l-focusable-component.html
@@ -0,0 +1,23 @@
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../d2l-focusable-behavior.html">
+
+<dom-module id="d2l-focusable-component">
+	<template>
+		<style>
+			:host, a {
+				display: block;
+			}
+		</style>
+		<div>
+			<a id="shadow1" href="javascript:void(0);" tabindex="0">Shadow 1</a>
+			<slot></slot>
+			<a id="shadow2" class="d2l-focusable" href="javascript:void(0);" tabindex="0">Shadow 2 (d2l-focusable)</a>
+		</div>
+	</template>
+	<script>
+		Polymer({
+			is: 'd2l-focusable-component',
+			behaviors: [D2L.PolymerBehaviors.FocusableBehavior]
+		});
+	</script>
+</dom-module>
diff --git a/demo/focusable-behavior/index.html b/demo/focusable-behavior/index.html
@@ -0,0 +1,27 @@
+<html>
+<head>
+	<title>D2L Focusable Behavior</title>
+	<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+	<link rel="stylesheet" href="../demo-styles.css">
+	<link rel="import" href="../../../polymer/polymer.html">
+	<link rel="import" href="d2l-focusable-component.html">
+	<style>
+		a {
+			display: block;
+		}
+	</style>
+</head>
+<body unresolved>
+
+	<h1>d2l-focusable-behavior</h1>
+
+	<h2>Component</h2>
+
+	<button onclick="document.body.querySelector('d2l-focusable-component').focus();">Focus Component</button>
+
+	<d2l-focusable-component id="wc1">
+		<a href="http://www.nasa.gov/topics/solarsystem/index.html">Solar System and Beyond (L2)</a>
+	</d2l-focusable-component>
+
+</body>
+</html>
diff --git a/test/dom.html b/test/dom.html
@@ -121,7 +121,7 @@
 				it('returns distributed child elements for insertion point', function() {
 					var container = wcFixture.getContainer();
 					var children = D2L.Dom.getComposedChildren(container);
-					if (shadow) {
+					if (shadow || Polymer.Element) {
 						expect(children[0].tagName).to.be.oneOf(['SLOT', 'CONTENT']);
 						children = D2L.Dom.getComposedChildren(children[0]);
 					}
@@ -140,7 +140,7 @@
 				});
 
 				it('returns insertion point as parent of distributed node', function() {
-					if (shadow) {
+					if (shadow || Polymer.Element) {
 						expect(D2L.Dom.getComposedParent(wcFixture.querySelector('#light1')))
 							.to.equal(Polymer.dom(wcFixture.querySelector('#light1')).getDestinationInsertionPoints()[0]);
 					} else {
@@ -150,7 +150,7 @@
 				});
 
 				it('returns host as parent of shadow-root', function() {
-					if (shadow) {
+					if (shadow || Polymer.Element) {
 						expect(D2L.Dom.getComposedParent(wcFixture.root))
 							.to.equal(wcFixture);
 					} else {

diff --git a/test/focusable-behavior.html b/test/focusable-behavior.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>d2l-focusable-behavior tests</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+		<script src="../../web-component-tester/browser.js"></script>
+		<link rel="import" href="../../polymer/polymer.html">
+		<link rel="import" href="../d2l-focusable-behavior.html">
+		<link rel="import" href="../d2l-dom-focus.html">
+	</head>
+	<body>
+
+		<dom-module id="d2l-focusable-test">
+			<template>
+				<div>
+					<div>
+						<a id="shadow1" href="javascript:void(0);"></a>
+					</div>
+					<div>
+						<slot></slot>
+					</div>
+					<div>
+						<a id="shadow2" class="d2l-focusable" href="javascript:void(0);"></a>
+					</div>
+				</div>
+			</template>
+			<script>
+				Polymer({
+					is: 'd2l-focusable-test',
+					behaviors: [D2L.PolymerBehaviors.FocusableBehavior],
+					getShadow1: function() { return this.$.shadow1; },
+					getShadow2: function() { return this.$.shadow2; }
+				});
+			</script>
+		</dom-module>
+
+		<test-fixture id="simpleFixture">
+			<template>
+				<d2l-focusable-test id="wc1">
+					<a id="light1" class="d2l-focusable" href="javascript:void(0);"></a>
+				</d2l-focusable-test>
+			</template>
+		</test-fixture>
+
+		<script>
+
+		describe('d2l-focusable-behavior', function() {
+
+			var simpleFixture;
+
+			beforeEach(function() {
+				simpleFixture = fixture('simpleFixture');
+			});
+
+			it('does not initially have focus applied to the d2l-focusable element', function() {
+				expect(document.activeElement).to.equal(document.body);
+			});
+
+			it('focuses on element with d2l-focusable when focus method is called', function() {
+				simpleFixture.focus();
+				expect(D2L.Dom.Focus.getComposedActiveElement()).to.equal(simpleFixture.getShadow2());
+			});
+
+			it('triggers the blur event when focus method is called', function(done) {
+				var startingElement = simpleFixture.querySelector('#light1');
+				startingElement.focus();
+				startingElement.addEventListener('blur', function() {
+					done();
+				});
+				simpleFixture.focus();
+			});
+
+			it('triggers the focus event when focus method is called', function(done) {
+				if (!Polymer.Element && !Polymer.Settings.useShadow) {
+					// Note: focus event will not be triggered with using Polymer 1 + shady.  If necessary,
+					// we can raise a custom event. For now, keeping this bare-bones.
+					done();
+				}
+				simpleFixture.addEventListener('focus', function() {
+					done();
+				});
+				simpleFixture.focus();
+			});
+
+		});
+
+		</script>
+	</body>
+</html>
diff --git a/test/index.html b/test/index.html
@@ -8,15 +8,20 @@
 	</head>
 	<body>
 		<script>
-		WCT.loadSuites([
-			'dom.html?wc-shadydom',
-			'dom.html?dom=shadow',
-			'dom-visibility.html?wc-shadydom',
-			'dom-visibility.html?dom-shadow',
-			'dom-focus.html?wc-shadydom',
-			'dom-focus.html?dom=shadow',
+		var testVariants = [], tests = [
+			'dom.html',
+			'dom-visibility.html',
+			'dom-focus.html',
+			'focusable-behavior.html',
 			'id.html'
-		]);
+		];
+
+		for (var i = 0; i < tests.length; i++) {
+			testVariants.push(tests[i] + '?wc-shadydom=true');
+			testVariants.push(tests[i] + '?dom=shadow');
+		}
+
+		WCT.loadSuites(testVariants);
 		</script>
 	</body>
 </html>