[PS-1181] Desktop: Accessibility - ARIA/structure fixes (#2689)

* Fix incorrect h2/button nesting, wrap expand/collapse controls around their text and remove unnecessary `appA11yTitle`s, expand `appA11yTitle` where needed to give more context, fix broken `aria-pressed` attributes, tweak styling

* Remove orphaned jslibs

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

@@ -1,11 +1,11 @@
 <ng-container *ngIf="show">
   <div class="filter-heading">
+    <h2>
       <button
         class="no-btn"
         [attr.aria-expanded]="!isCollapsed(collectionsGrouping)"
         aria-controls="collection-filters"
         (click)="toggleCollapse(collectionsGrouping)"
-      appA11yTitle="{{ 'toggleCollapse' | i18n }}"
       >
         <i
           class="bwi bwi-fw"
@@ -15,8 +15,9 @@
             'bwi-angle-down': !isCollapsed(collectionsGrouping)
           }"
         ></i>
+        &nbsp;{{ collectionsGrouping.name | i18n }}
       </button>
-    <h2>&nbsp;{{ collectionsGrouping.name | i18n }}</h2>
+    </h2>
   </div>
   <ul id="collection-filters" *ngIf="!isCollapsed(collectionsGrouping)" class="filter-options">
     <ng-template #recursiveCollections let-collections>
@@ -32,7 +33,7 @@
             [attr.aria-expanded]="!isCollapsed(c.node)"
             [attr.aria-controls]="c.node.name + '_children'"
             (click)="toggleCollapse(c.node)"
-            appA11yTitle="{{ 'toggleCollapse' | i18n }}"
+            appA11yTitle="{{ 'toggleCollapse' | i18n }} {{ c.node.name }}"
           >
             <i
               class="bwi bwi-fw"

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

@@ -1,11 +1,11 @@
 <ng-container *ngIf="!hide">
   <div class="filter-heading">
+    <h2>
       <button
         class="toggle-button"
         [attr.aria-expanded]="!isCollapsed(foldersGrouping)"
         aria-controls="folder-filters"
         (click)="toggleCollapse(foldersGrouping)"
-      appA11yTitle="{{ 'toggleCollapse' | i18n }}"
       >
         <i
           class="bwi bwi-fw"
@@ -15,8 +15,9 @@
             'bwi-angle-down': !isCollapsed(foldersGrouping)
           }"
         ></i>
+        &nbsp;{{ foldersGrouping.name | i18n }}
       </button>
-    <h2>&nbsp;{{ foldersGrouping.name | i18n }}</h2>
+    </h2>
     <button class="add-button" (click)="addFolder()" appA11yTitle="{{ 'addFolder' | i18n }}">
       <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
     </button>
@@ -35,7 +36,7 @@
             class="toggle-button"
             *ngIf="f.children.length"
             (click)="toggleCollapse(f.node)"
-            appA11yTitle="{{ 'toggleCollapse' | i18n }}"
+            appA11yTitle="{{ 'toggleCollapse' | i18n }} {{ f.node.name }}"
             [attr.aria-expanded]="!isCollapsed(f.node)"
             [attr.aria-controls]="f.node.name + '_children'"
           >

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

@@ -4,7 +4,7 @@
       <div class="filter-heading" [ngClass]="{ active: !hasActiveFilter }">
         <button
           class="toggle-button"
-          appA11yTitle="{{ 'toggleCollapse' | i18n }}"
+          appA11yTitle="{{ 'toggleCollapse' | i18n }} {{ organizationGrouping.name | i18n }}"
           (click)="toggleCollapse()"
           [attr.aria-expanded]="!isCollapsed"
           aria-controls="organization-filters"
@@ -18,13 +18,16 @@
             }"
           ></i>
         </button>
+        &nbsp;
+        <h2>
           <button
             class="filter-button"
             (click)="clearFilter()"
             [attr.aria-pressed]="!hasActiveFilter"
           >
-          <h2>&nbsp;{{ organizationGrouping.name | i18n }}</h2>
+            {{ organizationGrouping.name | i18n }}
           </button>
+        </h2>
       </div>
       <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options no-margin">
         <li
@@ -48,7 +51,7 @@
     <ng-container *ngSwitchDefault>
       <div class="filter-heading" [ngClass]="{ active: !hasActiveFilter }">
         <button
