Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-01 13:13:36 +01:00
Code Issues Projects Releases Wiki Activity

[PM-8615] Filters Accessibility tweaks (#9538)

Browse Source 
* wrap filters in a role="toolbar" & add aria label

* announce deactivated org message when presented to the user
This commit is contained in:
Nick Krantz 2024-06-20 14:21:22 -05:00 committed by GitHub
parent 1763324a89
commit 82f8641926
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 54 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/browser/src/_locales/en/messages.json
View File

@ -3494,5 +3494,8 @@
}, },
"contactYourOrgAdmin": { "contactYourOrgAdmin": {
"message": "Items in deactivated organizations cannot be accessed. Contact your organization owner for assistance." "message": "Items in deactivated organizations cannot be accessed. Contact your organization owner for assistance."
},
"filters": {
"message": "Filters"
} }
} }

74
apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.html
View File

@ -1,39 +1,41 @@
<form [formGroup]="filterForm" class="tw-flex tw-flex-wrap tw-gap-2 tw-mb-6 tw-mt-2"> <div role="toolbar" [ariaLabel]="'filters' | i18n">
<ng-container *ngIf="organizations$ | async as organizations"> <form [formGroup]="filterForm" class="tw-flex tw-flex-wrap tw-gap-2 tw-mb-6 tw-mt-2">
<ng-container *ngIf="organizations$ | async as organizations">
<bit-chip-select
*ngIf="organizations.length"
formControlName="organization"
placeholderIcon="bwi-vault"
[placeholderText]="'vault' | i18n"
[options]="organizations"
>
</bit-chip-select>
</ng-container>
<ng-container *ngIf="collections$ | async as collections">
<bit-chip-select
*ngIf="collections.length"
formControlName="collection"
placeholderIcon="bwi-collection"
[placeholderText]="'collection' | i18n"
[options]="collections"
>
</bit-chip-select>
</ng-container>
<ng-container *ngIf="folders$ | async as folders">
<bit-chip-select
*ngIf="folders.length"
placeholderIcon="bwi-folder"
formControlName="folder"
[placeholderText]="'folder' | i18n"
[options]="folders"
>
</bit-chip-select>
</ng-container>
<bit-chip-select <bit-chip-select
*ngIf="organizations.length" formControlName="cipherType"
formControlName="organization" placeholderIcon="bwi-list"
placeholderIcon="bwi-vault" [placeholderText]="'type' | i18n"
[placeholderText]="'vault' | i18n" [options]="cipherTypes"
[options]="organizations"
> >
</bit-chip-select> </bit-chip-select>
</ng-container> </form>
<ng-container *ngIf="collections$ | async as collections"> </div>
<bit-chip-select
*ngIf="collections.length"
formControlName="collection"
placeholderIcon="bwi-collection"
[placeholderText]="'collection' | i18n"
[options]="collections"
>
</bit-chip-select>
</ng-container>
<ng-container *ngIf="folders$ | async as folders">
<bit-chip-select
*ngIf="folders.length"
placeholderIcon="bwi-folder"
formControlName="folder"
[placeholderText]="'folder' | i18n"
[options]="folders"
>
</bit-chip-select>
</ng-container>
<bit-chip-select
formControlName="cipherType"
placeholderIcon="bwi-list"
[placeholderText]="'type' | i18n"
[options]="cipherTypes"
>
</bit-chip-select>
</form>

21
apps/browser/src/vault/popup/components/vault/vault-v2.component.html
View File

@ -33,14 +33,19 @@
</bit-no-items> </bit-no-items>
</div> </div>
<div <!-- For better consistency with screen readers, the role/aria needs to be on an element that isn't dynamic by *ngIf -->
*ngIf="vaultState === VaultStateEnum.DeactivatedOrg" <div role="status" aria-live="polite">
class="tw-flex tw-flex-col tw-justify-center tw-h-auto tw-pt-12" <div
> *ngIf="vaultState === VaultStateEnum.DeactivatedOrg"
<bit-no-items [icon]="deactivatedIcon"> class="tw-flex tw-flex-col tw-justify-center tw-h-auto tw-pt-12"
<ng-container slot="title">{{ "organizationIsDeactivated" | i18n }}</ng-container> >
<ng-container slot="description">{{ "contactYourOrgAdmin" | i18n }}</ng-container> <bit-no-items [icon]="deactivatedIcon">
</bit-no-items> <ng-container slot="title">
{{ "organizationIsDeactivated" | i18n }}
</ng-container>
<ng-container slot="description">{{ "contactYourOrgAdmin" | i18n }}</ng-container>
</bit-no-items>
</div>
</div> </div>
<ng-container *ngIf="vaultState === null"> <ng-container *ngIf="vaultState === null">