refactor(ui): a11y improvements

components/app/Footer.vue

@@ -26,7 +26,6 @@
           <tippy
             ref="options"
             interactive
-            tabindex="-1"
             trigger="click"
             theme="popover"
             arrow
@@ -97,7 +96,8 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
           icon="menu_open"
-          :class="['transform rotate-180', { 'rotate-0': !RIGHT_SIDEBAR }]"
+          class="transform rotate-180"
+          :class="{ 'rotate-0': !RIGHT_SIDEBAR }"
           @click.native="toggleSetting('RIGHT_SIDEBAR')"
         />
       </div>

components/app/Header.vue

@@ -15,21 +15,13 @@
         icon="offline_bolt"
         @click.native="showInstallPrompt()"
       />
-      <span tabindex="-1">
-        <ButtonPrimary
-          v-if="currentUser === null"
-          label="Login"
-          @click.native="showLogin = true"
-        />
-        <tippy
-          v-else
-          ref="user"
-          interactive
-          tabindex="-1"
-          trigger="click"
-          theme="popover"
-          arrow
-        >
+      <ButtonPrimary
+        v-if="currentUser === null"
+        label="Login"
+        @click.native="showLogin = true"
+      />
+      <span v-else>
+        <tippy ref="user" interactive trigger="click" theme="popover" arrow>
           <template #trigger>
             <ProfilePicture
               v-if="currentUser.photoURL"

components/app/Sidenav.vue

@@ -63,6 +63,7 @@ export default {
   @apply justify-center;
   @apply transition;
   @apply hover:(bg-primaryDark text-secondaryDark);
+  @apply focus-visible:(ring ring-inset ring-accent);
 
   .material-icons,
   .svg-icons {