katja's git: oeffisearch

searchView: improve keyboard navigation

diff --git a/src/baseView.js b/src/baseView.js
@@ -63,7 +63,13 @@ export class BaseView extends LitElement {
 		}
 	};
 
-	overlayHandler = event => event.target === event.currentTarget && this.overlayState.type !== 'loader' ? this.hideOverlay() : true;
+	overlayHandler  = event => event.target === event.currentTarget && this.overlayState.type !== 'loader' ? this.hideOverlay() : true;
+	keyClickHandler = event => {
+		if ([ 'Enter', 'Space' ].includes(event.code)) {
+			event.preventDefault();
+			event.target.click();
+		}
+	};
 
 	render () {
 		let overlayContent;

diff --git a/src/searchView.js b/src/searchView.js
@@ -122,12 +122,24 @@ class SearchView extends BaseView {
 						@input=${this.inputHandler} 
 						autocomplete="off"  ?required=${name !== 'via'}>
 
-						${name !== 'from' ? nothing : html`
-							<div class="button icon-arrow ${classMap({ flipped: this.settingsState.showVia })}" tabindex="0" title="${t('via')}"
-							@click=${this.settingsState.toggleShowVia}></div>
-						`}
-						${name !== 'via' ? nothing : html`<div class="button icon-arrow invisible"></div>`}
-						${name !== 'to' ? nothing : html`<div class="button icon-swap" tabindex="0" title=${t('swap')} @click=${this.swapFromTo}></div>`}
+						${when(
+							name === 'from',
+							() => html`
+								<div class="button icon-arrow ${classMap({ flipped: this.settingsState.showVia })}" tabindex="0" title="${t('via')}"
+								@keydown=${this.keyClickHandler} @click=${this.settingsState.toggleShowVia}></div>
+							`
+						)}
+						${when(
+							name === 'via',
+							() => html`<div class="button icon-arrow invisible"></div>`
+						)}
+						${when(
+							name === 'to',
+							() => html`
+								<div class="button icon-swap" tabindex="0" title=${t('swap')}
+								@keydown=${this.keyClickHandler} @click=${this.swapFromTo}></div>
+							`
+						)}
 					</div>
 
 					<div class="suggestions ${this.location[name].suggestionsVisible ? '' : 'hidden'}">

@@ -143,12 +155,13 @@ class SearchView extends BaseView {
 					<div class="flex-row">
 						<div class="selector">
 							<input type="radio" id="departure" name="isArrival" value="0" @change=${this.changeHandler} .checked=${!this.isArrival}>
-							<label for="departure" tabindex="0">${t('departure')}</label>
+							<label for="departure" tabindex=0 @keydown=${this.keyClickHandler}>${t('departure')}</label>
 							<input type="radio" id="arrival" name="isArrival" value="1" @change=${this.changeHandler} .checked=${this.isArrival}>
-							<label for="arrival" tabindex="0">${t('arrival')}</label>
+							<label for="arrival" tabindex=0 @keydown=${this.keyClickHandler}>${t('arrival')}</label>
 						</div>
 
-						<div class="button now" tabindex="0" title="${t('titleSetDateTimeNow')}" @click=${this.resetDate}>${t('now')}</div>
+						<div class="button now" tabindex=0 title="${t('titleSetDateTimeNow')}"
+						@keydown=${this.keyClickHandler} @click=${this.resetDate}>${t('now')}</div>
 						${!this.settingsState.combineDateTime ? html`
 						<input type="time" name="time" title="${t('time')}" class="flex-grow" @change=${this.changeHandler} .value=${this.date.formatTime()} required>
 						<input type="date" name="date" title="${t('date')}" class="flex-grow" @change=${this.changeHandler} .value=${this.date.formatISODate()} required>

diff --git a/src/styles/buttonInput.css b/src/styles/buttonInput.css
@@ -10,7 +10,7 @@ input {
 
 input[type="number"] {
 	outline: none;
-	border: 1px solid gray;
+	border: .1em solid gray;
 	border-radius: 5px;
 }
 

@@ -19,7 +19,7 @@ button:focus,
 .selector label:focus,
 .arrowButton:focus,
 input:not([type="checkbox"]):focus {
-	outline: .1em solid gray;
+	outline: .2em solid #43a047;
 }
 
 button,