From 89b69f4bc6ee518ab959e1608aa01d969c9a23c6 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 18 Aug 2022 10:28:37 +0100
Subject: [PATCH] [PS-1307] Desktop: Change box-headers from `<div>` to
 semantic headings (#3313)

* Change box-headers from generic `<div>` to semantic headings, tweak heading styles

Essentially, a late port to desktop of aspects from https://github.com/bitwarden/clients/pull/2223 (which I hadn't realised at the time also affected the desktop app)

* Change box headers in modals to `<h1>`s

* Fix/normalise modals

* Harmonise modal dialog headings, use `aria-labelledby`
---
 .../accounts/delete-account.component.html    |  6 ++++--
 .../app/accounts/environment.component.html   | 10 +++++-----
 .../src/app/accounts/premium.component.html   |  4 ++--
 .../src/app/accounts/settings.component.html  |  6 +++---
 .../two-factor-options.component.html         |  4 ++--
 .../password-reprompt.component.html          |  6 ++++--
 .../src/app/send/add-edit.component.html      | 16 ++++++++--------
 .../add-edit-custom-fields.component.html     |  4 ++--
 .../src/app/vault/add-edit.component.html     | 16 ++++++++--------
 .../src/app/vault/attachments.component.html  |  8 ++++----
 .../src/app/vault/collections.component.html  |  4 ++--
 .../src/app/vault/export.component.html       |  4 ++--
 .../app/vault/folder-add-edit.component.html  |  4 ++--
 .../src/app/vault/generator.component.html    | 19 +++++++------------
 .../password-generator-history.component.html |  4 ++--
 .../app/vault/password-history.component.html |  4 ++--
 .../src/app/vault/share.component.html        |  8 ++++----
 .../vault/view-custom-fields.component.html   |  4 ++--
 .../desktop/src/app/vault/view.component.html | 12 ++++++------
 apps/desktop/src/scss/base.scss               |  6 ++----
 20 files changed, 73 insertions(+), 76 deletions(-)

diff --git a/apps/desktop/src/app/accounts/delete-account.component.html b/apps/desktop/src/app/accounts/delete-account.component.html
index 1371cee162f..5e2e245c0cd 100644
--- a/apps/desktop/src/app/accounts/delete-account.component.html
+++ b/apps/desktop/src/app/accounts/delete-account.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" attr.aria-label="{{ 'settings' | i18n }}">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="deleteAccountTitle">
   <div class="modal-dialog" role="document">
     <form
       class="modal-content"
@@ -13,7 +13,9 @@
           {{ "deleteAccountWarning" | i18n }}
         </app-callout>
         <div class="box last">
-          <div class="box-header">{{ "deleteAccount" | i18n }}</div>
+          <h1 class="box-header" id="deleteAccountTitle">
+            {{ "deleteAccount" | i18n }}
+          </h1>
           <div class="box-content">
             <app-user-verification
               ngDefaultControl
diff --git a/apps/desktop/src/app/accounts/environment.component.html b/apps/desktop/src/app/accounts/environment.component.html
index eff32641c87..859554b92b1 100644
--- a/apps/desktop/src/app/accounts/environment.component.html
+++ b/apps/desktop/src/app/accounts/environment.component.html
@@ -1,11 +1,11 @@
-<div class="modal fade" role="dialog" aria-modal="true" attr.aria-label="{{ 'settings' | i18n }}">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="selfHosteEnvironmentTitle">
   <div class="modal-dialog" role="document">
     <form class="modal-content" (ngSubmit)="submit()">
       <div class="modal-body">
         <div class="box">
-          <div class="box-header">
+          <h1 class="box-header" id="selfHosteEnvironmentTitle">
             {{ "selfHostedEnvironment" | i18n }}
-          </div>
+          </h1>
           <div class="box-content">
             <div class="box-content-row" appBoxRow>
               <label for="baseUrl">{{ "baseUrl" | i18n }}</label>
@@ -24,13 +24,13 @@
           </div>
         </div>
         <div class="box">
-          <div class="box-header">
+          <h2 class="box-header">
             <button type="button" (click)="toggleCustom()" [attr.aria-expanded]="showCustom">
               <i class="bwi bwi-plus-square" [hidden]="showCustom" aria-hidden="true"></i>
               <i class="bwi bwi-minus-square" [hidden]="!showCustom" aria-hidden="true"></i>
               {{ "customEnvironment" | i18n }}
             </button>
-          </div>
+          </h2>
           <div class="box-content" [hidden]="!showCustom">
             <div class="box-content-row" appBoxRow>
               <label for="webVaultUrl">{{ "webVaultUrl" | i18n }}</label>
diff --git a/apps/desktop/src/app/accounts/premium.component.html b/apps/desktop/src/app/accounts/premium.component.html
index 01c181daa81..f47f377cff2 100644
--- a/apps/desktop/src/app/accounts/premium.component.html
+++ b/apps/desktop/src/app/accounts/premium.component.html
@@ -3,9 +3,9 @@
     <div class="modal-content">
       <div class="modal-body">
         <div class="box">
-          <div class="box-header" id="premiumTitle">
+          <h1 class="box-header" id="premiumTitle">
             {{ "premiumMembership" | i18n }}
-          </div>
+          </h1>
           <div class="box-content box-content-padded">
             <div *ngIf="!isPremium">
               <p class="text-center lead">{{ "premiumNotCurrentMember" | i18n }}</p>
diff --git a/apps/desktop/src/app/accounts/settings.component.html b/apps/desktop/src/app/accounts/settings.component.html
index f775eb9bb44..33abdc934c6 100644
--- a/apps/desktop/src/app/accounts/settings.component.html
+++ b/apps/desktop/src/app/accounts/settings.component.html
@@ -1,11 +1,11 @@
-<div class="modal fade" role="dialog" aria-modal="true" attr.aria-label="{{ 'settings' | i18n }}">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-body form">
         <div class="box">
-          <div class="box-header">
+          <h1 class="box-header" id="settingsTitle">
             {{ "settingsTitle" | i18n: currentUserEmail }}
-          </div>
+          </h1>
           <div class="box-content box-content-padded">
             <h2>
               <button
diff --git a/apps/desktop/src/app/accounts/two-factor-options.component.html b/apps/desktop/src/app/accounts/two-factor-options.component.html
index 778d2636e37..6f87c666215 100644
--- a/apps/desktop/src/app/accounts/two-factor-options.component.html
+++ b/apps/desktop/src/app/accounts/two-factor-options.component.html
@@ -3,9 +3,9 @@
     <div class="modal-content">
       <div class="modal-body">
         <div class="box">
-          <div class="box-header" id="twoStepTitle">
+          <h1 class="box-header" id="twoStepTitle">
             {{ "twoStepOptions" | i18n }}
-          </div>
+          </h1>
           <div class="box-content">
             <button
               type="button"
diff --git a/apps/desktop/src/app/components/password-reprompt.component.html b/apps/desktop/src/app/components/password-reprompt.component.html
index 07d9abd8fcc..1ec4ef702c2 100644
--- a/apps/desktop/src/app/components/password-reprompt.component.html
+++ b/apps/desktop/src/app/components/password-reprompt.component.html
@@ -1,9 +1,11 @@
-<div class="modal fade" role="dialog" aria-modal="true">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="passwordConfirmationTitle">
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()">
       <div class="modal-body">
         <div class="box">
-          <div class="box-header">{{ "passwordConfirmation" | i18n }}</div>
+          <h1 class="box-header" id="passwordConfirmationTitle">
+            {{ "passwordConfirmation" | i18n }}
+          </h1>
           <div class="box-content">
             <div class="box-content-row box-content-row-flex" appBoxRow>
               <div class="row-main">
diff --git a/apps/desktop/src/app/send/add-edit.component.html b/apps/desktop/src/app/send/add-edit.component.html
index 855cd9ca645..d61cbf99652 100644
--- a/apps/desktop/src/app/send/add-edit.component.html
+++ b/apps/desktop/src/app/send/add-edit.component.html
@@ -10,9 +10,9 @@
         </app-callout>
       </div>
       <div class="box">
-        <div class="box-header">
+        <h2 class="box-header">
           {{ title }}
-        </div>
+        </h2>
         <div class="box-content">
           <div class="box-content-row" appBoxRow>
             <label for="name">{{ "name" | i18n }}</label>
@@ -92,7 +92,7 @@
         </div>
       </div>
       <div class="box">
-        <div class="box-header">
+        <h2 class="box-header">
           <button
             type="button"
             class="toggle"
@@ -107,7 +107,7 @@
               [ngClass]="{ 'bwi-angle-down': !showOptions, 'bwi-chevron-up': showOptions }"
             ></i>
           </button>
-        </div>
+        </h2>
       </div>
       <div [hidden]="!showOptions">
         <app-send-efflux-dates
@@ -179,9 +179,9 @@
           </div>
         </div>
         <div class="box">
-          <div class="box-header">
+          <h2 class="box-header">
             {{ "notes" | i18n }}
-          </div>
+          </h2>
           <div class="box-content">
             <div class="box-content-row" appBoxRow>
               <textarea
@@ -227,9 +227,9 @@
         </div>
       </div>
       <div class="box">
-        <div class="box-header">
+        <h2 class="box-header">
           {{ "share" | i18n }}
-        </div>
+        </h2>
         <div class="box-content">
           <div class="box-content-row" appBoxRow *ngIf="editMode">
             <label for="link">{{ "sendLinkLabel" | i18n }}</label>
diff --git a/apps/desktop/src/app/vault/add-edit-custom-fields.component.html b/apps/desktop/src/app/vault/add-edit-custom-fields.component.html
index cf4635c34c9..17416fa728c 100644
--- a/apps/desktop/src/app/vault/add-edit-custom-fields.component.html
+++ b/apps/desktop/src/app/vault/add-edit-custom-fields.component.html
@@ -1,7 +1,7 @@
 <div class="box">
-  <div class="box-header">
+  <h2 class="box-header">
     {{ "customFields" | i18n }}
-  </div>
+  </h2>
   <div class="box-content">
     <div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
       <div
diff --git a/apps/desktop/src/app/vault/add-edit.component.html b/apps/desktop/src/app/vault/add-edit.component.html
index 05c9e130e08..14222de0aa8 100644
--- a/apps/desktop/src/app/vault/add-edit.component.html
+++ b/apps/desktop/src/app/vault/add-edit.component.html
@@ -5,9 +5,9 @@
         <app-callout type="info" *ngIf="allowOwnershipOptions() && !allowPersonal">
           {{ "personalOwnershipPolicyInEffect" | i18n }}
         </app-callout>
-        <div class="box-header">
+        <h2 class="box-header">
           {{ title }}
-        </div>
+        </h2>
         <div class="box-content">
           <div class="box-content-row" *ngIf="!editMode" appBoxRow>
             <label for="type">{{ "type" | i18n }}</label>
@@ -504,9 +504,9 @@
         </div>
       </div>
       <div class="box">
-        <div class="box-header">
+        <h2 class="box-header">
           <label for="notes">{{ "notes" | i18n }}</label>
-        </div>
+        </h2>
         <div class="box-content">
           <div class="box-content-row" appBoxRow>
             <textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"></textarea>
@@ -520,9 +520,9 @@
       >
       </app-vault-add-edit-custom-fields>
       <div class="box" *ngIf="allowOwnershipOptions()">
-        <div class="box-header">
+        <h2 class="box-header">
           {{ "ownership" | i18n }}
-        </div>
+        </h2>
         <div class="box-content">
           <div class="box-content-row" appBoxRow>
             <label for="organizationId">{{ "whoOwnsThisItem" | i18n }}</label>
@@ -539,9 +539,9 @@
         </div>
       </div>
       <div class="box" *ngIf="(!editMode || cloneMode) && cipher.organizationId">
-        <div class="box-header">
+        <h2 class="box-header">
           {{ "collections" | i18n }}
-        </div>
+        </h2>
         <div class="box-content" *ngIf="!collections || !collections.length">
           {{ "noCollectionsInList" | i18n }}
         </div>
diff --git a/apps/desktop/src/app/vault/attachments.component.html b/apps/desktop/src/app/vault/attachments.component.html
index 5981b2b62b9..8a7cb93ce56 100644
--- a/apps/desktop/src/app/vault/attachments.component.html
+++ b/apps/desktop/src/app/vault/attachments.component.html
@@ -3,9 +3,9 @@
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-body">
         <div class="box" *ngIf="cipher && cipher.hasAttachments">
-          <div class="box-header" id="attachmentsTitle">
+          <h1 class="box-header" id="attachmentsTitle">
             {{ "attachments" | i18n }}
-          </div>
+          </h1>
           <div class="box-content no-hover">
             <div class="box-content-row box-content-row-flex" *ngFor="let a of cipher.attachments">
               <div class="row-main">
@@ -39,9 +39,9 @@
           </div>
         </div>
         <div class="box">
-          <div class="box-header">
+          <h2 class="box-header">
             {{ "newAttachment" | i18n }}
-          </div>
+          </h2>
           <div class="box-content no-hover">
             <div class="box-content-row">
               <label for="file">{{ "file" | i18n }}</label>
diff --git a/apps/desktop/src/app/vault/collections.component.html b/apps/desktop/src/app/vault/collections.component.html
index acdc5ea0a97..047bd77d804 100644
--- a/apps/desktop/src/app/vault/collections.component.html
+++ b/apps/desktop/src/app/vault/collections.component.html
@@ -3,9 +3,9 @@
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-body">
         <div class="box">
-          <div class="box-header" id="collectionsTitle">
+          <h1 class="box-header" id="collectionsTitle">
             {{ "collections" | i18n }}
-          </div>
+          </h1>
           <div class="box-content" *ngIf="!collections || !collections.length">
             {{ "noCollectionsInList" | i18n }}
           </div>
diff --git a/apps/desktop/src/app/vault/export.component.html b/apps/desktop/src/app/vault/export.component.html
index 09e21b063d5..229156c1f6a 100644
--- a/apps/desktop/src/app/vault/export.component.html
+++ b/apps/desktop/src/app/vault/export.component.html
@@ -11,9 +11,9 @@
         </app-callout>
         <app-export-scope-callout *ngIf="!disabledByPolicy"></app-export-scope-callout>
         <div class="box">
-          <div class="box-header" id="exportTitle">
+          <h1 class="box-header" id="exportTitle">
             {{ "exportVault" | i18n }}
-          </div>
+          </h1>
           <div class="box-content">
             <div class="box-content-row" appBoxRow>
               <label for="format">{{ "fileFormat" | i18n }}</label>
diff --git a/apps/desktop/src/app/vault/folder-add-edit.component.html b/apps/desktop/src/app/vault/folder-add-edit.component.html
index 6457b223c01..ea7303dceb2 100644
--- a/apps/desktop/src/app/vault/folder-add-edit.component.html
+++ b/apps/desktop/src/app/vault/folder-add-edit.component.html
@@ -3,9 +3,9 @@
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-body">
         <div class="box">
-          <div class="box-header" id="folderAddEditTitle">
+          <h1 class="box-header" id="folderAddEditTitle">
             {{ title }}
-          </div>
+          </h1>
           <div class="box-content">
             <div class="box-content-row" appBoxRow>
               <label for="name">{{ "name" | i18n }}</label>
diff --git a/apps/desktop/src/app/vault/generator.component.html b/apps/desktop/src/app/vault/generator.component.html
index e1a64ca5d41..adde67630b0 100644
--- a/apps/desktop/src/app/vault/generator.component.html
+++ b/apps/desktop/src/app/vault/generator.component.html
@@ -1,15 +1,10 @@
-<div
-  class="modal fade"
-  role="dialog"
-  aria-modal="true"
-  attr.aria-label="{{ 'generatePassword' | i18n }}"
->
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="generatorTitle">
   <div class="modal-dialog modal-md" role="document">
     <div class="modal-content">
       <div class="modal-body">
-        <div class="modal-title">
+        <h1 class="modal-title" id="generatorTitle">
           {{ "generator" | i18n }}
-        </div>
+        </h1>
         <app-callout
           type="info"
           *ngIf="enforcedPasswordPolicyOptions?.inEffect() && type === 'password'"
@@ -103,7 +98,7 @@
         </div>
         <ng-container *ngIf="type === 'password'">
           <div class="box">
-            <div class="box-header">
+            <h2 class="box-header">
               <button
                 type="button"
                 (click)="toggleOptions()"
@@ -114,7 +109,7 @@
                 <i class="bwi bwi-minus-square" aria-hidden="true" [hidden]="!showOptions"></i>
                 {{ "options" | i18n }}
               </button>
-            </div>
+            </h2>
             <div class="box-content condensed" [hidden]="!showOptions">
               <div
                 class="box-content-row box-content-row-radio"
@@ -303,7 +298,7 @@
         </ng-container>
         <ng-container *ngIf="type === 'username'">
           <div class="box">
-            <div class="box-header">
+            <h2 class="box-header">
               <button
                 type="button"
                 (click)="toggleOptions()"
@@ -314,7 +309,7 @@
                 <i class="bwi bwi-minus-square" aria-hidden="true" [hidden]="!showOptions"></i>
                 {{ "options" | i18n }}
               </button>
-            </div>
+            </h2>
             <div class="box-content condensed" [hidden]="!showOptions">
               <div
                 class="box-content-row box-content-row-radio"
diff --git a/apps/desktop/src/app/vault/password-generator-history.component.html b/apps/desktop/src/app/vault/password-generator-history.component.html
index 8bef68a689f..6a8dfd909ef 100644
--- a/apps/desktop/src/app/vault/password-generator-history.component.html
+++ b/apps/desktop/src/app/vault/password-generator-history.component.html
@@ -3,9 +3,9 @@
     <div class="modal-content">
       <div class="modal-body">
         <div class="box">
-          <div class="box-header" id="passwordGenHistoryTitle">
+          <h1 class="box-header" id="passwordGenHistoryTitle">
             {{ "passwordHistory" | i18n }}
-          </div>
+          </h1>
           <div class="box-content condensed">
             <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
               <div class="row-main">
diff --git a/apps/desktop/src/app/vault/password-history.component.html b/apps/desktop/src/app/vault/password-history.component.html
index 633cee14c78..49493273c16 100644
--- a/apps/desktop/src/app/vault/password-history.component.html
+++ b/apps/desktop/src/app/vault/password-history.component.html
@@ -3,9 +3,9 @@
     <div class="modal-content">
       <div class="modal-body">
         <div class="box">
-          <div class="box-header" id="passwordHistoryTitle">
+          <h1 class="box-header" id="passwordHistoryTitle">
             {{ "passwordHistory" | i18n }}
-          </div>
+          </h1>
           <div class="box-content condensed">
             <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
               <div class="row-main">
diff --git a/apps/desktop/src/app/vault/share.component.html b/apps/desktop/src/app/vault/share.component.html
index 0f78ae87e40..f80c3b48296 100644
--- a/apps/desktop/src/app/vault/share.component.html
+++ b/apps/desktop/src/app/vault/share.component.html
@@ -3,9 +3,9 @@
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-body">
         <div class="box">
-          <div class="box-header" id="moveToOrgTitle">
+          <h1 class="box-header" id="moveToOrgTitle">
             {{ "moveToOrganization" | i18n }}
-          </div>
+          </h1>
           <div class="box-content" *ngIf="!organizations || !organizations.length">
             <div class="box-content-row">
               {{ "noOrganizationsList" | i18n }}
@@ -29,9 +29,9 @@
           </div>
         </div>
         <div class="box" *ngIf="organizations && organizations.length">
-          <div class="box-header">
+          <h2 class="box-header">
             {{ "collections" | i18n }}
-          </div>
+          </h2>
           <div class="box-content" *ngIf="!collections || !collections.length">
             {{ "noCollectionsInList" | i18n }}
           </div>
diff --git a/apps/desktop/src/app/vault/view-custom-fields.component.html b/apps/desktop/src/app/vault/view-custom-fields.component.html
index d1980048eb4..598c4c0f8dd 100644
--- a/apps/desktop/src/app/vault/view-custom-fields.component.html
+++ b/apps/desktop/src/app/vault/view-custom-fields.component.html
@@ -1,7 +1,7 @@
 <div class="box">
-  <div class="box-header">
+  <h2 class="box-header">
     {{ "customFields" | i18n }}
-  </div>
+  </h2>
   <div class="box-content">
     <div class="box-content-row box-content-row-flex" *ngFor="let field of cipher.fields">
       <div class="row-main">
diff --git a/apps/desktop/src/app/vault/view.component.html b/apps/desktop/src/app/vault/view.component.html
index 5038e4b984b..3d613736235 100644
--- a/apps/desktop/src/app/vault/view.component.html
+++ b/apps/desktop/src/app/vault/view.component.html
@@ -1,9 +1,9 @@
 <div class="content">
   <div class="inner-content" *ngIf="cipher">
     <div class="box">
-      <div class="box-header">
+      <h2 class="box-header">
         {{ "itemInformation" | i18n }}
-      </div>
+      </h2>
       <div class="box-content">
         <div class="box-content-row">
           <span class="row-label">{{ "name" | i18n }}</span>
@@ -321,9 +321,9 @@
       </div>
     </div>
     <div class="box" *ngIf="cipher.notes">
-      <div class="box-header">
+      <h2 class="box-header">
         {{ "notes" | i18n }}
-      </div>
+      </h2>
       <div class="box-content">
         <div class="box-content-row pre-wrap">{{ cipher.notes }}</div>
       </div>
@@ -336,9 +336,9 @@
     >
     </app-vault-view-custom-fields>
     <div class="box" *ngIf="cipher.hasAttachments && (canAccessPremium || cipher.organizationId)">
-      <div class="box-header">
+      <h2 class="box-header">
         {{ "attachments" | i18n }}
-      </div>
+      </h2>
       <div class="box-content">
         <button
           type="button"
diff --git a/apps/desktop/src/scss/base.scss b/apps/desktop/src/scss/base.scss
index 9d667ac602d..0c891784fff 100644
--- a/apps/desktop/src/scss/base.scss
+++ b/apps/desktop/src/scss/base.scss
@@ -31,10 +31,8 @@ h4,
 h5,
 h6 {
   font-family: $font-family-sans-serif;
-
-  @include themify($themes) {
-    color: themed("textColor");
-  }
+  font-size: $font-size-base;
+  font-weight: normal;
 }
 
 p {