You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/04/16 10:13:21 UTC

[royale-asjs] branch develop updated: jewel-list: accesibility navigation with Up/Down keys thought items in list

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 9a96c3d  jewel-list: accesibility navigation with Up/Down keys thought items in list
9a96c3d is described below

commit 9a96c3dd297c716fa54dfcdccad43a25280ac617
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Apr 16 12:13:17 2020 +0200

    jewel-list: accesibility navigation with Up/Down keys thought items in list
---
 .../apache/royale/jewel/beads/views/ListView.as    | 38 ++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ListView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ListView.as
index c71cd11..33042ab 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ListView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ListView.as
@@ -22,6 +22,13 @@ package org.apache.royale.jewel.beads.views
 	{
 	import org.apache.royale.core.IStrand;
 	}
+	COMPILE::JS
+    {
+    import goog.events;
+
+    import org.apache.royale.core.IRenderedObject;
+    import org.apache.royale.jewel.List;
+	}
 	import org.apache.royale.core.IItemRenderer;
 	import org.apache.royale.core.IItemRendererOwnerView;
 	import org.apache.royale.core.ILayoutView;
@@ -29,7 +36,9 @@ package org.apache.royale.jewel.beads.views
 	import org.apache.royale.core.ISelectableItemRenderer;
 	import org.apache.royale.core.ISelectionModel;
 	import org.apache.royale.events.Event;
+	import org.apache.royale.events.KeyboardEvent;
 	import org.apache.royale.html.beads.DataContainerView;
+	import org.apache.royale.jewel.beads.controls.list.scrollToIndex;
 	import org.apache.royale.utils.getSelectionRenderBead;
 
 	/**
@@ -83,11 +92,40 @@ package org.apache.royale.jewel.beads.views
 			listModel.addEventListener("selectionChanged", selectionChangeHandler);
 			listModel.addEventListener("rollOverIndexChanged", rollOverIndexChangeHandler);
 			
+			goog.events.listen((_strand as IRenderedObject).element, 'keydown', keyEventHandler);
+			
 			super.handleInitComplete(event);
 		}
 
 		/**
 		 * @private
+		 */
+		COMPILE::JS
+		protected function keyEventHandler(event:KeyboardEvent):void
+		{
+			event.preventDefault();
+
+			var prevIndex:int = listModel.selectedIndex;
+
+			if(event.key === KeyboardEvent.KEYCODE__UP)
+			{
+				if(prevIndex > 0)
+					listModel.selectedIndex -=1;
+			} 
+			else if(event.key === KeyboardEvent.KEYCODE__DOWN)
+			{
+				listModel.selectedIndex +=1;
+			}
+
+			if(prevIndex != listModel.selectedIndex)
+			{
+				selectionChangeHandler(null);
+				scrollToIndex(_strand as List, listModel.selectedIndex);
+			}
+		}
+
+		/**
+		 * @private
 		 * Ensure the list selects the selectedItem if some is set by the user at creation time
 		 */
 		override protected function itemsCreatedHandler(event:Event):void