Merge pull request #23 from Brightspace/dbatiste/arrow-keys-behavior-rtl

Updating d2l-focusable-arrowkeys-behavior to invert left/right arrow …
BrightspaceUI · Jul 23, 2018 · b4a9df1 · b4a9df1
2 parents b8f2caa + df93dc6
commit b4a9df1
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 30 deletions.
diff --git a/d2l-focusable-arrowkeys-behavior.html b/d2l-focusable-arrowkeys-behavior.html
@@ -122,10 +122,23 @@
 		},
 
 		__handleKeyDown: function(e) {
+			var target = e.target;
 			if (this.arrowKeyFocusablesDirection === 'leftright' && e.keyCode === this.__keyCodes.LEFT) {
-				this.__focusPrevious(e.target);
+				fastdom.measure(function() {
+					if (getComputedStyle(this).direction === 'rtl') {
+						this.__focusNext(target);
+					} else {
+						this.__focusPrevious(target);
+					}
+				}.bind(this));
 			} else if (this.arrowKeyFocusablesDirection === 'leftright' && e.keyCode === this.__keyCodes.RIGHT) {
-				this.__focusNext(e.target);
+				fastdom.measure(function() {
+					if (getComputedStyle(this).direction === 'rtl') {
+						this.__focusPrevious(target);
+					} else {
+						this.__focusNext(target);
+					}
+				}.bind(this));
 			} else if (this.arrowKeyFocusablesDirection === 'updown' && e.keyCode === this.__keyCodes.UP) {
 				this.__focusPrevious(e.target);
 			} else if (this.arrowKeyFocusablesDirection === 'updown' && e.keyCode === this.__keyCodes.DOWN) {

diff --git a/test/focusable-arrowkeys-behavior.html b/test/focusable-arrowkeys-behavior.html
@@ -42,20 +42,20 @@
 			</template>
 		</test-fixture>
 
+		<div dir="rtl">
+			<test-fixture id="simpleFixtureRtl">
+				<template>
+					<d2l-focusable-arrowkeys-test></d2l-focusable-arrowkeys-test>
+				</template>
+			</test-fixture>
+		</div>
+
 		<script>
 
 		describe('d2l-focusable-arrowkeys-behavior', function() {
 
 			var simpleFixture, focusables;
 
-			beforeEach(function(done) {
-				simpleFixture = fixture('simpleFixture');
-				simpleFixture.arrowKeyFocusablesProvider().then(function(result) {
-					focusables = result;
-					done();
-				});
-			});
-
 			var testKeyInteractions = function(keyInteractions) {
 
 				for (var i=0; i<keyInteractions.length; i++) {
@@ -83,34 +83,71 @@
 
 			};
 
-			describe('left-right', function() {
+			describe('ltr', function() {
+
+				beforeEach(function(done) {
+					simpleFixture = fixture('simpleFixture');
+					simpleFixture.arrowKeyFocusablesProvider().then(function(result) {
+						focusables = result;
+						done();
+					});
+				});
+
+				describe('left-right', function() {
+
+					testKeyInteractions([
+						{ name: 'focuses on next focusable when Right arrow key is pressed', startIndex: 2, endIndex: 3, keyCode: 39 },
+						{ name: 'focuses on previous focusable when Left arrow key is pressed', startIndex: 2, endIndex: 1, keyCode: 37 },
+						{ name: 'focuses on first focusable when Right arrow key is pressed on last focusable', startIndex: 4, endIndex: 0, keyCode: 39 },
+						{ name: 'focuses on last focusable when Left arrow key is pressed on first focusable', startIndex: 0, endIndex: 4, keyCode: 37 },
+						{ name: 'focuses on first focusable when Home key is pressed', startIndex: 2, endIndex: 0, keyCode: 36 },
+						{ name: 'focuses on last focusable when End key is pressed', startIndex: 2, endIndex: 4, keyCode: 35 }
+					]);
 
-				testKeyInteractions([
-					{ name: 'focuses on next focusable when Right arrow key is pressed', startIndex: 2, endIndex: 3, keyCode: 39 },
-					{ name: 'focuses on previous focusable when Left arrow key is pressed', startIndex: 2, endIndex: 1, keyCode: 37 },
-					{ name: 'focuses on first focusable when Right arrow key is pressed on last focusable', startIndex: 4, endIndex: 0, keyCode: 39 },
-					{ name: 'focuses on last focusable when Left arrow key is pressed on first focusable', startIndex: 0, endIndex: 4, keyCode: 37 },
-					{ name: 'focuses on first focusable when Home key is pressed', startIndex: 2, endIndex: 0, keyCode: 36 },
-					{ name: 'focuses on last focusable when End key is pressed', startIndex: 2, endIndex: 4, keyCode: 35 }
-				]);
+				});
+
+				describe('up-down', function() {
+
+					beforeEach(function(done) {
+						simpleFixture.arrowKeyFocusablesDirection = 'updown';
+						done();
+					});
+
+					testKeyInteractions([
+						{ name: 'focuses on next focusable when Down arrow key is pressed', startIndex: 2, endIndex: 3, keyCode: 40 },
+						{ name: 'focuses on previous focusable when Up arrow key is pressed', startIndex: 2, endIndex: 1, keyCode: 38 },
+						{ name: 'focuses on first focusable when Down arrow key is pressed on last focusable', startIndex: 4, endIndex: 0, keyCode: 40 },
+						{ name: 'focuses on last focusable when Up arrow key is pressed on first focusable', startIndex: 0, endIndex: 4, keyCode: 38 },
+						{ name: 'focuses on first focusable when Home key is pressed', startIndex: 2, endIndex: 0, keyCode: 36 },
+						{ name: 'focuses on last focusable when End key is pressed', startIndex: 2, endIndex: 4, keyCode: 35 }
+					]);
+
+				});
 
 			});
 
-			describe('up-down', function() {
+			describe('rtl', function() {
 
 				beforeEach(function(done) {
-					simpleFixture.arrowKeyFocusablesDirection = 'updown';
-					done();
+					simpleFixture = fixture('simpleFixtureRtl');
+					simpleFixture.arrowKeyFocusablesProvider().then(function(result) {
+						focusables = result;
+						done();
+					});
 				});
 
-				testKeyInteractions([
-					{ name: 'focuses on next focusable when Down arrow key is pressed', startIndex: 2, endIndex: 3, keyCode: 40 },
-					{ name: 'focuses on previous focusable when Up arrow key is pressed', startIndex: 2, endIndex: 1, keyCode: 38 },
-					{ name: 'focuses on first focusable when Down arrow key is pressed on last focusable', startIndex: 4, endIndex: 0, keyCode: 40 },
-					{ name: 'focuses on last focusable when Up arrow key is pressed on first focusable', startIndex: 0, endIndex: 4, keyCode: 38 },
-					{ name: 'focuses on first focusable when Home key is pressed', startIndex: 2, endIndex: 0, keyCode: 36 },
-					{ name: 'focuses on last focusable when End key is pressed', startIndex: 2, endIndex: 4, keyCode: 35 }
-				]);
+				describe('left-right', function() {
+
+					testKeyInteractions([
+						{ name: 'focuses on previous focusable when Right arrow key is pressed', startIndex: 2, endIndex: 1, keyCode: 39 },
+						{ name: 'focuses on next focusable when Left arrow key is pressed', startIndex: 2, endIndex: 3, keyCode: 37 },
+						{ name: 'focuses on first focusable when Left arrow key is pressed on last focusable', startIndex: 4, endIndex: 0, keyCode: 37 },
+						{ name: 'focuses on last focusable when Right arrow key is pressed on first focusable', startIndex: 0, endIndex: 4, keyCode: 39 },
+						{ name: 'focuses on first focusable when Home key is pressed', startIndex: 2, endIndex: 0, keyCode: 36 },
+						{ name: 'focuses on last focusable when End key is pressed', startIndex: 2, endIndex: 4, keyCode: 35 }
+					]);
+
+				});
 
 			});