mirror of
https://github.com/bitwarden/browser.git
synced 2024-12-22 16:29:09 +01:00
[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
This commit is contained in:
parent
12bca0a597
commit
76b1798e23
@ -1,11 +1,11 @@
|
|||||||
<ng-container *ngIf="show">
|
<ng-container *ngIf="show">
|
||||||
<div class="filter-heading">
|
<div class="filter-heading">
|
||||||
|
<h2>
|
||||||
<button
|
<button
|
||||||
class="no-btn"
|
class="no-btn"
|
||||||
[attr.aria-expanded]="!isCollapsed(collectionsGrouping)"
|
[attr.aria-expanded]="!isCollapsed(collectionsGrouping)"
|
||||||
aria-controls="collection-filters"
|
aria-controls="collection-filters"
|
||||||
(click)="toggleCollapse(collectionsGrouping)"
|
(click)="toggleCollapse(collectionsGrouping)"
|
||||||
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
class="bwi bwi-fw"
|
class="bwi bwi-fw"
|
||||||
@ -15,8 +15,9 @@
|
|||||||
'bwi-angle-down': !isCollapsed(collectionsGrouping)
|
'bwi-angle-down': !isCollapsed(collectionsGrouping)
|
||||||
}"
|
}"
|
||||||
></i>
|
></i>
|
||||||
|
{{ collectionsGrouping.name | i18n }}
|
||||||
</button>
|
</button>
|
||||||
<h2> {{ collectionsGrouping.name | i18n }}</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<ul id="collection-filters" *ngIf="!isCollapsed(collectionsGrouping)" class="filter-options">
|
<ul id="collection-filters" *ngIf="!isCollapsed(collectionsGrouping)" class="filter-options">
|
||||||
<ng-template #recursiveCollections let-collections>
|
<ng-template #recursiveCollections let-collections>
|
||||||
@ -32,7 +33,7 @@
|
|||||||
[attr.aria-expanded]="!isCollapsed(c.node)"
|
[attr.aria-expanded]="!isCollapsed(c.node)"
|
||||||
[attr.aria-controls]="c.node.name + '_children'"
|
[attr.aria-controls]="c.node.name + '_children'"
|
||||||
(click)="toggleCollapse(c.node)"
|
(click)="toggleCollapse(c.node)"
|
||||||
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
appA11yTitle="{{ 'toggleCollapse' | i18n }} {{ c.node.name }}"
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
class="bwi bwi-fw"
|
class="bwi bwi-fw"
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
<ng-container *ngIf="!hide">
|
<ng-container *ngIf="!hide">
|
||||||
<div class="filter-heading">
|
<div class="filter-heading">
|
||||||
|
<h2>
|
||||||
<button
|
<button
|
||||||
class="toggle-button"
|
class="toggle-button"
|
||||||
[attr.aria-expanded]="!isCollapsed(foldersGrouping)"
|
[attr.aria-expanded]="!isCollapsed(foldersGrouping)"
|
||||||
aria-controls="folder-filters"
|
aria-controls="folder-filters"
|
||||||
(click)="toggleCollapse(foldersGrouping)"
|
(click)="toggleCollapse(foldersGrouping)"
|
||||||
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
class="bwi bwi-fw"
|
class="bwi bwi-fw"
|
||||||
@ -15,8 +15,9 @@
|
|||||||
'bwi-angle-down': !isCollapsed(foldersGrouping)
|
'bwi-angle-down': !isCollapsed(foldersGrouping)
|
||||||
}"
|
}"
|
||||||
></i>
|
></i>
|
||||||
|
{{ foldersGrouping.name | i18n }}
|
||||||
</button>
|
</button>
|
||||||
<h2> {{ foldersGrouping.name | i18n }}</h2>
|
</h2>
|
||||||
<button class="add-button" (click)="addFolder()" appA11yTitle="{{ 'addFolder' | i18n }}">
|
<button class="add-button" (click)="addFolder()" appA11yTitle="{{ 'addFolder' | i18n }}">
|
||||||
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
|
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
|
||||||
</button>
|
</button>
|
||||||
@ -35,7 +36,7 @@
|
|||||||
class="toggle-button"
|
class="toggle-button"
|
||||||
*ngIf="f.children.length"
|
*ngIf="f.children.length"
|
||||||
(click)="toggleCollapse(f.node)"
|
(click)="toggleCollapse(f.node)"
|
||||||
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
appA11yTitle="{{ 'toggleCollapse' | i18n }} {{ f.node.name }}"
|
||||||
[attr.aria-expanded]="!isCollapsed(f.node)"
|
[attr.aria-expanded]="!isCollapsed(f.node)"
|
||||||
[attr.aria-controls]="f.node.name + '_children'"
|
[attr.aria-controls]="f.node.name + '_children'"
|
||||||
>
|
>
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
<div class="filter-heading" [ngClass]="{ active: !hasActiveFilter }">
|
<div class="filter-heading" [ngClass]="{ active: !hasActiveFilter }">
|
||||||
<button
|
<button
|
||||||
class="toggle-button"
|
class="toggle-button"
|
||||||
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
appA11yTitle="{{ 'toggleCollapse' | i18n }} {{ organizationGrouping.name | i18n }}"
|
||||||
(click)="toggleCollapse()"
|
(click)="toggleCollapse()"
|
||||||
[attr.aria-expanded]="!isCollapsed"
|
[attr.aria-expanded]="!isCollapsed"
|
||||||
aria-controls="organization-filters"
|
aria-controls="organization-filters"
|
||||||
@ -18,13 +18,16 @@
|
|||||||
}"
|
}"
|
||||||
></i>
|
></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<h2>
|
||||||
<button
|
<button
|
||||||
class="filter-button"
|
class="filter-button"
|
||||||
(click)="clearFilter()"
|
(click)="clearFilter()"
|
||||||
[attr.aria-pressed]="!hasActiveFilter"
|
[attr.aria-pressed]="!hasActiveFilter"
|
||||||
>
|
>
|
||||||
<h2> {{ organizationGrouping.name | i18n }}</h2>
|
{{ organizationGrouping.name | i18n }}
|
||||||
</button>
|
</button>
|
||||||
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options no-margin">
|
<ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options no-margin">
|
||||||
<li
|
<li
|
||||||
@ -48,7 +51,7 @@
|
|||||||
<ng-container *ngSwitchDefault>
|
<ng-container *ngSwitchDefault>
|
||||||
<div class="filter-heading" [ngClass]="{ active: !hasActiveFilter }">
|
<div class="filter-heading" [ngClass]="{ active: !hasActiveFilter }">
|
||||||
<button
|
<button
|
||||||
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
appA11yTitle="{{ 'toggleCollapse' | i18n }} {{ organizationGrouping.name | i18n }}"
|
||||||
(click)="toggleCollapse()"
|
(click)="toggleCollapse()"
|
||||||
[attr.aria-expanded]="!isCollapsed"
|
[attr.aria-expanded]="!isCollapsed"
|
||||||
aria-controls="organization-filters"
|
aria-controls="organization-filters"
|
||||||
@ -62,9 +65,16 @@
|
|||||||
}"
|
}"
|
||||||
></i>
|
></i>
|
||||||
</button>
|
</button>
|
||||||
<button class="filter-button" (click)="clearFilter()">
|
|
||||||
<h2> {{ organizationGrouping.name | i18n }}</h2>
|
<h2>
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="clearFilter()"
|
||||||
|
[attr.aria-pressed]="!hasActiveFilter"
|
||||||
|
>
|
||||||
|
{{ organizationGrouping.name | i18n }}
|
||||||
</button>
|
</button>
|
||||||
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options no-margin">
|
<ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options no-margin">
|
||||||
<li class="filter-option" [ngClass]="{ active: activeFilter.myVaultOnly }">
|
<li class="filter-option" [ngClass]="{ active: activeFilter.myVaultOnly }">
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
<div class="filter-heading">
|
<div class="filter-heading">
|
||||||
|
<h2>
|
||||||
<button
|
<button
|
||||||
class="no-btn"
|
class="no-btn"
|
||||||
(click)="toggleCollapse()"
|
(click)="toggleCollapse()"
|
||||||
aria-expanded="!isCollapsed"
|
[attr.aria-expanded]="!isCollapsed"
|
||||||
aria-controls="type-filters"
|
aria-controls="type-filters"
|
||||||
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
class="bwi bwi-fw"
|
class="bwi bwi-fw"
|
||||||
@ -14,8 +14,9 @@
|
|||||||
'bwi-angle-down': !isCollapsed
|
'bwi-angle-down': !isCollapsed
|
||||||
}"
|
}"
|
||||||
></i>
|
></i>
|
||||||
|
{{ typesNode.name | i18n }}
|
||||||
</button>
|
</button>
|
||||||
<h2> {{ typesNode.name | i18n }}</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<ul id="type-filters" *ngIf="!isCollapsed" class="filter-options">
|
<ul id="type-filters" *ngIf="!isCollapsed" class="filter-options">
|
||||||
<li
|
<li
|
||||||
@ -26,7 +27,7 @@
|
|||||||
<button
|
<button
|
||||||
class="filter-button"
|
class="filter-button"
|
||||||
(click)="applyFilter(cipherTypeEnum.Login)"
|
(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> {{ "typeLogin" | i18n }}
|
<i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i> {{ "typeLogin" | i18n }}
|
||||||
</button>
|
</button>
|
||||||
@ -37,7 +38,7 @@
|
|||||||
<button
|
<button
|
||||||
class="filter-button"
|
class="filter-button"
|
||||||
(click)="applyFilter(cipherTypeEnum.Card)"
|
(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> {{ "typeCard" | i18n }}
|
<i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i> {{ "typeCard" | i18n }}
|
||||||
</button>
|
</button>
|
||||||
@ -51,7 +52,7 @@
|
|||||||
<button
|
<button
|
||||||
class="filter-button"
|
class="filter-button"
|
||||||
(click)="applyFilter(cipherTypeEnum.Identity)"
|
(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> {{ "typeIdentity" | i18n }}
|
<i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i> {{ "typeIdentity" | i18n }}
|
||||||
</button>
|
</button>
|
||||||
@ -65,7 +66,7 @@
|
|||||||
<button
|
<button
|
||||||
class="filter-button"
|
class="filter-button"
|
||||||
(click)="applyFilter(cipherTypeEnum.SecureNote)"
|
(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> {{
|
<i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i> {{
|
||||||
"typeSecureNote" | i18n
|
"typeSecureNote" | i18n
|
||||||
|
@ -6,7 +6,11 @@
|
|||||||
<ul class="filter-options">
|
<ul class="filter-options">
|
||||||
<li class="filter-option" [ngClass]="{ active: selectedAll }">
|
<li class="filter-option" [ngClass]="{ active: selectedAll }">
|
||||||
<span class="filter-buttons">
|
<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> {{
|
<i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i> {{
|
||||||
"allSends" | i18n
|
"allSends" | i18n
|
||||||
}}
|
}}
|
||||||
|
@ -72,24 +72,21 @@
|
|||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
.filter-button {
|
.filter-button {
|
||||||
h2 {
|
font-weight: bold;
|
||||||
@include themify($themes) {
|
@include themify($themes) {
|
||||||
color: themed("primaryColor");
|
color: themed("primaryColor");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.filter-button {
|
.filter-button {
|
||||||
&:hover {
|
&:hover {
|
||||||
h2 {
|
|
||||||
@include themify($themes) {
|
@include themify($themes) {
|
||||||
color: themed("primaryColor");
|
color: themed("primaryColor");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.filter-options {
|
.filter-options {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
Loading…
Reference in New Issue
Block a user