From 52a30f4d8a5409448f4de743df3a4df547fc5b43 Mon Sep 17 00:00:00 2001
From: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Date: Mon, 25 Oct 2021 16:26:12 +1000
Subject: [PATCH]  Fixes for dynamic modal a11y (#1107)

* Remove tabindex and cdkTrapFocus from modals

* Add styling for modal-dismiss

* Remove modal-dismiss styles

* Update jslib
---
 jslib                                                   | 2 +-
 src/app/accounts/environment.component.html             | 2 +-
 src/app/accounts/premium.component.html                 | 2 +-
 src/app/accounts/settings.component.html                | 2 +-
 src/app/accounts/two-factor-options.component.html      | 2 +-
 src/app/accounts/vault-timeout-input.component.html     | 2 +-
 src/app/components/password-reprompt.component.html     | 2 +-
 src/app/components/set-pin.component.html               | 4 ++--
 src/app/vault/attachments.component.html                | 2 +-
 src/app/vault/collections.component.html                | 2 +-
 src/app/vault/export.component.html                     | 2 +-
 src/app/vault/folder-add-edit.component.html            | 2 +-
 src/app/vault/password-generator-history.component.html | 2 +-
 src/app/vault/password-generator.component.html         | 2 +-
 src/app/vault/password-history.component.html           | 2 +-
 src/app/vault/share.component.html                      | 2 +-
 16 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/jslib b/jslib
index f09fb698..24fe8360 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit f09fb69882525b3be7b2e257e7723eeb79b343d1
+Subproject commit 24fe836032354d4ec39435776e54dd0995e1b389
diff --git a/src/app/accounts/environment.component.html b/src/app/accounts/environment.component.html
index 36d7d95c..72ef27c5 100644
--- a/src/app/accounts/environment.component.html
+++ b/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">
diff --git a/src/app/accounts/premium.component.html b/src/app/accounts/premium.component.html
index fbffa4d8..82b4290e 100644
--- a/src/app/accounts/premium.component.html
+++ b/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">
diff --git a/src/app/accounts/settings.component.html b/src/app/accounts/settings.component.html
index 297f0f02..1f3d7339 100644
--- a/src/app/accounts/settings.component.html
+++ b/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">
diff --git a/src/app/accounts/two-factor-options.component.html b/src/app/accounts/two-factor-options.component.html
index 04f589c8..95789f6c 100644
--- a/src/app/accounts/two-factor-options.component.html
+++ b/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">
diff --git a/src/app/accounts/vault-timeout-input.component.html b/src/app/accounts/vault-timeout-input.component.html
index f959adff..7874d183 100644
--- a/src/app/accounts/vault-timeout-input.component.html
+++ b/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>
diff --git a/src/app/components/password-reprompt.component.html b/src/app/components/password-reprompt.component.html
index 0033cdd2..cc005a52 100644
--- a/src/app/components/password-reprompt.component.html
+++ b/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">
diff --git a/src/app/components/set-pin.component.html b/src/app/components/set-pin.component.html
index 6b7e1d77..21eeb84a 100644
--- a/src/app/components/set-pin.component.html
+++ b/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
diff --git a/src/app/vault/attachments.component.html b/src/app/vault/attachments.component.html
index 9b6157ff..0c190209 100644
--- a/src/app/vault/attachments.component.html
+++ b/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">
diff --git a/src/app/vault/collections.component.html b/src/app/vault/collections.component.html
index ff3085d2..ca320ecb 100644
--- a/src/app/vault/collections.component.html
+++ b/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">
diff --git a/src/app/vault/export.component.html b/src/app/vault/export.component.html
index d4a40436..b6e23954 100644
--- a/src/app/vault/export.component.html
+++ b/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">
diff --git a/src/app/vault/folder-add-edit.component.html b/src/app/vault/folder-add-edit.component.html
index cb7f416b..6ea62bef 100644
--- a/src/app/vault/folder-add-edit.component.html
+++ b/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">
diff --git a/src/app/vault/password-generator-history.component.html b/src/app/vault/password-generator-history.component.html
index 812b3026..134f08a3 100644
--- a/src/app/vault/password-generator-history.component.html
+++ b/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">
diff --git a/src/app/vault/password-generator.component.html b/src/app/vault/password-generator.component.html
index 465bba7e..fabc1278 100644
--- a/src/app/vault/password-generator.component.html
+++ b/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">
diff --git a/src/app/vault/password-history.component.html b/src/app/vault/password-history.component.html
index ef242199..ae15efd6 100644
--- a/src/app/vault/password-history.component.html
+++ b/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">
diff --git a/src/app/vault/share.component.html b/src/app/vault/share.component.html
index 0a120dc3..f06eec31 100644
--- a/src/app/vault/share.component.html
+++ b/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">