a11y improvements for toastr and filters area

This commit is contained in:
Kyle Spearrin 2019-04-02 08:43:28 -04:00
parent a91a521722
commit a01b38fae9
5 changed files with 13 additions and 6 deletions

2
jslib

@ -1 +1 @@
Subproject commit 1044a8759ac3bbd72ccdee9d5a2b12373bb0004f Subproject commit e5d6861662967f6cc8ed33d81600cfabd9120fa0

View File

@ -57,7 +57,7 @@ const IdleTimeout = 60000 * 10; // 10 minutes
selector: 'app-root', selector: 'app-root',
styles: [], styles: [],
template: ` template: `
<toaster-container [toasterconfig]="toasterConfig"></toaster-container> <toaster-container [toasterconfig]="toasterConfig" aria-live="polite"></toaster-container>
<ng-template #settings></ng-template> <ng-template #settings></ng-template>
<ng-template #premium></ng-template> <ng-template #premium></ng-template>
<ng-template #passwordHistory></ng-template> <ng-template #passwordHistory></ng-template>

View File

@ -1,5 +1,6 @@
<div class="content"> <div class="content">
<div class="inner-content"> <div class="inner-content">
<h2 class="sr-only">{{'filters' | i18n}}</h2>
<ul> <ul>
<li [ngClass]="{active: selectedAll}"> <li [ngClass]="{active: selectedAll}">
<a href="#" appStopClick appBlurClick (click)="selectAll()"> <a href="#" appStopClick appBlurClick (click)="selectAll()">
@ -37,12 +38,12 @@
</ul> </ul>
<p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p> <p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p>
<ng-container *ngIf="loaded"> <ng-container *ngIf="loaded">
<h2> <div class="heading">
{{'folders' | i18n}} <h2>{{'folders' | i18n}}</h2>
<button appBlurClick (click)="addFolder()" appA11yTitle="{{'addFolder' | i18n}}"> <button appBlurClick (click)="addFolder()" appA11yTitle="{{'addFolder' | i18n}}">
<i class="fa fa-plus fa-fw" aria-hidden="true"></i> <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
</button> </button>
</h2> </div>
<ul class="fa-ul"> <ul class="fa-ul">
<ng-template #recursiveFolders let-folders> <ng-template #recursiveFolders let-folders>
<li *ngFor="let f of folders" <li *ngFor="let f of folders"

View File

@ -2,6 +2,9 @@
"bitwarden": { "bitwarden": {
"message": "Bitwarden" "message": "Bitwarden"
}, },
"filters": {
"message": "Filters"
},
"allItems": { "allItems": {
"message": "All Items" "message": "All Items"
}, },

View File

@ -38,11 +38,14 @@
font-size: $font-size-base; font-size: $font-size-base;
font-weight: normal; font-weight: normal;
margin-bottom: 5px; margin-bottom: 5px;
display: flex;
@include themify($themes) { @include themify($themes) {
color: themed('headingColor'); color: themed('headingColor');
} }
}
.heading {
display: flex;
button { button {
margin-left: auto; margin-left: auto;