fix(css): update hover and focus to make the ui more accessible

Author: dvcol

src/components/common/buttons/ButtonLinkExternal.vue

@@ -43,7 +43,7 @@ const anchor = ref();
   >
     <span>{{ label }}</span>
     <template #trigger>
-      <a ref="anchor" class="anchor-link" :href="href" :title="title">
+      <a ref="anchor" class="anchor-link" :href="href" :title="title" tabindex="-1">
         <NButton
           tertiary
           class="external-link"
@@ -71,6 +71,11 @@ const anchor = ref();
   .external-link {
     height: unset;
     min-height: var(--n-height);
+    border: 1px solid transparent;
+
+    &:focus-visible {
+      border: var(--n-border-focus);
+    }
   }
 
   .external-link:not(.slotted) {

src/components/common/buttons/TagLink.vue

@@ -27,6 +27,7 @@ const onClick = (e: MouseEvent) => {
 
 <template>
   <a
+    class="anchor"
     :href="tag?.url"
     :title="tag?.title ?? tag?.url"
     :data-tag="JSON.stringify(tag)"
@@ -47,8 +48,19 @@ const onClick = (e: MouseEvent) => {
 </template>
 
 <style lang="scss" scoped>
-.tag {
-  width: fit-content;
+.anchor {
+  outline: none;
+
+  .tag {
+    width: fit-content;
+    border: 1px solid transparent;
+  }
+
+  &:focus-visible {
+    .tag {
+      border: 1px solid var(--n-color-checked);
+    }
+  }
 }
 
 .link {
@@ -62,6 +74,8 @@ const onClick = (e: MouseEvent) => {
     padding-left: 0.15rem;
   }
 
+  &:active,
+  &:focus-within,
   &:hover {
     background-color: color-mix(
       in srgb,

src/components/common/buttons/TitleLink.vue

@@ -29,7 +29,12 @@ const onTitleClick = (e: MouseEvent) => {
 </script>
 
 <template>
-  <a class="anchor-link" :title="label" @click="onTitleClick">
+  <a
+    class="anchor-link"
+    :class="{ 'has-link': !!$attrs.href }"
+    :title="label"
+    @click="onTitleClick"
+  >
     <component :is="component" class="content" :class="{ 'hover-link': !!$attrs.href }">
       <slot />
     </component>
@@ -43,18 +48,32 @@ const onTitleClick = (e: MouseEvent) => {
   z-index: layers.$in-front;
   color: inherit;
   text-decoration: none;
+  outline: none;
+  transition: color 0.3s var(--n-bezier);
+  will-change: color;
 
-  .content {
-    margin: 0;
+  &:focus-visible:not(.has-link) {
+    text-decoration: underline;
+    text-underline-offset: 0.2rem;
   }
-}
 
-.hover-link {
-  transition: color 0.3s var(--n-bezier);
-  will-change: color;
+  .hover-link {
+    transition: color 0.3s var(--n-bezier);
+    will-change: color;
 
-  &:hover {
+    &:active,
+    &:focus-within,
+    &:hover {
+      color: var(--trakt-red);
+    }
+  }
+
+  &:focus-visible.has-link .hover-link {
     color: var(--trakt-red);
   }
+
+  .content {
+    margin: 0;
+  }
 }
 </style>

src/components/common/typography/TextField.vue

@@ -163,6 +163,8 @@ const { openTab } = useLinksStore();
     }
   }
 
+  &:active .prefix,
+  &:focus-within .prefix,
   &:hover .prefix {
     color: var(--white-70);
   }

src/components/container/ContainerComponent.ce.vue

@@ -239,6 +239,8 @@ onBeforeMount(() => addCustomProgressProperty());
   -webkit-backdrop-filter: blur(var(--bg-blur));
   backdrop-filter: blur(var(--bg-blur));
 
+  &:active,
+  &:focus-within,
   &:hover {
     background: var(--custom-bg-color-hover, var(--bg-black-90));
     // stylelint-disable-next-line property-no-vendor-prefix -- necessary for safari

src/components/views/checkin/CheckinComponent.vue

@@ -293,6 +293,8 @@ const onClick = () => {
     &.watching {
       height: 1.75rem;
 
+      &:active,
+      &:focus-within,
       &:hover {
         height: 3rem;
         color: var(--white);

src/components/views/login/LoginCard.vue

@@ -218,6 +218,8 @@ onMounted(() => {
     }
   }
 
+  &:active,
+  &:focus-within,
   &:hover {
     .title:not(&.progress) {
       --color: rgb(99 226 184 / 9%);

src/components/views/panel/PanelButtonProgress.vue

@@ -102,6 +102,8 @@ const percentageLabel = computed(() => {
     filter 0.3s var(--n-bezier),
     --progress 0.3s var(--n-bezier);
 
+  &:active,
+  &:focus-within,
   &:hover {
     filter: brightness(1.2);
   }

src/components/views/panel/PanelOverview.vue

@@ -48,21 +48,6 @@ const { openTab } = useLinksStore();
 <style lang="scss" scoped>
 @use '~/styles/z-index' as layers;
 
-.anchor-link {
-  z-index: layers.$in-front;
-  color: inherit;
-  text-decoration: none;
-}
-
-.hover-link {
-  transition: color 0.3s var(--n-bezier);
-  will-change: color;
-
-  &:hover {
-    color: var(--trakt-red);
-  }
-}
-
 .overview {
   width: 100%;
 

src/components/views/panel/PanelRating.vue

@@ -128,6 +128,16 @@ const _rating = computed(() => (rating?.value ?? 0) * 10);
     margin-top: 0.5rem;
   }
 
+  :deep(.anchor-link .external-link) {
+    padding: 0;
+    border-width: 2px;
+    border-radius: 50%;
+
+    &:focus-visible {
+      border-width: 2px;
+    }
+  }
+
   @media (width <= 725px) {
     padding: 0.5rem 10%;
   }

src/components/views/panel/PanelSelectProgress.vue

@@ -199,6 +199,8 @@ const renderLabel = (option: SelectOption & { icon: Component }) => [
       filter 0.3s var(--n-bezier),
       --progress 0.3s var(--n-bezier);
 
+    &:active,
+    &:focus-within,
     &:hover {
       filter: brightness(1.2);
     }

src/components/views/panel/ShowPanelPicker.vue

@@ -155,8 +155,16 @@ const i18n = useI18n('panel', 'picker');
     font-weight: 600;
     text-decoration: none;
     transition: color 0.3s var(--n-bezier);
+
+    &:focus-visible {
+      text-decoration: underline;
+      outline: none;
+      text-underline-offset: 0.2rem;
+    }
   }
 
+  .row:active,
+  .row:focus-within,
   .row:hover {
     .prefix {
       color: var(--white-70);

src/components/views/settings/SettingsAccount.vue

@@ -362,6 +362,8 @@ onDeactivated(() => {
   margin-bottom: 1.5rem;
   background: var(--bg-black-soft);
 
+  &:active,
+  &:focus-within,
   &:hover {
     --border-color: var(--white-15);
   }
@@ -375,6 +377,8 @@ onDeactivated(() => {
     border-radius: 50%;
     transition: box-shadow 0.5s var(--n-bezier);
 
+    &:active,
+    &:focus-within,
     &:hover {
       box-shadow: var(--image-box-shadow);
     }

src/components/views/settings/SettingsComponent.vue

@@ -107,6 +107,8 @@ onDeactivated(() => {
         :title="i18n(section.title)"
         @mouseenter="onEnter(section)"
         @mouseleave="onLeave(section)"
+        @focusin="onEnter(section)"
+        @focusout="onLeave(section)"
       >
         <component :is="section.component" />
       </NCard>
@@ -135,6 +137,8 @@ onDeactivated(() => {
       margin-bottom: 1rem;
     }
 
+    &:active,
+    &:focus-within,
     &:hover {
       z-index: var(--length);
     }

src/components/views/settings/SettingsFormItem.vue

@@ -69,6 +69,8 @@ defineProps({
     text-align: start;
   }
 
+  &:active,
+  &:focus-within,
   &:hover {
     .from-label {
       color: var(--white-mute);

src/components/views/settings/SettingsLinks.vue

@@ -295,6 +295,8 @@ const containerRef = ref<HTMLDivElement>();
 
   background: var(--bg-black-soft);
 
+  &:active,
+  &:focus-within,
   &:hover {
     --border-color: var(--white-15);
   }

src/styles/mixin.scss

@@ -14,6 +14,7 @@
   will-change: color, background, background-color, backdrop-filter, box-shadow,
     border-color, scale, opacity, backdrop-filter;
 
+  &:active,
   &:hover {
     background: $to;
     // stylelint-disable-next-line property-no-vendor-prefix -- necessary for safari
@@ -29,6 +30,7 @@
 ) {
   background: $from;
 
+  &:active,
   &:hover {
     background: $to;
   }