[PS-1111] Added prefix "Vault:" for accessibility on vault selector items (#3188)

* PS-1111 Added prefix "Vault:" for accessibility to vault selector items

* improved html readability

* PS-1111 Added more screen reader accessibility data to the Vault selector on Desktop and Web clients

* PS-1111 removed duplicated aria-label

* PS-1111 Removed unnecessary aria-label attribute

* PS-1111 Changed browser vault item accessibility title from span to button

apps/browser/src/popup/vault/vault-select.component.html

@@ -28,11 +28,17 @@
         appStopClick
         (click)="selectAllVaults()"
         [ngClass]="{ active: !myVaultOnly && !selectOrganizationId }"
+        appA11yTitle="{{ 'vault' | i18n }}: {{ 'allVaults' | i18n }}"
       >
         <i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>
         &nbsp;{{ "allVaults" | i18n }}
       </button>
-      <button *ngIf="!enforcePersonalOwnwership" appStopClick (click)="selectMyVault()">
+      <button
+        *ngIf="!enforcePersonalOwnwership"
+        appStopClick
+        (click)="selectMyVault()"
+        appA11yTitle="{{ 'vault' | i18n }}: {{ 'myVault' | i18n }}"
+      >
         <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
         &nbsp;{{ "myVault" | i18n }}
       </button>
@@ -40,6 +46,7 @@
         *ngFor="let organization of organizations"
         appStopClick
         (click)="selectOrganization(organization)"
+        appA11yTitle="{{ 'vault' | i18n }}: {{ organization.name }}"
       >
         <i
           *ngIf="organization.planProductType !== 1"

apps/desktop/src/app/vault/vault-filter/filters/organization-filter.component.html

@@ -24,6 +24,7 @@
             class="filter-button"
             (click)="clearFilter()"
             [attr.aria-pressed]="!hasActiveFilter"
+            appA11yTitle="{{ 'vault' | i18n }}: {{ organizationGrouping.name }}"
           >
             {{ organizationGrouping.name | i18n }}
           </button>
@@ -40,6 +41,7 @@
               class="filter-button"
               (click)="applyOrganizationFilter(organization)"
               [attr.aria-pressed]="activeFilter.myVaultOnly"
+              appA11yTitle="{{ 'vault' | i18n }}: {{ organization.name }}"
             >
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               &nbsp;{{ organization.name }}
@@ -71,6 +73,7 @@
             class="filter-button"
             (click)="clearFilter()"
             [attr.aria-pressed]="!hasActiveFilter"
+            appA11yTitle="{{ 'vault' | i18n }}: {{ organizationGrouping.name }}"
           >
             {{ organizationGrouping.name | i18n }}
           </button>
@@ -83,6 +86,7 @@
               class="filter-button"
               (click)="applyMyVaultFilter()"
               [attr.aria-pressed]="activeFilter.myVaultOnly"
+              appA11yTitle="{{ 'vault' | i18n }}: {{ 'myVault' | i18n }}"
             >
               <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
               &nbsp;{{ "myVault" | i18n }}
@@ -98,6 +102,7 @@
             <button
               class="filter-button"
               (click)="applyOrganizationFilter(organization)"
+              appA11yTitle="{{ 'vault' | i18n }}: {{ organization.name }}"
               [attr.aria-pressed]="activeFilter.selectedOrganizationId === organization.id"
             >
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>

apps/desktop/src/locales/en/messages.json

@@ -1993,5 +1993,8 @@
   },
   "cardBrandMir": {
     "message": "Mir"
+  }, 
+  "vault": {
+    "message": "Vault"
   }
 }

apps/web/src/app/vault/vault-filter/organization-filter/organization-filter.component.html

@@ -4,7 +4,11 @@
       <ul class="filter-options">
         <li class="filter-option active">
           <span class="filter-buttons">
-            <button class="filter-button">
+            <button
+              class="filter-button"
+              [attr.aria-pressed]="activeFilter.myVaultOnly"
+              appA11yTitle="{{ 'vault' | i18n }}: {{ 'myVault' | i18n }}"
+            >
               <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
               {{ "myVault" | i18n }}
             </button>
@@ -42,6 +46,7 @@
           class="filter-button"
           (click)="clearFilter()"
           [ngClass]="{ active: !hasActiveFilter }"
+          appA11yTitle="{{ 'vault' | i18n }}: {{ organizationGrouping.name | i18n }}"
         >
           &nbsp;{{ organizationGrouping.name | i18n }}
         </button>
@@ -53,7 +58,12 @@
           [ngClass]="{ active: organization.id === activeFilter.selectedOrganizationId }"
         >
           <span class="filter-buttons">
-            <button class="filter-button" (click)="applyOrganizationFilter(organization)">
+            <button
+              class="filter-button"
+              (click)="applyOrganizationFilter(organization)"
+              [attr.aria-pressed]="activeFilter.selectedOrganizationId === organization.id"
+              appA11yTitle="{{ 'vault' | i18n }}: {{ organization.name }}"
+            >
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               {{ organization.name }}
             </button>
@@ -79,7 +89,11 @@
     </ng-container>
     <ng-container *ngSwitchCase="'singleOrganizationAndPersonalOwnershipPolicies'">
       <div class="filter-heading">
-        <button class="filter-button active">
+        <button
+          class="filter-button active"
+          [attr.aria-pressed]="activeFilter.selectedOrganizationId === organizations[0].id"
+          appA11yTitle="{{ 'vault' | i18n }}: {{ organizations[0].name }}"
+        >
           <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
           {{ organizations[0].name }}
         </button>
@@ -107,6 +121,7 @@
           class="filter-button"
           (click)="clearFilter()"
           [ngClass]="{ active: !hasActiveFilter }"
+          appA11yTitle="{{ 'vault' | i18n }}: {{ organizationGrouping.name | i18n }}"
         >
           &nbsp;{{ organizationGrouping.name | i18n }}
         </button>
@@ -114,7 +129,12 @@
       <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options">
         <li class="filter-option" [ngClass]="{ active: activeFilter.myVaultOnly }">
           <span class="filter-buttons">
-            <button class="filter-button" (click)="applyMyVaultFilter()">
+            <button
+              class="filter-button"
+              (click)="applyMyVaultFilter()"
+              appA11yTitle="{{ 'vault' | i18n }}: {{ 'myVault' | i18n }}"
+              [attr.aria-pressed]="activeFilter.myVaultOnly"
+            >
               <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
               {{ "myVault" | i18n }}
             </button>
@@ -130,6 +150,7 @@
               class="filter-button"
               [ngClass]="{ 'disabled-organization': !organization.enabled }"
               (click)="applyOrganizationFilter(organization)"
+              appA11yTitle="{{ 'vault' | i18n }}: {{ organization.name }}"
             >
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               {{ organization.name }}