[refactor] Add title and aria-label to all vault filter buttons

src/app/modules/vault-filter/components/collection-filter.component.html

@@ -4,10 +4,10 @@
       class="no-btn"
       [attr.aria-expanded]="!isCollapsed(collectionsGrouping)"
       (click)="toggleCollapse(collectionsGrouping)"
+      appA11yTitle="{{ 'toggleCollapse' | i18n }}"
     >
       <i
         class="bwi bwi-fw"
-        title="{{ 'toggleCollapse' | i18n }}"
         aria-hidden="true"
         [ngClass]="{
           'bwi-angle-right': isCollapsed(collectionsGrouping),
@@ -30,11 +30,11 @@
             class="toggle-button"
             [attr.aria-expanded]="!isCollapsed(c.node)"
             (click)="toggleCollapse(c.node)"
+            appA11yTitle="{{ 'toggleCollapse' | i18n }}"
           >
             <i
               *ngIf="c.children.length"
               class="bwi bwi-fw"
-              title="{{ 'toggleCollapse' | i18n }}"
               aria-hidden="true"
               [ngClass]="{
                 'bwi-angle-right': isCollapsed(c.node),
@@ -42,7 +42,13 @@
               }"
             ></i>
           </button>
-          <button class="filter-button" appStopClick appBlurClick (click)="applyFilter(c.node)">
+          <button
+            class="filter-button"
+            appStopClick
+            appBlurClick
+            (click)="applyFilter(c.node)"
+            appA11yTitle="{{ 'applyFilter' | i18n }}"
+          >
             <i
               *ngIf="c.children.length === 0"
               class="bwi bwi-fw bwi-collection"

src/app/modules/vault-filter/components/folder-filter.component.html

@@ -6,10 +6,10 @@
       appStopProp
       (click)="toggleCollapse(foldersGrouping)"
       aria-expanded="!isCollapsed(foldersGrouping)"
+      appA11yTitle="{{ 'toggleCollapse' | i18n }}"
     >
       <i
         class="bwi bwi-fw"
-        title="{{ 'toggleCollapse' | i18n }}"
         aria-hidden="true"
         [ngClass]="{
           'bwi-angle-right': isCollapsed(foldersGrouping),
@@ -37,20 +37,28 @@
         class="filter-option"
       >
         <span class="filter-buttons">
-          <button class="toggle-button" *ngIf="f.children.length" (click)="toggleCollapse(f.node)">
+          <button
+            class="toggle-button"
+            *ngIf="f.children.length"
+            (click)="toggleCollapse(f.node)"
+            appA11yTitle="{{ 'toggleCollapse' | i18n }}"
+          >
             <i
               class="bwi bwi-fw"
-              title="{{ 'toggleCollapse' | i18n }}"
               aria-hidden="true"
               [ngClass]="{
                 'bwi-angle-right': isCollapsed(f.node),
                 'bwi-angle-down': !isCollapsed(f.node)
               }"
-              (click)="toggleCollapse(f.node)"
-              appStopProp
             ></i>
           </button>
-          <button class="filter-button" appStopClick appBlurClick (click)="applyFilter(f.node)">
+          <button
+            class="filter-button"
+            appStopClick
+            appBlurClick
+            (click)="applyFilter(f.node)"
+            appA11yTitle="{{ 'applyFilter' | i18n }}"
+          >
             <i *ngIf="f.children.length === 0" class="bwi bwi-fw bwi-folder" aria-hidden="true"></i>
             &nbsp;{{ f.node.name }}
           </button>

src/app/modules/vault-filter/components/organization-filter.component.html

@@ -14,18 +14,25 @@
     </ng-container>
     <ng-container *ngSwitchCase="'personalOwnershipPolicy'">
       <div class="filter-heading" [ngClass]="{ active: !hasActiveFilter }">
-        <i
-          class="bwi bwi-fw"
-          title="{{ 'toggleCollapse' | i18n }}"
-          aria-hidden="true"
-          [ngClass]="{
-            'bwi-angle-right': isCollapsed,
-            'bwi-angle-down': !isCollapsed
-          }"
+        <button
+          class="toggle-button"
+          appA11yTitle="{{ 'toggleCollapse' | i18n }}"
           (click)="toggleCollapse()"
-          appStopProp
-        ></i>
-        <button class="no-btn" (click)="clearFilter()">
+        >
+          <i
+            class="bwi bwi-fw"
+            aria-hidden="true"
+            [ngClass]="{
+              'bwi-angle-right': isCollapsed,
+              'bwi-angle-down': !isCollapsed
+            }"
+          ></i>
+        </button>
+        <button
+          class="no-btn"
+          (click)="clearFilter()"
+          appA11yTitle="{{ 'filterAllVaults' | i18n }}"
+        >
           <h2>&nbsp;{{ organizationGrouping.name | i18n }}</h2>
         </button>
       </div>
@@ -41,6 +48,7 @@
               appStopClick
               appBlurClick
               (click)="applyOrganizationFilter(organization)"
+              appA11yTitle="{{ 'applyFilter' | i18n }}"
             >
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               &nbsp;{{ organization.name }}
@@ -53,7 +61,7 @@
       <ul class="filter-options">
         <li class="filter-option active">
           <span class="filter-buttons">
-            <button class="filter-button">
+            <button class="filter-button" appA11yTitle="{{ 'applyFilter' | i18n }}">
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               &nbsp;{{ organizations[0].name }}
             </button>
@@ -63,25 +71,32 @@
     </ng-container>
     <ng-container *ngSwitchCase="'organizationMember'">
       <div class="filter-heading" [ngClass]="{ active: !hasActiveFilter }">
