From 62c2d517d1ecd9f398615b880713396d9627dbca Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 17 Aug 2022 23:40:37 +0100
Subject: [PATCH 1/5] Web: change `<h2>` modal title to `<h1>`, tweak styles to
 keep same look

---
 apps/web/src/app/accounts/two-factor-options.component.html   | 2 +-
 apps/web/src/app/components/password-reprompt.component.html  | 4 ++--
 .../app/organizations/manage/bulk/bulk-confirm.component.html | 4 ++--
 .../app/organizations/manage/bulk/bulk-remove.component.html  | 4 ++--
 .../manage/bulk/bulk-restore-revoke.component.html            | 4 ++--
 .../app/organizations/manage/bulk/bulk-status.component.html  | 4 ++--
 .../organizations/manage/collection-add-edit.component.html   | 2 +-
 .../src/app/organizations/manage/entity-events.component.html | 4 ++--
 .../src/app/organizations/manage/entity-users.component.html  | 4 ++--
 .../app/organizations/manage/group-add-edit.component.html    | 2 +-
 .../src/app/organizations/manage/policy-edit.component.html   | 4 ++--
 .../app/organizations/manage/reset-password.component.html    | 4 ++--
 .../src/app/organizations/manage/user-add-edit.component.html | 4 ++--
 .../src/app/organizations/manage/user-confirm.component.html  | 4 ++--
 .../src/app/organizations/manage/user-groups.component.html   | 4 ++--
 .../settings/billing-sync-api-key.component.html              | 4 ++--
 .../organizations/settings/delete-organization.component.html | 2 +-
 .../users/enroll-master-password-reset.component.html         | 4 ++--
 apps/web/src/app/send/add-edit.component.html                 | 2 +-
 apps/web/src/app/settings/api-key.component.html              | 2 +-
 apps/web/src/app/settings/billing-sync-key.component.html     | 2 +-
 apps/web/src/app/settings/deauthorize-sessions.component.html | 2 +-
 apps/web/src/app/settings/delete-account.component.html       | 2 +-
 .../src/app/settings/emergency-access-add-edit.component.html | 4 ++--
 .../src/app/settings/emergency-access-confirm.component.html  | 4 ++--
 .../src/app/settings/emergency-access-takeover.component.html | 4 ++--
 apps/web/src/app/settings/purge-vault.component.html          | 2 +-
 .../src/app/settings/two-factor-authenticator.component.html  | 4 ++--
 apps/web/src/app/settings/two-factor-duo.component.html       | 4 ++--
 apps/web/src/app/settings/two-factor-email.component.html     | 4 ++--
 apps/web/src/app/settings/two-factor-recovery.component.html  | 4 ++--
 apps/web/src/app/settings/two-factor-webauthn.component.html  | 4 ++--
 apps/web/src/app/settings/two-factor-yubikey.component.html   | 4 ++--
 apps/web/src/app/settings/update-key.component.html           | 2 +-
 .../src/app/tools/password-generator-history.component.html   | 2 +-
 apps/web/src/app/vault/add-edit.component.html                | 2 +-
 apps/web/src/app/vault/attachments.component.html             | 4 ++--
 apps/web/src/app/vault/bulk-delete.component.html             | 4 ++--
 apps/web/src/app/vault/bulk-move.component.html               | 4 ++--
 apps/web/src/app/vault/bulk-restore.component.html            | 4 ++--
 apps/web/src/app/vault/bulk-share.component.html              | 4 ++--
 apps/web/src/app/vault/collections.component.html             | 4 ++--
 apps/web/src/app/vault/folder-add-edit.component.html         | 2 +-
 apps/web/src/app/vault/share.component.html                   | 4 ++--
 apps/web/src/scss/modals.scss                                 | 4 ++++
 45 files changed, 78 insertions(+), 74 deletions(-)