-          appA11yTitle="{{ 'toggleCollapse' | i18n }}"
+          appA11yTitle="{{ 'toggleCollapse' | i18n }} {{ organizationGrouping.name | i18n }}"
           (click)="toggleCollapse()"
           [attr.aria-expanded]="!isCollapsed"
           aria-controls="organization-filters"
@@ -62,9 +65,16 @@
             }"
           ></i>
         </button>
-        <button class="filter-button" (click)="clearFilter()">
-          <h2>&nbsp;{{ organizationGrouping.name | i18n }}</h2>
+        &nbsp;
+        <h2>
+          <button
+            class="filter-button"
+            (click)="clearFilter()"
+            [attr.aria-pressed]="!hasActiveFilter"
+          >
+            {{ organizationGrouping.name | i18n }}
           </button>
+        </h2>
       </div>
       <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options no-margin">
         <li class="filter-option" [ngClass]="{ active: activeFilter.myVaultOnly }">

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

@@ -1,10 +1,10 @@
 <div class="filter-heading">
+  <h2>
     <button
       class="no-btn"
       (click)="toggleCollapse()"
-    aria-expanded="!isCollapsed"
+      [attr.aria-expanded]="!isCollapsed"
       aria-controls="type-filters"
-    appA11yTitle="{{ 'toggleCollapse' | i18n }}"
     >
       <i
         class="bwi bwi-fw"
@@ -14,8 +14,9 @@
           'bwi-angle-down': !isCollapsed
         }"
       ></i>
+      &nbsp;{{ typesNode.name | i18n }}
     </button>
-  <h2>&nbsp;{{ typesNode.name | i18n }}</h2>
+  </h2>
 </div>
 <ul id="type-filters" *ngIf="!isCollapsed" class="filter-options">
   <li
@@ -26,7 +27,7 @@
       <button
         class="filter-button"
         (click)="applyFilter(cipherTypeEnum.Login)"
-        [attr.aria-pressed]="activeFilter.selectedType === cipherTypeEnum.Login"
+        [attr.aria-pressed]="activeFilter.cipherType === cipherTypeEnum.Login"
       >
         <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>&nbsp;{{ "typeLogin" | i18n }}
       </button>
@@ -37,7 +38,7 @@
       <button
         class="filter-button"
         (click)="applyFilter(cipherTypeEnum.Card)"
-        [attr.aria-pressed]="activeFilter.selectedType === cipherTypeEnum.Card"
+        [attr.aria-pressed]="activeFilter.cipherType === cipherTypeEnum.Card"
       >
         <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>&nbsp;{{ "typeCard" | i18n }}
       </button>
@@ -51,7 +52,7 @@
       <button
         class="filter-button"
         (click)="applyFilter(cipherTypeEnum.Identity)"
-        [attr.aria-pressed]="activeFilter.selectedType === cipherTypeEnum.Identity"
+        [attr.aria-pressed]="activeFilter.cipherType === cipherTypeEnum.Identity"
       >
         <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>&nbsp;{{ "typeIdentity" | i18n }}
       </button>
@@ -65,7 +66,7 @@
       <button
         class="filter-button"
         (click)="applyFilter(cipherTypeEnum.SecureNote)"
-        [attr.aria-pressed]="activeFilter.selectedType === cipherTypeEnum.SecureNote"
+        [attr.aria-pressed]="activeFilter.cipherType === cipherTypeEnum.SecureNote"
       >
         <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>&nbsp;{{
           "typeSecureNote" | i18n

apps/desktop/src/app/send/send.component.html

@@ -6,7 +6,11 @@
         <ul class="filter-options">
           <li class="filter-option" [ngClass]="{ active: selectedAll }">
             <span class="filter-buttons">
-              <button class="filter-button" (click)="selectAll()" [attr.aria-pressed]="selectedAll">
+              <button
+                class="filter-button"
+                (click)="selectAll()"
+                [attr.aria-pressed]="selectedAll === true"
+              >
                 <i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>&nbsp;{{
                   "allSends" | i18n
                 }}

apps/desktop/src/scss/left-nav.scss

@@ -72,24 +72,21 @@
 
   &.active {
     .filter-button {
-      h2 {
+      font-weight: bold;
       @include themify($themes) {
         color: themed("primaryColor");
       }
     }
   }
-  }
 
   .filter-button {
     &:hover {
-      h2 {
       @include themify($themes) {
         color: themed("primaryColor");
       }
     }
   }
 }
-}
 
 .filter-options {
   word-break: break-all;