more a11y updates

src/app/accounts/two-factor-options.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
+    <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h2 class="modal-title">{{'twoStepOptions' | i18n}}</h2>
+                <h2 class="modal-title" id="twoStepOptionsTitle">{{'twoStepOptions' | i18n}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>

src/app/app.component.html

@@ -1,2 +1,2 @@
-<toaster-container [toasterconfig]="toasterConfig"></toaster-container>
+<toaster-container [toasterconfig]="toasterConfig" aria-live="polite"></toaster-container>
 <router-outlet></router-outlet>

src/app/organizations/manage/collection-add-edit.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="collectionAddEditTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{title}}</h2>
+                <h2 class="modal-title" id="collectionAddEditTitle">{{title}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>

src/app/organizations/manage/entity-events.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog modal-lg">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="eventLogsTitle">
+    <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="eventLogsTitle">
                     {{'eventLogs' | i18n}}
                     <small class="text-muted" *ngIf="name">{{name}}</small>
                 </h2>

src/app/organizations/manage/entity-users.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog modal-lg">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAccessTitle">
+    <div class="modal-dialog modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="userAccessTitle">
                     {{'userAccess' | i18n}}
                     <small>{{entityName}}</small>
                 </h2>

src/app/organizations/manage/group-add-edit.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="groupAddEditTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{title}}</h2>
+                <h2 class="modal-title" id="groupAddEditTitle">{{title}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>

src/app/organizations/manage/user-add-edit.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog" [ngClass]="{'modal-lg': !editMode}">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
+    <div class="modal-dialog" [ngClass]="{'modal-lg': !editMode}" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="userAddEditTitle">
                     {{title}}
                     <small class="text-muted" *ngIf="name">{{name}}</small>
                 </h2>

src/app/organizations/manage/user-confirm.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="confirmUserTitle">
                     {{'confirmUser' | i18n}}
                     <small class="text-muted" *ngIf="name">{{name}}</small>
                 </h2>

src/app/organizations/manage/user-groups.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="groupAccessTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="groupAccessTitle">
                     {{'groupAccess' | i18n}}
                     <small class="text-muted" *ngIf="name">{{name}}</small>
                 </h2>

src/app/organizations/settings/api-key.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="apiKeyTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{'apiKey' | i18n}}</h2>
+                <h2 class="modal-title" id="apiKeyTitle">{{'apiKey' | i18n}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>

src/app/organizations/settings/delete-organization.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deleteOrganizationTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{'deleteOrganization' | i18n}}</h2>
+                <h2 class="modal-title" id="deleteOrganizationTitle">{{'deleteOrganization' | i18n}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>

src/app/organizations/settings/rotate-api-key.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="rotateKeyTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{'rotateApiKey' | i18n}}</h2>
+                <h2 class="modal-title" id="rotateKeyTitle">{{'rotateApiKey' | i18n}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>

src/app/settings/deauthorize-sessions.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deAuthTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{'deauthorizeSessions' | i18n}}</h2>
+                <h2 class="modal-title" id="deAuthTitle">{{'deauthorizeSessions' | i18n}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>

src/app/settings/delete-account.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deleteAccountTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{'deleteAccount' | i18n}}</h2>
+                <h2 class="modal-title" id="deleteAccountTitle">{{'deleteAccount' | i18n}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>

src/app/settings/purge-vault.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="purgeVaultTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{'purgeVault' | i18n}}</h2>
+                <h2 class="modal-title" id="purgeVaultTitle">{{'purgeVault' | i18n}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>

src/app/settings/two-factor-authenticator.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="2faAuthenticatorTitle">
+    <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="2faAuthenticatorTitle">
                     {{'twoStepLogin' | i18n}}
                     <small>{{'authenticatorAppTitle' | i18n}}</small>
                 </h2>

src/app/settings/two-factor-duo.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="2faDuoTitle">
+    <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" title="2faDuoTitle">
                     {{'twoStepLogin' | i18n}}
                     <small>Duo</small>
                 </h2>

src/app/settings/two-factor-email.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="2faEmailTitle">
+    <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="2faEmailTitle">
                     {{'twoStepLogin' | i18n}}
                     <small>{{'emailTitle' | i18n}}</small>
                 </h2>

src/app/settings/two-factor-recovery.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="2faRecoveryTitle">
+    <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="2faRecoveryTitle">
                     {{'twoStepLogin' | i18n}}
                     <small>{{'recoveryCodeTitle' | i18n}}</small>
                 </h2>

src/app/settings/two-factor-u2f.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog modal-lg">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="2faU2fTitle">
+    <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="2faU2fTitle">
                     {{'twoStepLogin' | i18n}}
                     <small>FIDO U2F</small>
                 </h2>

src/app/settings/two-factor-yubikey.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog modal-lg">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="2faYubiKeyTitle">
+    <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="2faYubiKeyTitle">
                     {{'twoStepLogin' | i18n}}
                     <small>YubiKey</small>
                 </h2>

src/app/settings/update-key.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="updateEncKeyTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{'updateEncryptionKey' | i18n}}</h2>
+                <h2 class="modal-title" id="updateEncKeyTitle">{{'updateEncryptionKey' | i18n}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>

src/app/tools/password-generator-history.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="passHistoryTitle">
+    <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h2 class="modal-title">{{'passwordHistory' | i18n}}</h2>
+                <h2 class="modal-title" id="passHistoryTitle">{{'passwordHistory' | i18n}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>

src/app/vault/add-edit.component.html

@@ -1,9 +1,9 @@
-<div class="modal fade">
-    <div class="modal-dialog modal-lg">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="cipherAddEditTitle">
+    <div class="modal-dialog modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate
             autocomplete="off">
             <div class="modal-header">
-                <h2 class="modal-title">{{title}}</h2>
+                <h2 class="modal-title" id="cipherAddEditTitle">{{title}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>

src/app/vault/attachments.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="attachmentsTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="attachmentsTitle">
                     {{'attachments' | i18n}}
                     <small *ngIf="cipher">{{cipher.name}}</small>
                 </h2>

src/app/vault/bulk-delete.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog modal-sm">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deleteSelectedTitle">
+    <div class="modal-dialog modal-sm" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="deleteSelectedTitle">
                     {{'deleteSelected' | i18n}}
                 </h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">

src/app/vault/bulk-move.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog modal-sm">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="moveSelectedTitle">
+    <div class="modal-dialog modal-sm" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="moveSelectedTitle">
                     {{'moveSelected' | i18n}}
                 </h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">

src/app/vault/bulk-share.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="shareSelectedTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="shareSelectedTitle">
                     {{'shareSelected' | i18n}}
                 </h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">

src/app/vault/collections.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="collectionsTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="collectionsTitle">
                     {{'collections' | i18n}}
                     <small *ngIf="cipher">{{cipher.name}}</small>
                 </h2>

src/app/vault/folder-add-edit.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog modal-sm">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="folderAddEditTitle">
+    <div class="modal-dialog modal-sm" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{title}}</h2>
+                <h2 class="modal-title" id="folderAddEditTitle">{{title}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>

src/app/vault/share.component.html

@@ -1,8 +1,8 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="shareTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="shareTitle">
                     {{'share' | i18n}}
                     <small *ngIf="cipher">{{cipher.name}}</small>
                 </h2>