Fixes for dynamic modal a11y (#1107)

* Remove tabindex and cdkTrapFocus from modals

* Add styling for modal-dismiss

* Remove modal-dismiss styles

* Update jslib

jslib

@@ -1 +1 @@
-Subproject commit f09fb69882525b3be7b2e257e7723eeb79b343d1
+Subproject commit 24fe836032354d4ec39435776e54dd0995e1b389

src/app/accounts/environment.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" attr.aria-label="{{'settings' | i18n}}">
+<div class="modal fade" role="dialog" aria-modal="true" attr.aria-label="{{'settings' | i18n}}">
     <div class="modal-dialog" role="document">
         <form class="modal-content" (ngSubmit)="submit()">
             <div class="modal-body">

src/app/accounts/premium.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="premiumTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="premiumTitle">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-body">

src/app/accounts/settings.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" attr.aria-label="{{'settings' | i18n}}" cdkTrapFocus cdkTrapFocusAutoCapture>
+<div class="modal fade" role="dialog" aria-modal="true" attr.aria-label="{{'settings' | i18n}}">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-body form">

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

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="twoStepTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="twoStepTitle">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-body">

src/app/accounts/vault-timeout-input.component.html

@@ -5,7 +5,7 @@
 <div [formGroup]="form">
     <div class="form-group">
         <label for="vaultTimeout">{{'vaultTimeout' | i18n}}</label>
-        <select id="vaultTimeout" name="VaultTimeout" formControlName="vaultTimeout" class="form-control">
+        <select id="vaultTimeout" name="VaultTimeout" formControlName="vaultTimeout" class="form-control" appAutofocus>
             <option *ngFor="let o of vaultTimeouts" [ngValue]="o.value">{{o.name}}</option>
         </select>
         <small class="form-text text-muted">{{'vaultTimeoutDesc' | i18n}}</small>

src/app/components/password-reprompt.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true">
+<div class="modal fade" role="dialog" aria-modal="true">
     <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()">
             <div class="modal-body">

src/app/components/set-pin.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" cdkTrapFocus cdkTrapFocusAutoCapture>
+<div class="modal fade" role="dialog" aria-modal="true">
     <div class="modal-dialog modal-dialog-scrollable set-pin-modal" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()">
             <div class="modal-body">
@@ -11,7 +11,7 @@
                             <div class="row-main">
                                 <label for="pin">{{'pin' | i18n}}</label>
                                 <input id="pin" type="{{showPin ? 'text' : 'password'}}" name="Pin" class="monospaced"
-                                    [(ngModel)]="pin" required appInputVerbatim cdkFocusInitial>
+                                    [(ngModel)]="pin" required appInputVerbatim appAutofocus>
                             </div>
                             <div class="action-buttons">
                                 <a class="row-btn" href="#" appStopClick appBlurClick

src/app/vault/attachments.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="attachmentsTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="attachmentsTitle">
     <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-body">

src/app/vault/collections.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="collectionsTitle">
+<div class="modal fade" 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-body">

src/app/vault/export.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="exportTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="exportTitle">
     <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()">
             <div class="modal-body">

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

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="folderAddEditTitle">
+<div class="modal fade" 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">
             <div class="modal-body">

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

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="passwordGenHistoryTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="passwordGenHistoryTitle">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-body">

src/app/vault/password-generator.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" attr.aria-label="{{'generatePassword' | i18n}}">
+<div class="modal fade" role="dialog" aria-modal="true" attr.aria-label="{{'generatePassword' | i18n}}">
     <div class="modal-dialog modal-sm" role="document">
         <div class="modal-content">
             <div class="modal-body">

src/app/vault/password-history.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="passwordHistoryTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="passwordHistoryTitle">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-body">

src/app/vault/share.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="moveToOrgTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="moveToOrgTitle">
     <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-body">