-        <i
-          class="bwi bwi-fw"
-          title="{{ 'toggleCollapse' | i18n }}"
-          aria-hidden="true"
-          [ngClass]="{
-            'bwi-angle-right': isCollapsed,
-            'bwi-angle-down': !isCollapsed
-          }"
-          (click)="toggleCollapse()"
-          appStopProp
-        ></i>
-        <button class="no-btn" (click)="clearFilter()">
+        <button appA11yTitle="{{ 'toggleCollapse' | i18n }}" (click)="toggleCollapse()">
+          <i
+            class="bwi bwi-fw"
+            aria-hidden="true"
+            [ngClass]="{
+              'bwi-angle-right': isCollapsed,
+              'bwi-angle-down': !isCollapsed
+            }"
+          ></i>
+        </button>
+        <button
+          class="no-btn"
+          (click)="clearFilter()"
+          appA11yTitle="{{ 'filterAllVaults' | i18n }}"
+        >
           <h2>&nbsp;{{ organizationGrouping.name | i18n }}</h2>
         </button>
       </div>
       <ul *ngIf="!isCollapsed" class="filter-options no-margin">
         <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="{{ 'applyFilter' | i18n }}"
+            >
               <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
               &nbsp;{{ "myVault" | i18n }}
             </button>
@@ -98,6 +113,7 @@
               appStopClick
               appBlurClick
               (click)="applyOrganizationFilter(organization)"
+              appA11yTitle="{{ 'applyFilter' | i18n }}"
             >
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               &nbsp;{{ organization.name }}

src/app/modules/vault-filter/components/status-filter.component.html

@@ -3,7 +3,13 @@
   <ul class="filter-options">
     <li class="filter-option" [ngClass]="{ active: activeFilter.status === 'all' }">
       <span class="filter-buttons">
-        <button class="filter-button" appStopClick appBlurClick (click)="applyFilter('all')">
+        <button
+          class="filter-button"
+          appStopClick
+          appBlurClick
+          (click)="applyFilter('all')"
+          appA11yTitle="{{ 'applyFilter' | i18n }}"
+        >
           <i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>&nbsp;{{ "allItems" | i18n }}
         </button>
       </span>
@@ -14,7 +20,13 @@
       [ngClass]="{ active: activeFilter.status === 'favorites' }"
     >
       <span class="filter-buttons">
-        <button class="filter-button" appStopClick appBlurClick (click)="applyFilter('favorites')">
+        <button
+          class="filter-button"
+          appStopClick
+          appBlurClick
+          (click)="applyFilter('favorites')"
+          appA11yTitle="{{ 'applyFilter' | i18n }}"
+        >
           <i class="bwi bwi-fw bwi-star" aria-hidden="true"></i>&nbsp;{{ "favorites" | i18n }}
         </button>
       </span>
@@ -25,7 +37,13 @@
       [ngClass]="{ active: activeFilter.status === 'trash' }"
     >
       <span class="filter-buttons">
-        <button class="filter-button" appStopClick appBlurClick (click)="applyFilter('trash')">
+        <button
+          class="filter-button"
+          appStopClick
+          appBlurClick
+          (click)="applyFilter('trash')"
+          appA11yTitle="{{ 'applyFilter' | i18n }}"
+        >
           <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>&nbsp;{{ "trash" | i18n }}
         </button>
       </span>

src/app/modules/vault-filter/components/type-filter.component.html

@@ -1,8 +1,13 @@
 <div class="filter-heading">
-  <button class="no-btn" (click)="toggleCollapse()" appStopProp aria-expanded="!isCollapsed">
+  <button
+    class="no-btn"
+    (click)="toggleCollapse()"
+    appStopProp
+    aria-expanded="!isCollapsed"
+    appA11yTitle="{{ 'toggleCollapse' | i18n }}"
+  >
     <i
       class="bwi bwi-fw"
-      title="{{ 'toggleCollapse' | i18n }}"
       aria-hidden="true"
       [ngClass]="{
         'bwi-angle-right': isCollapsed,
@@ -23,6 +28,7 @@
         appStopClick
         appBlurClick
         (click)="applyFilter(cipherTypeEnum.Login)"
+        appA11yTitle="{{ 'applyFilter' | i18n }}"
       >
         <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>&nbsp;{{ "typeLogin" | i18n }}
       </button>
@@ -35,6 +41,7 @@
         appStopClick
         appBlurClick
         (click)="applyFilter(cipherTypeEnum.Card)"
+        appA11yTitle="{{ 'applyFilter' | i18n }}"
       >
         <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>&nbsp;{{ "typeCard" | i18n }}
       </button>
@@ -50,6 +57,7 @@
         appStopClick
         appBlurClick
         (click)="applyFilter(cipherTypeEnum.Identity)"
+        appA11yTitle="{{ 'applyFilter' | i18n }}"
       >
         <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>&nbsp;{{ "typeIdentity" | i18n }}
       </button>
@@ -65,6 +73,7 @@
         appStopClick
         appBlurClick
         (click)="applyFilter(cipherTypeEnum.SecureNote)"
+        appA11yTitle="{{ 'applyFilter' | i18n }}"
       >
         <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>&nbsp;{{
           "typeSecureNote" | i18n

src/locales/en/messages.json

@@ -1892,5 +1892,13 @@
   },
   "searchMyVault": {
     "message": "Search My Vault"
+  },
+  "applyFilter": {
+    "message": "Apply Filter",
+    "description": "Applying a filter to a list of vault items"
+  },
+  "filterAllVaults": {
+    "message": "Clear any active organization filter",
+    "description": "Applying a filter to a list of vault items"
   }
 }