add key binding to copy code

sass/popup.scss

@@ -21,6 +21,14 @@ body {
   font-size: 16px;
   cursor: default;
   user-select: none;
+
+  :focus {
+    outline: auto;
+  }
+}
+
+.hideoutline * {
+  outline: none !important;
 }
 
 svg {
@@ -282,6 +290,8 @@ svg {
   }
   border-radius: 2px;
   position: relative;
+  display: block;
+  cursor: pointer;
 
   .issuer {
     font-size: 12px;
@@ -301,7 +311,6 @@ svg {
     width: 80%;
     user-select: text;
     font-family: "Droid Sans Mono";
-    cursor: pointer;
   }
 
   .sector,

src/components/Popup.vue

@@ -5,7 +5,10 @@
       'theme-normal': theme !== 'accessibility' && theme !== 'dark',
       'theme-accessibility': theme === 'accessibility',
       'theme-dark': theme === 'dark',
+      hideoutline,
     }"
+    v-on:mousedown="hideoutline = true"
+    v-on:keydown="hideoutline = false"
   >
     <MainHeader />
     <MainBody
@@ -51,7 +54,7 @@
     ></div>
 
     <!-- CLIPBOARD -->
-    <input type="text" id="codeClipboard" />
+    <input type="text" id="codeClipboard" tabindex="-1" />
   </div>
 </template>
 <script lang="ts">
@@ -78,6 +81,11 @@ for (const module of computedPrototype) {
 }
 
 export default Vue.extend({
+  data: function () {
+    return {
+      hideoutline: true,
+    };
+  },
   computed,
   methods: {
     hideQr() {

src/components/Popup/EnterPasswordPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-on:keydown.stop>
     <div class="text">{{ i18n.passphrase_info }}</div>
     <a-text-input
       type="password"
@@ -29,8 +29,12 @@ export default Vue.extend({
     },
   },
   methods: {
-    applyPassphrase() {
-      this.$store.dispatch("accounts/applyPassphrase", this.password);
+    async applyPassphrase() {
+      await this.$store.dispatch("accounts/applyPassphrase", this.password);
+      const firstEntry = document.querySelector(
+        ".entry[tabindex='0']"
+      ) as HTMLElement;
+      firstEntry?.focus();
     },
   },
 });

src/components/Popup/EntryComponent.vue

@@ -1,5 +1,16 @@
 <template>
-  <div>
+  <a
+    role="button"
+    data-x-role="entry"
+    v-bind:tabindex="tabindex"
+    v-bind:class="{
+      entry: true,
+      pinnedEntry: entry.pinned,
+      'no-copy': noCopy(entry.code),
+    }"
+    v-on:click="copyCode(entry)"
+    v-on:keydown.enter="copyCode(entry)"
+  >
     <div class="deleteAction" v-on:click="removeEntry(entry)">
       <IconMinusCircle />
     </div>
@@ -40,10 +51,8 @@
       v-bind:class="{
         code: true,
         hotp: entry.type === OTPType.hotp || entry.type === OTPType.hhex,
-        'no-copy': noCopy(entry.code),
         timeout: entry.period - (second % entry.period) < 5,
       }"
-      v-on:click="copyCode(entry)"
       v-html="style.isEditing ? showBulls(entry) : showCode(entry.code)"
     ></div>
     <div class="issuer">{{ entry.account }}</div>
@@ -58,17 +67,17 @@
     <div
       class="showqr"
       v-if="shouldShowQrIcon(entry)"
-      v-on:click="showQr(entry)"
+      v-on:click.stop="showQr(entry)"
     >
       <IconQr />
     </div>
-    <div class="pin" v-on:click="pin(entry)">
+    <div class="pin" v-on:click.stop="pin(entry)">
       <IconPin />
     </div>
     <div class="movehandle">
       <IconBars />
     </div>
-  </div>
+  </a>
 </template>
 <script lang="ts">
 import Vue from "vue";
@@ -104,6 +113,7 @@ export default Vue.extend({
   computed,
   props: {
     entry: OTPEntry,
+    tabindex: Number,
   },
   methods: {
     noCopy(code: string) {
@@ -222,10 +232,12 @@ export default Vue.extend({
               );
             }
 
+            const lastActiveElement = document.activeElement as HTMLElement;
             codeClipboard.value = entry.code;
             codeClipboard.focus();
             codeClipboard.select();
             document.execCommand("Copy");
+            lastActiveElement.focus();
             this.$store.dispatch(
               "notification/ephermalMessage",
               this.i18n.copied

src/components/Popup/MainBody.vue

@@ -14,6 +14,7 @@
         v-model="searchText"
         v-bind:placeholder="i18n.search"
         type="text"
+        tabindex="-1"
       />
       <div id="searchHint" v-if="searchText === ''">
         <div></div>
@@ -22,21 +23,21 @@
       </div>
     </div>
     <!-- Entries -->
-    <div v-dragula drake="entryDrake">
+    <div
+      v-dragula
+      drake="entryDrake"
+      v-on:keydown.down="focusNextEntry()"
+      v-on:keydown.right="focusNextEntry()"
+      v-on:keydown.up="focusLastEntry()"
+      v-on:keydown.left="focusLastEntry()"
+    >
       <EntryComponent
-        class="entry pinnedEntry"
-        v-for="entry in pinnedEntries"
+        v-for="entry in entries"
         :key="entry.hash"
+        v-bind:filtered="!entry.pinned && !isMatchedEntry(entry)"
         v-bind:notSearched="!isSearchedEntry(entry)"
         v-bind:entry="entry"
-      />
-      <EntryComponent
-        class="entry"
-        v-for="entry in unpinnedEntries"
-        :key="entry.hash"
-        v-bind:filtered="!isMatchedEntry(entry)"
-        v-bind:notSearched="!isSearchedEntry(entry)"
-        v-bind:entry="entry"
+        v-bind:tabindex="getTabindex(entry)"
       />
     </div>
   </div>
@@ -51,12 +52,15 @@ import EntryComponent from "./EntryComponent.vue";
 
 import IconPlus from "../../../svg/plus.svg";
 
-let computed = mapState("accounts", ["entries", "filter", "showSearch"]);
-
-Object.assign(
-  computed,
-  mapGetters("accounts", ["shouldFilter", "pinnedEntries", "unpinnedEntries"])
-);
+const computed: {
+  filter: () => boolean;
+  showSearch: () => boolean;
+  shouldFilter: () => boolean;
+  entries: () => OTPEntry[];
+} = {
+  ...mapState("accounts", ["filter", "showSearch"]),
+  ...mapGetters("accounts", ["shouldFilter", "entries"]),
+};
 
 export default Vue.extend({
   data: function () {
@@ -65,6 +69,9 @@ export default Vue.extend({
     };
   },
   computed,
+  mounted: function () {
+    document.querySelector<HTMLLinkElement>(".entry[tabindex='0']")?.focus();
+  },
   methods: {
     isMatchedEntry(entry: OTPEntry) {
       for (const hash of this.$store.getters["accounts/matchedEntries"]) {
@@ -90,6 +97,63 @@ export default Vue.extend({
     clearFilter() {
       this.$store.dispatch("accounts/clearFilter");
     },
+    isEntryVisible(entry: OTPEntry) {
+      return (
+        this.isSearchedEntry(entry) &&
+        (entry.pinned ||
+          !this.shouldFilter ||
+          !this.filter ||
+          this.isMatchedEntry(entry))
+      );
+    },
+    getTabindex(entry: OTPEntry) {
+      const firstEntry = this.entries.find((entry) =>
+        this.isEntryVisible(entry)
+      );
+
+      return entry === firstEntry ? 0 : -1;
+    },
+    findNextEntryIndex(reverse: boolean) {
+      if (document.activeElement?.getAttribute("data-x-role") !== "entry") {
+        return -1;
+      }
+
+      const activeIndex = Array.prototype.indexOf.call(
+        document.querySelectorAll(".entry"),
+        document.activeElement
+      );
+      if (activeIndex === -1) {
+        return -1;
+      }
+
+      // reverse modify origin array, and use slice() to make a clone first
+      const _entries = reverse ? this.entries.slice().reverse() : this.entries;
+
+      let nextIndex = _entries.findIndex(
+        (entry, index) =>
+          index >
+            (reverse ? this.entries.length - 1 - activeIndex : activeIndex) &&
+          this.isEntryVisible(entry)
+      );
+
+      if (nextIndex === -1) {
+        nextIndex = _entries.findIndex((entry) => this.isEntryVisible(entry));
+      }
+
+      return nextIndex;
+    },
+    focusNextEntry() {
+      const nextIndex = this.findNextEntryIndex(false);
+      document
+        .querySelector<HTMLLinkElement>(`.entry:nth-child(${nextIndex + 1})`)
+        ?.focus();
+    },
+    focusLastEntry() {
+      const lastIndex = this.entries.length - 1 - this.findNextEntryIndex(true);
+      document
+        .querySelector<HTMLLinkElement>(`.entry:nth-child(${lastIndex + 1})`)
+        ?.focus();
+    },
   },
   created() {
     // Don't drag if !isEditing

src/store/Accounts.ts

@@ -59,11 +59,12 @@ export class Accounts implements Module {
           }
           return false;
         },
-        pinnedEntries(state: AccountsState) {
-          return state.entries.filter((entry) => entry.pinned);
-        },
-        unpinnedEntries(state: AccountsState) {
-          return state.entries.filter((entry) => !entry.pinned);
+        entries(state: AccountsState) {
+          const pinnedEntries = state.entries.filter((entry) => entry.pinned);
+          const unpinnedEntries = state.entries.filter(
+            (entry) => !entry.pinned
+          );
+          return [...pinnedEntries, ...unpinnedEntries];
         },
       },
       mutations: {