diff --git a/apps/web/src/app/accounts/two-factor-options.component.html b/apps/web/src/app/accounts/two-factor-options.component.html
index 690d0a1d9952..5c5eccb88310 100644
--- a/apps/web/src/app/accounts/two-factor-options.component.html
+++ b/apps/web/src/app/accounts/two-factor-options.component.html
@@ -2,7 +2,7 @@
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="twoStepOptionsTitle">{{ "twoStepOptions" | i18n }}</h2>
+        <h1 class="modal-title" id="twoStepOptionsTitle">{{ "twoStepOptions" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/components/password-reprompt.component.html b/apps/web/src/app/components/password-reprompt.component.html
index c61fcc394dbd..ebd81976566c 100644
--- a/apps/web/src/app/components/password-reprompt.component.html
+++ b/apps/web/src/app/components/password-reprompt.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()">
       <div class="modal-header">
-        <h2 class="modal-title" id="confirmUserTitle">
+        <h1 class="modal-title" id="confirmUserTitle">
           {{ "passwordConfirmation" | i18n }}
-        </h2>
+        </h1>
         <button type="button" class="close" data-dismiss="modal">
           <span aria-hidden="true">&times;</span>
         </button>
diff --git a/apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html b/apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html
index 84f660823ff9..595f9d767ebc 100644
--- a/apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html
+++ b/apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="bulkTitle">
+        <h1 class="modal-title" id="bulkTitle">
           {{ "confirmUsers" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html b/apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html
index 25b91fbf13ae..d17b52e89a66 100644
--- a/apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html
+++ b/apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="bulkTitle">
+        <h1 class="modal-title" id="bulkTitle">
           {{ "removeUsers" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html b/apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html
index e02ee93e8852..87b7af791ee0 100644
--- a/apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html
+++ b/apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="bulkTitle">
+        <h1 class="modal-title" id="bulkTitle">
           {{ bulkTitle }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/bulk/bulk-status.component.html b/apps/web/src/app/organizations/manage/bulk/bulk-status.component.html
index 8d9676781adc..86bacda38c7c 100644
--- a/apps/web/src/app/organizations/manage/bulk/bulk-status.component.html
+++ b/apps/web/src/app/organizations/manage/bulk/bulk-status.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="bulkTitle">
+        <h1 class="modal-title" id="bulkTitle">
           {{ "bulkConfirmStatus" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/collection-add-edit.component.html b/apps/web/src/app/organizations/manage/collection-add-edit.component.html
index f699e802b5be..97c973a41954 100644
--- a/apps/web/src/app/organizations/manage/collection-add-edit.component.html
+++ b/apps/web/src/app/organizations/manage/collection-add-edit.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="collectionAddEditTitle">{{ title }}</h2>
+        <h1 class="modal-title" id="collectionAddEditTitle">{{ title }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/entity-events.component.html b/apps/web/src/app/organizations/manage/entity-events.component.html
index 29f266cf04ff..122d0b81888a 100644
--- a/apps/web/src/app/organizations/manage/entity-events.component.html
+++ b/apps/web/src/app/organizations/manage/entity-events.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="eventLogsTitle">
+        <h1 class="modal-title" id="eventLogsTitle">
           {{ "eventLogs" | i18n }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/entity-users.component.html b/apps/web/src/app/organizations/manage/entity-users.component.html
index 92f95bae3b37..0f95fafc41fe 100644
--- a/apps/web/src/app/organizations/manage/entity-users.component.html
+++ b/apps/web/src/app/organizations/manage/entity-users.component.html
@@ -8,10 +8,10 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="userAccessTitle">
+        <h1 class="modal-title" id="userAccessTitle">
           {{ "userAccess" | i18n }}
           <small>{{ entityName }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/group-add-edit.component.html b/apps/web/src/app/organizations/manage/group-add-edit.component.html
index 8bb58656b1b4..d1055d86e854 100644
--- a/apps/web/src/app/organizations/manage/group-add-edit.component.html
+++ b/apps/web/src/app/organizations/manage/group-add-edit.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="groupAddEditTitle">{{ title }}</h2>
+        <h1 class="modal-title" id="groupAddEditTitle">{{ title }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/policy-edit.component.html b/apps/web/src/app/organizations/manage/policy-edit.component.html
index 90f1de819005..5f5dc1d85ef5 100644
--- a/apps/web/src/app/organizations/manage/policy-edit.component.html
+++ b/apps/web/src/app/organizations/manage/policy-edit.component.html
@@ -8,9 +8,9 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="policiesEditTitle">
+        <h1 class="modal-title" id="policiesEditTitle">
           {{ "editPolicy" | i18n }} - {{ policy.name | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/reset-password.component.html b/apps/web/src/app/organizations/manage/reset-password.component.html
index 675a17e4b08d..7b3ccdcc9a45 100644
--- a/apps/web/src/app/organizations/manage/reset-password.component.html
+++ b/apps/web/src/app/organizations/manage/reset-password.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="resetPasswordTitle">
+        <h1 class="modal-title" id="resetPasswordTitle">
           {{ "resetPassword" | i18n }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/user-add-edit.component.html b/apps/web/src/app/organizations/manage/user-add-edit.component.html
index 11b2b4cf19d9..fa4e896d2083 100644
--- a/apps/web/src/app/organizations/manage/user-add-edit.component.html
+++ b/apps/web/src/app/organizations/manage/user-add-edit.component.html
@@ -8,11 +8,11 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="userAddEditTitle">
+        <h1 class="modal-title" id="userAddEditTitle">
           {{ title }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
           <span bitBadge badgeType="secondary" *ngIf="isRevoked">{{ "revoked" | i18n }}</span>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/user-confirm.component.html b/apps/web/src/app/organizations/manage/user-confirm.component.html
index 87cc0d970a8c..1ee616f8bd5f 100644
--- a/apps/web/src/app/organizations/manage/user-confirm.component.html
+++ b/apps/web/src/app/organizations/manage/user-confirm.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="confirmUserTitle">
+        <h1 class="modal-title" id="confirmUserTitle">
           {{ "confirmUser" | i18n }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/user-groups.component.html b/apps/web/src/app/organizations/manage/user-groups.component.html
index 4853125b7831..347125e98254 100644
--- a/apps/web/src/app/organizations/manage/user-groups.component.html
+++ b/apps/web/src/app/organizations/manage/user-groups.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="groupAccessTitle">
+        <h1 class="modal-title" id="groupAccessTitle">
           {{ "groupAccess" | i18n }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/settings/billing-sync-api-key.component.html b/apps/web/src/app/organizations/settings/billing-sync-api-key.component.html
index 2319fe63029e..43733928730a 100644
--- a/apps/web/src/app/organizations/settings/billing-sync-api-key.component.html
+++ b/apps/web/src/app/organizations/settings/billing-sync-api-key.component.html
@@ -8,9 +8,9 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="billingSyncApiKeyTitle">
+        <h1 class="modal-title" id="billingSyncApiKeyTitle">
           {{ (hasBillingToken ? "viewBillingSyncToken" : "generateBillingSyncToken") | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/settings/delete-organization.component.html b/apps/web/src/app/organizations/settings/delete-organization.component.html
index 80d8ae0f7903..9f6fbbfb6d15 100644
--- a/apps/web/src/app/organizations/settings/delete-organization.component.html
+++ b/apps/web/src/app/organizations/settings/delete-organization.component.html
@@ -9,7 +9,7 @@
       *ngIf="loaded"
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="deleteOrganizationTitle">{{ "deleteOrganization" | i18n }}</h2>
+        <h1 class="modal-title" id="deleteOrganizationTitle">{{ "deleteOrganization" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/users/enroll-master-password-reset.component.html b/apps/web/src/app/organizations/users/enroll-master-password-reset.component.html
index f72602ac911b..72f1bbdbda75 100644
--- a/apps/web/src/app/organizations/users/enroll-master-password-reset.component.html
+++ b/apps/web/src/app/organizations/users/enroll-master-password-reset.component.html
@@ -13,9 +13,9 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="enrollMasterPasswordResetTitle">
+        <h1 class="modal-title" id="enrollMasterPasswordResetTitle">
           {{ "enrollPasswordReset" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/send/add-edit.component.html b/apps/web/src/app/send/add-edit.component.html
index 8d6c066bab94..dcc60a3c7af1 100644
--- a/apps/web/src/app/send/add-edit.component.html
+++ b/apps/web/src/app/send/add-edit.component.html
@@ -9,7 +9,7 @@
       autocomplete="off"
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="sendAddEditTitle">{{ title }}</h2>
+        <h1 class="modal-title" id="sendAddEditTitle">{{ title }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/api-key.component.html b/apps/web/src/app/settings/api-key.component.html
index 8e042aa6e450..1402a9938819 100644
--- a/apps/web/src/app/settings/api-key.component.html
+++ b/apps/web/src/app/settings/api-key.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="apiKeyTitle">{{ apiKeyTitle | i18n }}</h2>
+        <h1 class="modal-title" id="apiKeyTitle">{{ apiKeyTitle | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/billing-sync-key.component.html b/apps/web/src/app/settings/billing-sync-key.component.html
index e7e46e637c9f..b2a0c0c60dc7 100644
--- a/apps/web/src/app/settings/billing-sync-key.component.html
+++ b/apps/web/src/app/settings/billing-sync-key.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="billingSyncTitle">{{ "manageBillingSync" | i18n }}</h2>
+        <h1 class="modal-title" id="billingSyncTitle">{{ "manageBillingSync" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/deauthorize-sessions.component.html b/apps/web/src/app/settings/deauthorize-sessions.component.html
index ac7dc7ba02e6..56e2cda578d7 100644
--- a/apps/web/src/app/settings/deauthorize-sessions.component.html
+++ b/apps/web/src/app/settings/deauthorize-sessions.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="deAuthTitle">{{ "deauthorizeSessions" | i18n }}</h2>
+        <h1 class="modal-title" id="deAuthTitle">{{ "deauthorizeSessions" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/delete-account.component.html b/apps/web/src/app/settings/delete-account.component.html
index 77b9df007bc7..c2fbbe9e2cb6 100644
--- a/apps/web/src/app/settings/delete-account.component.html
+++ b/apps/web/src/app/settings/delete-account.component.html
@@ -9,7 +9,7 @@
       [formGroup]="deleteForm"
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="deleteAccountTitle">{{ "deleteAccount" | i18n }}</h2>
+        <h1 class="modal-title" id="deleteAccountTitle">{{ "deleteAccount" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/emergency-access-add-edit.component.html b/apps/web/src/app/settings/emergency-access-add-edit.component.html
index e7198e190304..410489321a19 100644
--- a/apps/web/src/app/settings/emergency-access-add-edit.component.html
+++ b/apps/web/src/app/settings/emergency-access-add-edit.component.html
@@ -8,11 +8,11 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="userAddEditTitle">
+        <h1 class="modal-title" id="userAddEditTitle">
           <app-premium-badge *ngIf="readOnly"></app-premium-badge>
           {{ title }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/emergency-access-confirm.component.html b/apps/web/src/app/settings/emergency-access-confirm.component.html
index 87cc0d970a8c..1ee616f8bd5f 100644
--- a/apps/web/src/app/settings/emergency-access-confirm.component.html
+++ b/apps/web/src/app/settings/emergency-access-confirm.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="confirmUserTitle">
+        <h1 class="modal-title" id="confirmUserTitle">
           {{ "confirmUser" | i18n }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/emergency-access-takeover.component.html b/apps/web/src/app/settings/emergency-access-takeover.component.html
index 468e80d005eb..dbcce914e9f1 100644
--- a/apps/web/src/app/settings/emergency-access-takeover.component.html
+++ b/apps/web/src/app/settings/emergency-access-takeover.component.html
@@ -8,10 +8,10 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="userAddEditTitle">
+        <h1 class="modal-title" id="userAddEditTitle">
           {{ "takeover" | i18n }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/purge-vault.component.html b/apps/web/src/app/settings/purge-vault.component.html
index 2c6a9f50fcb6..485e64617e2d 100644
--- a/apps/web/src/app/settings/purge-vault.component.html
+++ b/apps/web/src/app/settings/purge-vault.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="purgeVaultTitle">{{ "purgeVault" | i18n }}</h2>
+        <h1 class="modal-title" id="purgeVaultTitle">{{ "purgeVault" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/two-factor-authenticator.component.html b/apps/web/src/app/settings/two-factor-authenticator.component.html
index e46c7b0703cc..3ed1b2e573e1 100644
--- a/apps/web/src/app/settings/two-factor-authenticator.component.html
+++ b/apps/web/src/app/settings/two-factor-authenticator.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="2faAuthenticatorTitle">
+        <h1 class="modal-title" id="2faAuthenticatorTitle">
           {{ "twoStepLogin" | i18n }}
           <small>{{ "authenticatorAppTitle" | i18n }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/two-factor-duo.component.html b/apps/web/src/app/settings/two-factor-duo.component.html
index e3d057ff51d4..02e3e9c59506 100644
--- a/apps/web/src/app/settings/two-factor-duo.component.html
+++ b/apps/web/src/app/settings/two-factor-duo.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="2faDuoTitle">
+        <h1 class="modal-title" id="2faDuoTitle">
           {{ "twoStepLogin" | i18n }}
           <small>Duo</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/two-factor-email.component.html b/apps/web/src/app/settings/two-factor-email.component.html
index f189a275040e..5f98fb0d93db 100644
--- a/apps/web/src/app/settings/two-factor-email.component.html
+++ b/apps/web/src/app/settings/two-factor-email.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="2faEmailTitle">
+        <h1 class="modal-title" id="2faEmailTitle">
           {{ "twoStepLogin" | i18n }}
           <small>{{ "emailTitle" | i18n }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/two-factor-recovery.component.html b/apps/web/src/app/settings/two-factor-recovery.component.html
index ba9129da17a4..d3bb8c28b6dc 100644
--- a/apps/web/src/app/settings/two-factor-recovery.component.html
+++ b/apps/web/src/app/settings/two-factor-recovery.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="2faRecoveryTitle">
+        <h1 class="modal-title" id="2faRecoveryTitle">
           {{ "twoStepLogin" | i18n }}
           <small>{{ "recoveryCodeTitle" | i18n }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/two-factor-webauthn.component.html b/apps/web/src/app/settings/two-factor-webauthn.component.html
index 2c91dbc5ae07..1a5676afd855 100644
--- a/apps/web/src/app/settings/two-factor-webauthn.component.html
+++ b/apps/web/src/app/settings/two-factor-webauthn.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="2faU2fTitle">
+        <h1 class="modal-title" id="2faU2fTitle">
           {{ "twoStepLogin" | i18n }}
           <small>{{ "webAuthnTitle" | i18n }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/two-factor-yubikey.component.html b/apps/web/src/app/settings/two-factor-yubikey.component.html
index 96eff9b3a435..ad26df871d00 100644
--- a/apps/web/src/app/settings/two-factor-yubikey.component.html
+++ b/apps/web/src/app/settings/two-factor-yubikey.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="2faYubiKeyTitle">
+        <h1 class="modal-title" id="2faYubiKeyTitle">
           {{ "twoStepLogin" | i18n }}
           <small>YubiKey</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/update-key.component.html b/apps/web/src/app/settings/update-key.component.html
index e82fc77267a1..b39a5eb7e1a4 100644
--- a/apps/web/src/app/settings/update-key.component.html
+++ b/apps/web/src/app/settings/update-key.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="updateEncKeyTitle">{{ "updateEncryptionKey" | i18n }}</h2>
+        <h1 class="modal-title" id="updateEncKeyTitle">{{ "updateEncryptionKey" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/tools/password-generator-history.component.html b/apps/web/src/app/tools/password-generator-history.component.html
index 5b9e32378a33..dd26f0a92b85 100644
--- a/apps/web/src/app/tools/password-generator-history.component.html
+++ b/apps/web/src/app/tools/password-generator-history.component.html
@@ -2,7 +2,7 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="passHistoryTitle">{{ "passwordHistory" | i18n }}</h2>
+        <h1 class="modal-title" id="passHistoryTitle">{{ "passwordHistory" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/add-edit.component.html b/apps/web/src/app/vault/add-edit.component.html
index d7aa44f8772f..bf5def702b3b 100644
--- a/apps/web/src/app/vault/add-edit.component.html
+++ b/apps/web/src/app/vault/add-edit.component.html
@@ -9,7 +9,7 @@
       autocomplete="off"
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="cipherAddEditTitle">{{ title }}</h2>
+        <h1 class="modal-title" id="cipherAddEditTitle">{{ title }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/attachments.component.html b/apps/web/src/app/vault/attachments.component.html
index a358acc55337..0940f0fa89fa 100644
--- a/apps/web/src/app/vault/attachments.component.html
+++ b/apps/web/src/app/vault/attachments.component.html
@@ -8,10 +8,10 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="attachmentsTitle">
+        <h1 class="modal-title" id="attachmentsTitle">
           {{ "attachments" | i18n }}
           <small *ngIf="cipher">{{ cipher.name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/bulk-delete.component.html b/apps/web/src/app/vault/bulk-delete.component.html
index 154786960ade..43ae98290089 100644
--- a/apps/web/src/app/vault/bulk-delete.component.html
+++ b/apps/web/src/app/vault/bulk-delete.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="deleteSelectedTitle">
+        <h1 class="modal-title" id="deleteSelectedTitle">
           {{ (permanent ? "permanentlyDeleteSelected" : "deleteSelected") | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/bulk-move.component.html b/apps/web/src/app/vault/bulk-move.component.html
index 552b2efa5125..c82ad83f61b6 100644
--- a/apps/web/src/app/vault/bulk-move.component.html
+++ b/apps/web/src/app/vault/bulk-move.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="moveSelectedTitle">
+        <h1 class="modal-title" id="moveSelectedTitle">
           {{ "moveSelected" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/bulk-restore.component.html b/apps/web/src/app/vault/bulk-restore.component.html
index 5331b25fcc66..577c189fe4c6 100644
--- a/apps/web/src/app/vault/bulk-restore.component.html
+++ b/apps/web/src/app/vault/bulk-restore.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="restoreSelectedTitle">
+        <h1 class="modal-title" id="restoreSelectedTitle">
           {{ "restoreSelected" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/bulk-share.component.html b/apps/web/src/app/vault/bulk-share.component.html
index 5a7a38e8f583..7b4ffe7a0aa6 100644
--- a/apps/web/src/app/vault/bulk-share.component.html
+++ b/apps/web/src/app/vault/bulk-share.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="moveSelectedToOrgTitle">
+        <h1 class="modal-title" id="moveSelectedToOrgTitle">
           {{ "moveSelectedToOrg" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/collections.component.html b/apps/web/src/app/vault/collections.component.html
index 486ed03e3265..f7c8dd7b899f 100644
--- a/apps/web/src/app/vault/collections.component.html
+++ b/apps/web/src/app/vault/collections.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="collectionsTitle">
+        <h1 class="modal-title" id="collectionsTitle">
           {{ "collections" | i18n }}
           <small *ngIf="cipher">{{ cipher.name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/folder-add-edit.component.html b/apps/web/src/app/vault/folder-add-edit.component.html
index fe59530f683f..ea660594fdfd 100644
--- a/apps/web/src/app/vault/folder-add-edit.component.html
+++ b/apps/web/src/app/vault/folder-add-edit.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="folderAddEditTitle">{{ title }}</h2>
+        <h1 class="modal-title" id="folderAddEditTitle">{{ title }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/share.component.html b/apps/web/src/app/vault/share.component.html
index 1f56c8c39502..8d533e120043 100644
--- a/apps/web/src/app/vault/share.component.html
+++ b/apps/web/src/app/vault/share.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="shareTitle">
+        <h1 class="modal-title" id="shareTitle">
           {{ "moveToOrganization" | i18n }}
           <small *ngIf="cipher">{{ cipher.name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/scss/modals.scss b/apps/web/src/scss/modals.scss
index 7d4fd478e5eb..0496c272b228 100644
--- a/apps/web/src/scss/modals.scss
+++ b/apps/web/src/scss/modals.scss
@@ -26,6 +26,10 @@
     border-bottom: 1px solid themed("separator");
     color: themed("textColor");
   }
+
+  .modal-title {
+    font-size: 1.3rem;
+  }
 }
 
 .modal-body {

From 41557bf5668a61c502a3f3281a5a3fee8a82e78d Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 18 Aug 2022 20:00:06 +0100
Subject: [PATCH 2/5] Change libs dialog component `<h2>` to `<h1>`

see https://github.com/bitwarden/clients/pull/3328#issuecomment-1219815372
---
 libs/components/src/dialog/dialog/dialog.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index c71e38120b9b..cc0374a6e876 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -5,9 +5,9 @@
   <div
     class="tw-flex tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-p-4"
   >
-    <h2 class="tw-mb-0 tw-grow tw-text-lg tw-uppercase">
+    <h1 class="tw-mb-0 tw-grow tw-text-lg tw-uppercase">
       <ng-content select="[bit-dialog-title]"></ng-content>
-    </h2>
+    </h1>
     <button class="tw-border-0 tw-bg-transparent tw-p-0" bitDialogClose>
       <i class="bwi bwi-close tw-text-xs tw-font-bold tw-text-main" aria-hidden="true"></i>
     </button>

From 3c4b8aa625b5ab3dc64f6f9c83c8399594581849 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 18 Aug 2022 22:15:00 +0100
Subject: [PATCH 3/5] Update simple-dialog component as well, add
 `role`/`aria-modal` to dialog components

---
 libs/components/src/dialog/dialog/dialog.component.html     | 2 ++
 .../src/dialog/simple-dialog/simple-dialog.component.html   | 6 ++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index cc0374a6e876..97db6f668219 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -1,4 +1,6 @@
 <div
+  role="dialog"
+  aria-modal="true"
   [ngClass]="width"
   class="tw-my-4 tw-flex tw-max-h-screen tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
 >
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
index 90a4a51e0641..9492f5f8fd4a 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
@@ -1,4 +1,6 @@
 <div
+  role="dialog"
+  aria-modal="true"
   class="tw-my-4 tw-flex tw-max-h-screen tw-max-w-sm tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
 >
   <div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center">
@@ -6,9 +8,9 @@
     <ng-template #elseBlock>
       <i class="bwi bwi-exclamation-triangle tw-text-3xl tw-text-warning" aria-hidden="true"></i>
     </ng-template>
-    <h2 class="tw-mb-0 tw-text-base tw-font-semibold">
+    <h1 class="tw-mb-0 tw-text-base tw-font-semibold">
       <ng-content select="[bit-dialog-title]"></ng-content>
-    </h2>
+    </h1>
   </div>
   <div class="tw-overflow-y-auto tw-px-4 tw-pt-2 tw-pb-4 tw-text-center tw-text-base">
     <ng-content select="[bit-dialog-content]"></ng-content>

From 3ae95d217c22e6b19d58662f3a8c939b2d6e889d Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 5 Sep 2022 12:42:54 +0100
Subject: [PATCH 4/5] Don't set `role`/`aria-modal` on the libs components

---
 libs/components/src/dialog/dialog/dialog.component.html         | 2 --
 .../src/dialog/simple-dialog/simple-dialog.component.html       | 2 --
 2 files changed, 4 deletions(-)

diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index 97db6f668219..cc0374a6e876 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -1,6 +1,4 @@
 <div
-  role="dialog"
-  aria-modal="true"
   [ngClass]="width"
   class="tw-my-4 tw-flex tw-max-h-screen tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
 >
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
index 9492f5f8fd4a..6b87a0a3ed92 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
@@ -1,6 +1,4 @@
 <div
-  role="dialog"
-  aria-modal="true"
   class="tw-my-4 tw-flex tw-max-h-screen tw-max-w-sm tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
 >
   <div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center">

From 05bb1c70c80be62a5e01f1e93f6260f37427edb5 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 5 Sep 2022 12:47:54 +0100
Subject: [PATCH 5/5] Pull in changes to libs dialog headings from #3439

to avoid conflicts/overwriting https://github.com/bitwarden/clients/pull/3439
---
 libs/components/src/dialog/dialog/dialog.component.html       | 4 ++--
 .../src/dialog/simple-dialog/simple-dialog.component.html     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index cc0374a6e876..919efe12c3fd 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -5,8 +5,8 @@
   <div
     class="tw-flex tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-p-4"
   >
-    <h1 class="tw-mb-0 tw-grow tw-text-lg tw-uppercase">
-      <ng-content select="[bit-dialog-title]"></ng-content>
+    <h1 bitDialogTitleContainer class="tw-mb-0 tw-grow tw-text-lg tw-uppercase">
+      <ng-content select="[bitDialogTitle]"></ng-content>
     </h1>
     <button class="tw-border-0 tw-bg-transparent tw-p-0" bitDialogClose>
       <i class="bwi bwi-close tw-text-xs tw-font-bold tw-text-main" aria-hidden="true"></i>
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
index 6b87a0a3ed92..054b31f5d522 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
@@ -6,8 +6,8 @@
     <ng-template #elseBlock>
       <i class="bwi bwi-exclamation-triangle tw-text-3xl tw-text-warning" aria-hidden="true"></i>
     </ng-template>
-    <h1 class="tw-mb-0 tw-text-base tw-font-semibold">
-      <ng-content select="[bit-dialog-title]"></ng-content>
+    <h1 bitDialogTitleContainer class="tw-mb-0 tw-text-base tw-font-semibold">
+      <ng-content select="[bitDialogTitle]"></ng-content>
     </h1>
   </div>
   <div class="tw-overflow-y-auto tw-px-4 tw-pt-2 tw-pb-4 tw-text-center tw-text-base">