From 82f86419261e27002bfe344e2ec086468d0ff110 Mon Sep 17 00:00:00 2001
From: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Date: Thu, 20 Jun 2024 14:21:22 -0500
Subject: [PATCH] [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    |  3 +
 .../vault-list-filters.component.html         | 74 ++++++++++---------
 .../components/vault/vault-v2.component.html  | 21 ++++--
 3 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 4d786ddcbb..7a0c059a5c 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/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"
   }
 }
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.html
index afb7dd4006..32427ac2da 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.html
@@ -1,39 +1,41 @@
-<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">
+<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"
+        formControlName="organization"
+        placeholderIcon="bwi-vault"
+        [placeholderText]="'vault' | i18n"
+        [options]="organizations"
+      >
+      </bit-chip-select>
+    </ng-container>
+    <ng-container *ngIf="collections$ | async as collections">
+      <bit-chip-select
+        *ngIf="collections.length"
+        formControlName="collection"
+        placeholderIcon="bwi-collection"
+        [placeholderText]="'collection' | i18n"
+        [options]="collections"
+      >
+      </bit-chip-select>
+    </ng-container>
+    <ng-container *ngIf="folders$ | async as folders">
+      <bit-chip-select
+        *ngIf="folders.length"
+        placeholderIcon="bwi-folder"
+        formControlName="folder"
+        [placeholderText]="'folder' | i18n"
+        [options]="folders"
+      >
+      </bit-chip-select>
+    </ng-container>
     <bit-chip-select
-      *ngIf="organizations.length"
-      formControlName="organization"
-      placeholderIcon="bwi-vault"
-      [placeholderText]="'vault' | i18n"
-      [options]="organizations"
+      formControlName="cipherType"
+      placeholderIcon="bwi-list"
+      [placeholderText]="'type' | i18n"
+      [options]="cipherTypes"
     >
     </bit-chip-select>
-  </ng-container>
-  <ng-container *ngIf="collections$ | async as collections">
-    <bit-chip-select
-      *ngIf="collections.length"
-      formControlName="collection"
-      placeholderIcon="bwi-collection"
-      [placeholderText]="'collection' | i18n"
-      [options]="collections"
-    >
-    </bit-chip-select>
-  </ng-container>
-  <ng-container *ngIf="folders$ | async as folders">
-    <bit-chip-select
-      *ngIf="folders.length"
-      placeholderIcon="bwi-folder"
-      formControlName="folder"
-      [placeholderText]="'folder' | i18n"
-      [options]="folders"
-    >
-    </bit-chip-select>
-  </ng-container>
-  <bit-chip-select
-    formControlName="cipherType"
-    placeholderIcon="bwi-list"
-    [placeholderText]="'type' | i18n"
-    [options]="cipherTypes"
-  >
-  </bit-chip-select>
-</form>
+  </form>
+</div>
diff --git a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
index 7dd0631015..b97fa38eea 100644
--- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
@@ -33,14 +33,19 @@
       </bit-no-items>
     </div>
 
-    <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="description">{{ "contactYourOrgAdmin" | i18n }}</ng-container>
-      </bit-no-items>
+    <!-- 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="description">{{ "contactYourOrgAdmin" | i18n }}</ng-container>
+        </bit-no-items>
+      </div>
     </div>
 
     <ng-container *ngIf="vaultState === null">