[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,22 +1,23 @@
 <ng-container *ngIf="show">
   <div class="filter-heading">
-    <button
-      class="no-btn"
-      [attr.aria-expanded]="!isCollapsed(collectionsGrouping)"
-      aria-controls="collection-filters"
-      (click)="toggleCollapse(collectionsGrouping)"
-      appA11yTitle="{{ 'toggleCollapse' | i18n }}"
-    >
-      <i
-        class="bwi bwi-fw"
-        aria-hidden="true"
-        [ngClass]="{
-          'bwi-angle-right': isCollapsed(collectionsGrouping),
-          'bwi-angle-down': !isCollapsed(collectionsGrouping)
-        }"
-      ></i>
-    </button>
-    <h2>&nbsp;{{ collectionsGrouping.name | i18n }}</h2>
+    <h2>
+      <button
+        class="no-btn"
+        [attr.aria-expanded]="!isCollapsed(collectionsGrouping)"
+        aria-controls="collection-filters"
+        (click)="toggleCollapse(collectionsGrouping)"
+      >
+        <i
+          class="bwi bwi-fw"
+          aria-hidden="true"
+          [ngClass]="{
+            'bwi-angle-right': isCollapsed(collectionsGrouping),
+            'bwi-angle-down': !isCollapsed(collectionsGrouping)
+          }"
+        ></i>
+        &nbsp;{{ collectionsGrouping.name | i18n }}
+      </button>
+    </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,22 +1,23 @@
 <ng-container *ngIf="!hide">
   <div class="filter-heading">
-    <button
-      class="toggle-button"
-      [attr.aria-expanded]="!isCollapsed(foldersGrouping)"
-      aria-controls="folder-filters"
-      (click)="toggleCollapse(foldersGrouping)"
-      appA11yTitle="{{ 'toggleCollapse' | i18n }}"
-    >
-      <i
-        class="bwi bwi-fw"
-        aria-hidden="true"
-        [ngClass]="{
-          'bwi-angle-right': isCollapsed(foldersGrouping),
-          'bwi-angle-down': !isCollapsed(foldersGrouping)
-        }"
-      ></i>
-    </button>
-    <h2>&nbsp;{{ foldersGrouping.name | i18n }}</h2>
+    <h2>
+      <button
+        class="toggle-button"
+        [attr.aria-expanded]="!isCollapsed(foldersGrouping)"
+        aria-controls="folder-filters"
+        (click)="toggleCollapse(foldersGrouping)"
+      >
+        <i
+          class="bwi bwi-fw"
+          aria-hidden="true"
+          [ngClass]="{
+            'bwi-angle-right': isCollapsed(foldersGrouping),
+            'bwi-angle-down': !isCollapsed(foldersGrouping)
+          }"
+        ></i>
+        &nbsp;{{ foldersGrouping.name | i18n }}
+      </button>
+    </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>
-        <button
-          class="filter-button"
-          (click)="clearFilter()"
-          [attr.aria-pressed]="!hasActiveFilter"
-        >
-          <h2>&nbsp;{{ organizationGrouping.name | i18n }}</h2>
-        </button>
+        &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
@@ -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>
-        </button>
+        &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,21 +1,22 @@
 <div class="filter-heading">
-  <button
-    class="no-btn"
-    (click)="toggleCollapse()"
-    aria-expanded="!isCollapsed"
-    aria-controls="type-filters"
-    appA11yTitle="{{ 'toggleCollapse' | i18n }}"
-  >
-    <i
-      class="bwi bwi-fw"
-      aria-hidden="true"
-      [ngClass]="{
-        'bwi-angle-right': isCollapsed,
-        'bwi-angle-down': !isCollapsed
-      }"
-    ></i>
-  </button>
-  <h2>&nbsp;{{ typesNode.name | i18n }}</h2>
+  <h2>
+    <button
+      class="no-btn"
+      (click)="toggleCollapse()"
+      [attr.aria-expanded]="!isCollapsed"
+      aria-controls="type-filters"
+    >
+      <i
+        class="bwi bwi-fw"
+        aria-hidden="true"
+        [ngClass]="{
+          'bwi-angle-right': isCollapsed,
+          'bwi-angle-down': !isCollapsed
+        }"
+      ></i>
+      &nbsp;{{ typesNode.name | i18n }}
+    </button>
+  </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,20 +72,17 @@
 
   &.active {
     .filter-button {
-      h2 {
-        @include themify($themes) {
-          color: themed("primaryColor");
-        }
+      font-weight: bold;
+      @include themify($themes) {
+        color: themed("primaryColor");
       }
     }
   }
 
   .filter-button {
     &:hover {
-      h2 {
-        @include themify($themes) {
-          color: themed("primaryColor");
-        }
+      @include themify($themes) {
+        color: themed("primaryColor");
       }
     }
   }