[Client] Improve usability

src/web/app/common/tags/messaging/index.tag

@@ -2,16 +2,14 @@
 	<div class="search">
 		<div class="form">
 			<label for="search-input"><i class="fa fa-search"></i></label>
-			<input ref="searchInput" type="search" oninput={ search } placeholder="ユーザーを探す"/>
+			<input ref="search" type="search" oninput={ search } onkeydown={ onSearchKeydown } placeholder="ユーザーを探す"/>
 		</div>
 		<div class="result">
-			<ol class="users" if={ searchResult.length > 0 }>
+			<ol class="users" if={ searchResult.length > 0 } ref="searchResult">
-				<li each={ user in searchResult }>
+				<li each={ user, i in searchResult } onkeydown={ parent.onSearchResultKeydown.bind(null, i) } onclick={ user._click } tabindex="-1">
-					<a onclick={ user._click }>
 					<img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/>
 					<span class="name">{ user.name }</span>
 					<span class="username">@{ user.username }</span>
-					</a>
 				</li>
 			</ol>
 		</div>
@@ -113,7 +111,6 @@
 						list-style none
 
 						> li
-							> a
 							display inline-block
 							z-index 1
 							width 100%
@@ -124,8 +121,10 @@
 							color rgba(0, 0, 0, 0.8)
 							text-decoration none
 							transition none
+							cursor pointer
 
 							&:hover
+							&:focus
 								color #fff
 								background $theme-color
 
@@ -274,7 +273,6 @@
 					> .result
 						> .users
 							> li
-								> a
 								padding 8px 16px
 
 				> .history
@@ -310,12 +308,13 @@
 				console.error err
 
 		@search = ~>
-			q = @refs.search-input.value
+			q = @refs.search.value
 			if q == ''
 				@search-result = []
 			else
 				@api \users/search do
 					query: q
+					max: 5
 				.then (users) ~>
 					users.for-each (user) ~>
 						user._click = ~>
@@ -325,5 +324,34 @@
 					@update!
 				.catch (err) ~>
 					console.error err
+
+		@on-search-keydown = (e) ~>
+			key = e.which
+			switch (key)
+				| 9, 40 => # Key[TAB] or Key[↓]
+					e.prevent-default!
+					e.stop-propagation!
+					@refs.search-result.child-nodes[0].focus!
+
+		@on-search-result-keydown = (i, e) ~>
+			key = e.which
+			switch (key)
+				| 10, 13 => # Key[ENTER]
+					e.prevent-default!
+					e.stop-propagation!
+					@search-result[i]._click!
+				| 27 => # Key[ESC]
+					e.prevent-default!
+					e.stop-propagation!
+					@refs.search.focus!
+				| 38 => # Key[↑]
+					e.prevent-default!
+					e.stop-propagation!
+					(@refs.search-result.child-nodes[i].previous-element-sibling || @refs.search-result.child-nodes[@search-result.length - 1]).focus!
+				| 9, 40 => # Key[TAB] or Key[↓]
+					e.prevent-default!
+					e.stop-propagation!
+					(@refs.search-result.child-nodes[i].next-element-sibling || @refs.search-result.child-nodes[0]).focus!
+
 	</script>
 </mk-messaging>