[PM-8615] Filters Accessibility tweaks (#9538)

* wrap filters in a role="toolbar" & add aria label

* announce deactivated org message when presented to the user

apps/browser/src/_locales/en/messages.json

@@ -3494,5 +3494,8 @@
   },
   "contactYourOrgAdmin": {
     "message": "Items in deactivated organizations cannot be accessed. Contact your organization owner for assistance."
+  },
+  "filters": {
+    "message": "Filters"
   }
 }

apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.html

@@ -1,4 +1,5 @@
-<form [formGroup]="filterForm" class="tw-flex tw-flex-wrap tw-gap-2 tw-mb-6 tw-mt-2">
+<div role="toolbar" [ariaLabel]="'filters' | i18n">
+  <form [formGroup]="filterForm" class="tw-flex tw-flex-wrap tw-gap-2 tw-mb-6 tw-mt-2">
     <ng-container *ngIf="organizations$ | async as organizations">
       <bit-chip-select
         *ngIf="organizations.length"
@@ -36,4 +37,5 @@
       [options]="cipherTypes"
     >
     </bit-chip-select>
-</form>
+  </form>
+</div>

apps/browser/src/vault/popup/components/vault/vault-v2.component.html

@@ -33,15 +33,20 @@
       </bit-no-items>
     </div>
 
+    <!-- For better consistency with screen readers, the role/aria needs to be on an element that isn't dynamic by *ngIf -->
+    <div role="status" aria-live="polite">
       <div
         *ngIf="vaultState === VaultStateEnum.DeactivatedOrg"
         class="tw-flex tw-flex-col tw-justify-center tw-h-auto tw-pt-12"
       >
         <bit-no-items [icon]="deactivatedIcon">
-        <ng-container slot="title">{{ "organizationIsDeactivated" | i18n }}</ng-container>
+          <ng-container slot="title">
+            {{ "organizationIsDeactivated" | i18n }}
+          </ng-container>
           <ng-container slot="description">{{ "contactYourOrgAdmin" | i18n }}</ng-container>
         </bit-no-items>
       </div>
+    </div>
 
     <ng-container *ngIf="vaultState === null">
       <app-autofill-vault-list-items></app-autofill-vault-list-items>