Keyboard navigation on app

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

apps/accessibility/css/style.scss

@@ -23,6 +23,7 @@
 		user-select: none;
 	}
 	&:hover,
+	&:focus,
 	&.selected {
 		filter: drop-shadow(0 1px 4px var(--color-box-shadow));
 		opacity: 1;

apps/accessibility/package-lock.json

@@ -2816,7 +2816,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3231,7 +3232,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -3287,6 +3289,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -3330,12 +3333,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

apps/accessibility/src/components/itemPreview.vue

@@ -1,13 +1,13 @@
 <template>
-	<div :class="{preview: true, selected: preview.id === selected}"
-		 @click="selectItem">
+	<a :class="{preview: true, selected: preview.id === selected}"
+	   href="#" @click="selectItem">
 		<div class="preview-image" :style="{backgroundImage: 'url(' + preview.img + ')'}"></div>
 		<h3>
 			<span>{{preview.title}}</span>
 			<div class="icon-checkmark-color">{{t('accessibility', 'enabled')}}</div>
 		</h3>
 		<p>{{preview.text}}</p>
-	</div>
+	</a>
 </template>
 
 <script>