diff --git a/bricks/accordion.js b/bricks/accordion.js
index 695d3c6..c54e138 100644
--- a/bricks/accordion.js
+++ b/bricks/accordion.js
@@ -17,10 +17,11 @@ bricks.Accordion = class extends bricks.VBox {
 	*/
 	constructor(opts){
 		super(opts);
+		this.keyselectable = true;
 		var item_size = this.opts.item_size || '25px';
 		this.set_height('100%');
 		var items = this.opts.items;
-		this.items = [];
+		this.w_items = [];
 		this.subcontents = {};
 		var item_css = this.opts.item_css || 'accordion' + '-button';
 		var content_css = this.opts.content_css || 'accordion' + '-content';
@@ -34,12 +35,14 @@ bricks.Accordion = class extends bricks.VBox {
 			}
 			var b = new bricks.Button(opts);
 			b.bind('click', this.change_content.bind(this));
-			this.items.push(b);
+			this.w_items.push(b);
 			this.add_widget(b);
 		}
+		this.key_select_items = this.w_items;
 		this.content = new bricks.Filler({});
 		this.sub_container = new bricks.VScrollPanel({height:'100%'});
 		this.content.add_widget(this.sub_container);
+		this.w_items[0].dispatch('click');
 	}
 	async change_content(event){
 		var refresh = false;
diff --git a/bricks/bricks.js b/bricks/bricks.js
index 83e72b6..d8e2b57 100755
--- a/bricks/bricks.js
+++ b/bricks/bricks.js
@@ -498,6 +498,7 @@ bricks.App = class extends bricks.Layout {
 			return null;
 		}
 		bricks.Body.add_widget(w);
+		bricks.Body.down_level();
 	}
 	textsize_bigger(){
 		this.charsize = this.charsize * 1.05;
diff --git a/bricks/dataviewer.js b/bricks/dataviewer.js
index ca9150e..b8005c3 100644
--- a/bricks/dataviewer.js
+++ b/bricks/dataviewer.js
@@ -17,9 +17,15 @@ bricks.DataViewer = class extends bricks.VBox {
 		this.active_item = null;
 		this.loading = false;
 		this.data_offset = 0;
+		this.keyselectable = true;
 		this.bind('row_check_changed', this.show_check_event_data.bind(this));
 		schedule_once(this.build_all.bind(this), 0.1);
 	}
+	set_key_select_items(){
+		if (!this.scrollpanel) return;
+		var items = this.scrollpanel.children;
+		this.key_select_items = items.filter(i => i != items[0]);
+	}
 	async build_all(){
 		this.build_title_widget();
 		this.build_description_widget();
@@ -30,6 +36,7 @@ bricks.DataViewer = class extends bricks.VBox {
 		this.scrollpanel.bind('min_threshold', this.load_previous_page.bind(this));
 		this.scrollpanel.bind('max_threshold', this.load_next_page.bind(this));
 		await this.render();
+		this.set_key_select_items();
 	}
 	async build_other(){
 	}
diff --git a/bricks/layout.js b/bricks/layout.js
index 8e1a82d..e251d82 100755
--- a/bricks/layout.js
+++ b/bricks/layout.js
@@ -1,11 +1,136 @@
 var bricks = window.bricks || {};
+
+bricks.key_selectable_stack = [];
+
 bricks.Layout = class  extends bricks.JsWidget {
 	constructor(options){
 		super(options);
 		this._container = true;
 		this.children = [];
 	}
-
+	set_key_select_items(){
+		this.key_select_items = this.children;
+	}
+	enable_key_select(){
+		if (!this.keyselectable) return;
+		this.set_key_select_items();
+		this.selected_children = null;
+		bricks.app.bind('keydown', this.key_handler.bind(this));
+		bricks.key_selectable_stack.push(this)
+		this.select_default_item();
+	}
+	is_currkeyselectable(){
+		if (!this.keyselectable) return false;
+		var p = bricks.key_selectable_stack.length -1;
+		return bricks.key_selectable_stack[p] == this;
+	}
+	disable_key_select(){
+		if (!this.keyselectable) return;
+		if (this.is_currkeyselectable()){
+			bricks.app.unbind('keydown', this.key_handler.bind(this));
+			this.select_item.selected(false);
+			this.select_item = null;
+			bricks.key_selectable_stack.pop();
+		}
+		return;
+	}
+	select_item(w){
+		if (!this.keyselectable) return;
+		if (this.selected_item){
+			this.selected_item.selected(false);
+		}
+		this.selected_item = w;
+		this.selected_item.selected(true);
+	}
+	select_default_item(){
+		if (!this.keyselectable) return;
+		var w = this.children[0];
+		this.select_item(w);
+	}
+	select_next_item(){
+		if (!this.keyselectable) return;
+		this.set_key_select_items();
+		for (var i=0;i<this.key_select_items.length;i++){
+			if (this.selected_item == this.key_select_items[i]){
+				var k = i + 1;
+				if (k >= this.key_select_items.length){
+					k = 0;
+				}
+				this.select_item(this.key_select_items[k])
+				break
+			}
+		}
+	}
+	select_previous_item(){
+		if (!this.keyselectable) return;
+		this.set_key_select_items();
+		for (var i=0;i<this.key_select_items.length;i++){
+			if (this.selected_item == this.key_select_items[i]){
+				var k = i - 1;
+				if (k < 0){
+					k = this.key_select_items.length - 1;
+				}
+				this.select_item(this.key_select_items[k])
+				break
+			}
+		}
+	}
+	up_level(){
+		if ( bricks.key_selectable_stack.length < 2){
+			return;
+		}
+		if (this.selected_item){
+			this.selected_item.selected(false);
+		}
+		this.disable_key_select();
+	}
+	down_level(){
+		this.set_key_select_items();
+		for (var i=0;i<this.key_select_items.length;i++){
+			var w = this.key_select_items[i];
+			if(w.keyselectable){
+				w.enable_key_select();
+				return true;
+			}
+			try {
+				if (w.down_level()){
+					return true;
+				}
+			} catch (e){
+				;
+			}
+		}
+		return false;
+	}
+	enter_handler(){
+		this.selected_item.dispatch('click');
+		this.down_level();
+	}
+	key_handler(event){
+		if (!this.is_currkeyselectable()){
+			return;
+		}
+		var key = event.key;
+		switch(key) {
+			case 'ArrowDown':
+				this.select_next_item();
+				break;
+			case 'ArrowUp':
+				this.select_previous_item();
+				break;
+			case 'ArrowLeft':
+				this.up_level();
+				break;
+			case 'ArrowRight':
+				this.down_level();
+				break;
+			case 'Enter':
+				this.enter_handler();
+				break
+			default:
+				break;
+		}
+	}
 	add_widget(w, index){
 		if (index !== null && index >=0 && index < this.children.length){
 			var pos_w = this.children[index];
diff --git a/bricks/widget.js b/bricks/widget.js
index 5e5d623..8d0983e 100755
--- a/bricks/widget.js
+++ b/bricks/widget.js
@@ -253,6 +253,13 @@ bricks.JsWidget = class {
 	get_attribute(attr) {
 		this.dom_element.getAttribute(attr);
 	}
+	selected(flag){
+		if(flag){
+			this.set_css('selected');
+		} else {
+			this.set_css('selected', true);
+		}
+	}
 }
 
 
@@ -339,8 +346,8 @@ bricks.KeyinText = class extends bricks.Text {
 		bricks.app.bind('keydown', this.key_down_action.bind(this))
 	}
 	key_down_action(event){
-		var kdic = event.params;
-		switch (kdic.key) {
+		if (! event.key) return;
+		switch (event.key) {
 			case 'Delete':
 				this.set_text('');
 				this.dispatch_changed();
@@ -351,8 +358,8 @@ bricks.KeyinText = class extends bricks.Text {
 				this.dispatch_changed();
 				break;
 			default:
-				if (kdic.key.length == 1){
-					var txt = this.text + kdic.key;
+				if (event.key.length == 1){
+					var txt = this.text + event.key;
 					this.set_text(txt);
 					this.dispatch_changed();
 				}