Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-29 12:55:21 +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"
} }
} }

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

@ -1,3 +1,4 @@
<div role="toolbar" [ariaLabel]="'filters' | i18n">
<form [formGroup]="filterForm" class="tw-flex tw-flex-wrap tw-gap-2 tw-mb-6 tw-mt-2"> <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"> <ng-container *ngIf="organizations$ | async as organizations">
<bit-chip-select <bit-chip-select
@ -37,3 +38,4 @@
> >
</bit-chip-select> </bit-chip-select>
</form> </form>
</div>

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

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