[CL-475] Use buttons instead of anchors for popup tab navigation (#11643

)
bitwarden · Oct 29, 2024 · b391c29 · b391c29
1 parent 021efa2
commit b391c29
Showing 1 changed file with 31 additions and 25 deletions.
diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
@@ -3,30 +3,36 @@
 </div>
 <footer class="tw-bg-background tw-border-0 tw-border-t tw-border-secondary-300 tw-border-solid">
   <div class="tw-max-w-screen-sm tw-mx-auto">
-    <div class="tw-flex tw-flex-1">
-      <a
-        *ngFor="let button of navButtons"
-        class="tw-flex-1 tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-500"
-        [ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
-        [title]="button.label"
-        [routerLink]="button.page"
-        routerLinkActive
-        #rla="routerLinkActive"
-        ariaCurrentWhenActive="page"
-      >
-        <i *ngIf="!rla.isActive" class="bwi bwi-lg bwi-{{ button.iconKey }}" aria-hidden="true"></i>
-        <i
-          *ngIf="rla.isActive"
-          class="bwi bwi-lg bwi-{{ button.iconKeyActive }}"
-          aria-hidden="true"
-        ></i>
-        <span
-          class="tw-truncate tw-max-w-full"
-          [ngClass]="!rla.isActive && 'group-hover:tw-underline'"
-        >
-          {{ button.label }}
-        </span>
-      </a>
-    </div>
+    <nav>
+      <ul class="tw-flex tw-flex-1 tw-mb-0 tw-p-0">
+        <li *ngFor="let button of navButtons" class="tw-flex-1 tw-list-none">
+          <button
+            class="tw-w-full tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-bg-transparent tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
+            [ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
+            [title]="button.label"
+            [routerLink]="button.page"
+            routerLinkActive
+            #rla="routerLinkActive"
+            ariaCurrentWhenActive="page"
+            type="button"
+            role="link"
+          >
+            <i
+              *ngIf="!rla.isActive"
+              class="bwi bwi-lg bwi-{{ button.iconKey }}"
+              aria-hidden="true"
+            ></i>
+            <i
+              *ngIf="rla.isActive"
+              class="bwi bwi-lg bwi-{{ button.iconKeyActive }}"
+              aria-hidden="true"
+            ></i>
+            <span class="tw-truncate tw-max-w-full">
+              {{ button.label }}
+            </span>
+          </button>
+        </li>
+      </ul>
+    </nav>
   </div>
 </footer>