Fix Skip to Main Content Button

src/app/components/level-card/level-card.html

@@ -13,10 +13,10 @@
 </section>
 
 <section class="buttons">
-  <button>
+  <button [aria-label]="translation.common.preview">
     <div class="material-symbols-outlined icon-40 button-icon">play_arrow</div>
   </button>
-  <button>
+  <button [aria-label]="translation.common.download">
     <div class="material-symbols-outlined icon-40 button-icon">download</div>
   </button>
 </section>

src/app/components/level-card/level-card.scss

@@ -21,14 +21,17 @@ $default_animation_duration: 0.2s;
   outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 2px solid;
   overflow: hidden;
 
+  &:focus-visible {
+    outline-offset: 0;
+    outline: 2px solid var(--selection-outline-color);
+  }
+
   section.information {
     width: calc(100% - 64px);
     padding: 12px;
     box-sizing: border-box;
     flex-shrink: 0;
 
-    border-radius: 8px;
-
     z-index: 1;
     background-color: light-dark(white, black);
 
@@ -103,7 +106,7 @@ $default_animation_duration: 0.2s;
     flex-shrink: 0;
 
     flex-grow: 1;
-    margin-left: -80px;
+    margin-left: 0;
 
     button {
       display: flex;
@@ -127,12 +130,24 @@ $default_animation_duration: 0.2s;
         --hover-state: 1;
       }
 
+      &:focus-visible {
+        outline-offset: -2px;
+      }
+
       div.button-icon {
         width: 40px;
         height: 40px;
         margin-right: 12px;
         user-select: none;
       }
+
+      &:first-child {
+        border-top-right-radius: 8px;
+      }
+
+      &:last-child {
+        border-bottom-right-radius: 8px;
+      }
     }
   }
 }

src/app/components/level-card/level-card.ts

@@ -1,15 +1,21 @@
-import { Component, computed, input } from '@angular/core';
+import { Component, computed, inject, input } from '@angular/core';
+import { TranslationService } from '../../services/translation.service';
 
 @Component({
   selector: 'level-card',
   imports: [],
   templateUrl: './level-card.html',
   styleUrl: './level-card.scss',
+  host: {
+    tabindex: '0',
+  },
 })
 export class LevelCard {
-  artist = input.required<string>()
-  trackName = input.required<string>()
+  protected translation = inject(TranslationService).translation;
+
+  artist = input.required<string>();
+  trackName = input.required<string>();
   creator = input<string[]>([]);
 
-  creatorString = computed(() => this.creator().join(" & "));
+  creatorString = computed(() => this.creator().join(' & '));
 }

src/app/components/skip-links/skip-links.scss

@@ -30,11 +30,19 @@ $default_animation_duration: 0.4s;
     outline: 2px solid var(--selection-outline-color);
   }
 
-  ::ng-deep a {
+  ::ng-deep * {
+    appearance: none;
     color: light-dark(black, white);
     text-decoration: none;
+    background: none;
+    font: inherit;
 
+    border: none;
     outline: none;
+    min-width: unset;
+    min-height: unset;
+    padding: 0;
+    margin: 0;
     width: 0;
 
     opacity: 0;