Merge branch 'main' into ps/extension-refresh

apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html

@@ -3,27 +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-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-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"
-      >
-        <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>
-      </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>

libs/common/src/platform/abstractions/sdk/sdk.service.ts

@@ -20,6 +20,11 @@ export abstract class SdkService {
    * Retrieve a client initialized for a specific user.
    * This client can be used for operations that require a user context, such as retrieving ciphers
    * and operations involving crypto. It can also be used for operations that don't require a user context.
+   *
+   * **WARNING:** Do not use `firstValueFrom(userClient$)`! Any operations on the client must be done within the observable.
+   * The client will be destroyed when the observable is no longer subscribed to.
+   * Please let platform know if you need a client that is not destroyed when the observable is no longer subscribed to.
+   *
    * @param userId
    */
   abstract userClient$(userId: UserId): Observable<BitwardenClient>;