Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-22 11:45:59 +01:00
Code Issues Projects Releases Wiki Activity

[PS-1307] Desktop: Change box-headers from <div> to semantic headings (#3313)

Browse Source 
* 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`
This commit is contained in:
Patrick H. Lauke 2022-08-18 10:28:37 +01:00 committed by GitHub
parent e59f635d32
commit 89b69f4bc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 73 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/desktop/src/app/accounts/delete-account.component.html
View File

@ -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"> <div class="modal-dialog" role="document">
<form <form
class="modal-content" class="modal-content"
@ -13,7 +13,9 @@
{{ "deleteAccountWarning" | i18n }} {{ "deleteAccountWarning" | i18n }}
</app-callout> </app-callout>
<div class="box last"> <div class="box last">
<div class="box-header">{{ "deleteAccount" | i18n }}</div> <h1 class="box-header" id="deleteAccountTitle">
{{ "deleteAccount" | i18n }}
</h1>
<div class="box-content"> <div class="box-content">
<app-user-verification <app-user-verification
ngDefaultControl ngDefaultControl

10
apps/desktop/src/app/accounts/environment.component.html
View File

@ -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"> <div class="modal-dialog" role="document">
<form class="modal-content" (ngSubmit)="submit()"> <form class="modal-content" (ngSubmit)="submit()">
<div class="modal-body"> <div class="modal-body">
<div class="box"> <div class="box">
<div class="box-header"> <h1 class="box-header" id="selfHosteEnvironmentTitle">
{{ "selfHostedEnvironment" | i18n }} {{ "selfHostedEnvironment" | i18n }}
</div> </h1>
<div class="box-content"> <div class="box-content">
<div class="box-content-row" appBoxRow> <div class="box-content-row" appBoxRow>
<label for="baseUrl">{{ "baseUrl" | i18n }}</label> <label for="baseUrl">{{ "baseUrl" | i18n }}</label>
@ -24,13 +24,13 @@
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<div class="box-header"> <h2 class="box-header">
<button type="button" (click)="toggleCustom()" [attr.aria-expanded]="showCustom"> <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-plus-square" [hidden]="showCustom" aria-hidden="true"></i>
<i class="bwi bwi-minus-square" [hidden]="!showCustom" aria-hidden="true"></i> <i class="bwi bwi-minus-square" [hidden]="!showCustom" aria-hidden="true"></i>
{{ "customEnvironment" | i18n }} {{ "customEnvironment" | i18n }}
</button> </button>
</div> </h2>
<div class="box-content" [hidden]="!showCustom"> <div class="box-content" [hidden]="!showCustom">
<div class="box-content-row" appBoxRow> <div class="box-content-row" appBoxRow>
<label for="webVaultUrl">{{ "webVaultUrl" | i18n }}</label> <label for="webVaultUrl">{{ "webVaultUrl" | i18n }}</label>

4
apps/desktop/src/app/accounts/premium.component.html
View File

@ -3,9 +3,9 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-body"> <div class="modal-body">
<div class="box"> <div class="box">
<div class="box-header" id="premiumTitle"> <h1 class="box-header" id="premiumTitle">
{{ "premiumMembership" | i18n }} {{ "premiumMembership" | i18n }}
</div> </h1>
<div class="box-content box-content-padded"> <div class="box-content box-content-padded">
<div *ngIf="!isPremium"> <div *ngIf="!isPremium">
<p class="text-center lead">{{ "premiumNotCurrentMember" | i18n }}</p> <p class="text-center lead">{{ "premiumNotCurrentMember" | i18n }}</p>

6
apps/desktop/src/app/accounts/settings.component.html
View File

@ -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-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-body form"> <div class="modal-body form">
<div class="box"> <div class="box">
<div class="box-header"> <h1 class="box-header" id="settingsTitle">
{{ "settingsTitle" | i18n: currentUserEmail }} {{ "settingsTitle" | i18n: currentUserEmail }}
</div> </h1>
<div class="box-content box-content-padded"> <div class="box-content box-content-padded">
<h2> <h2>
<button <button

4
apps/desktop/src/app/accounts/two-factor-options.component.html
View File

@ -3,9 +3,9 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-body"> <div class="modal-body">
<div class="box"> <div class="box">
<div class="box-header" id="twoStepTitle"> <h1 class="box-header" id="twoStepTitle">
{{ "twoStepOptions" | i18n }} {{ "twoStepOptions" | i18n }}
</div> </h1>
<div class="box-content"> <div class="box-content">
<button <button
type="button" type="button"

6
apps/desktop/src/app/components/password-reprompt.component.html
View File

@ -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"> <div class="modal-dialog modal-dialog-scrollable" role="document">
<form class="modal-content" #form (ngSubmit)="submit()"> <form class="modal-content" #form (ngSubmit)="submit()">
<div class="modal-body"> <div class="modal-body">
<div class="box"> <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">
<div class="box-content-row box-content-row-flex" appBoxRow> <div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main"> <div class="row-main">

16
apps/desktop/src/app/send/add-edit.component.html
View File

@ -10,9 +10,9 @@
</app-callout> </app-callout>
</div> </div>
<div class="box"> <div class="box">
<div class="box-header"> <h2 class="box-header">
{{ title }} {{ title }}
</div> </h2>
<div class="box-content"> <div class="box-content">
<div class="box-content-row" appBoxRow> <div class="box-content-row" appBoxRow>
<label for="name">{{ "name" | i18n }}</label> <label for="name">{{ "name" | i18n }}</label>
@ -92,7 +92,7 @@
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<div class="box-header"> <h2 class="box-header">
<button <button
type="button" type="button"
class="toggle" class="toggle"
@ -107,7 +107,7 @@
[ngClass]="{ 'bwi-angle-down': !showOptions, 'bwi-chevron-up': showOptions }" [ngClass]="{ 'bwi-angle-down': !showOptions, 'bwi-chevron-up': showOptions }"
></i> ></i>
</button> </button>
</div> </h2>
</div> </div>
<div [hidden]="!showOptions"> <div [hidden]="!showOptions">
<app-send-efflux-dates <app-send-efflux-dates
@ -179,9 +179,9 @@
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<div class="box-header"> <h2 class="box-header">
{{ "notes" | i18n }} {{ "notes" | i18n }}
</div> </h2>
<div class="box-content"> <div class="box-content">
<div class="box-content-row" appBoxRow> <div class="box-content-row" appBoxRow>
<textarea <textarea
@ -227,9 +227,9 @@
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<div class="box-header"> <h2 class="box-header">
{{ "share" | i18n }} {{ "share" | i18n }}
</div> </h2>
<div class="box-content"> <div class="box-content">
<div class="box-content-row" appBoxRow *ngIf="editMode"> <div class="box-content-row" appBoxRow *ngIf="editMode">
<label for="link">{{ "sendLinkLabel" | i18n }}</label> <label for="link">{{ "sendLinkLabel" | i18n }}</label>

4
apps/desktop/src/app/vault/add-edit-custom-fields.component.html
View File

@ -1,7 +1,7 @@
<div class="box"> <div class="box">
<div class="box-header"> <h2 class="box-header">
{{ "customFields" | i18n }} {{ "customFields" | i18n }}
</div> </h2>
<div class="box-content"> <div class="box-content">
<div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields"> <div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
<div <div

16
apps/desktop/src/app/vault/add-edit.component.html
View File

@ -5,9 +5,9 @@
<app-callout type="info" *ngIf="allowOwnershipOptions() && !allowPersonal"> <app-callout type="info" *ngIf="allowOwnershipOptions() && !allowPersonal">
{{ "personalOwnershipPolicyInEffect" | i18n }} {{ "personalOwnershipPolicyInEffect" | i18n }}
</app-callout> </app-callout>
<div class="box-header"> <h2 class="box-header">
{{ title }} {{ title }}
</div> </h2>
<div class="box-content"> <div class="box-content">
<div class="box-content-row" *ngIf="!editMode" appBoxRow> <div class="box-content-row" *ngIf="!editMode" appBoxRow>
<label for="type">{{ "type" | i18n }}</label> <label for="type">{{ "type" | i18n }}</label>
@ -504,9 +504,9 @@
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<div class="box-header"> <h2 class="box-header">
<label for="notes">{{ "notes" | i18n }}</label> <label for="notes">{{ "notes" | i18n }}</label>
</div> </h2>
<div class="box-content"> <div class="box-content">
<div class="box-content-row" appBoxRow> <div class="box-content-row" appBoxRow>
<textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"></textarea> <textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"></textarea>
@ -520,9 +520,9 @@
> >
</app-vault-add-edit-custom-fields> </app-vault-add-edit-custom-fields>
<div class="box" *ngIf="allowOwnershipOptions()"> <div class="box" *ngIf="allowOwnershipOptions()">
<div class="box-header"> <h2 class="box-header">
{{ "ownership" | i18n }} {{ "ownership" | i18n }}
</div> </h2>
<div class="box-content"> <div class="box-content">
<div class="box-content-row" appBoxRow> <div class="box-content-row" appBoxRow>
<label for="organizationId">{{ "whoOwnsThisItem" | i18n }}</label> <label for="organizationId">{{ "whoOwnsThisItem" | i18n }}</label>
@ -539,9 +539,9 @@
</div> </div>
</div> </div>
<div class="box" *ngIf="(!editMode || cloneMode) && cipher.organizationId"> <div class="box" *ngIf="(!editMode || cloneMode) && cipher.organizationId">
<div class="box-header"> <h2 class="box-header">
{{ "collections" | i18n }} {{ "collections" | i18n }}
</div> </h2>
<div class="box-content" *ngIf="!collections || !collections.length"> <div class="box-content" *ngIf="!collections || !collections.length">
{{ "noCollectionsInList" | i18n }} {{ "noCollectionsInList" | i18n }}
</div> </div>

8
apps/desktop/src/app/vault/attachments.component.html
View File

@ -3,9 +3,9 @@
<form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise"> <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<div class="modal-body"> <div class="modal-body">
<div class="box" *ngIf="cipher && cipher.hasAttachments"> <div class="box" *ngIf="cipher && cipher.hasAttachments">
<div class="box-header" id="attachmentsTitle"> <h1 class="box-header" id="attachmentsTitle">
{{ "attachments" | i18n }} {{ "attachments" | i18n }}
</div> </h1>
<div class="box-content no-hover"> <div class="box-content no-hover">
<div class="box-content-row box-content-row-flex" *ngFor="let a of cipher.attachments"> <div class="box-content-row box-content-row-flex" *ngFor="let a of cipher.attachments">
<div class="row-main"> <div class="row-main">
@ -39,9 +39,9 @@
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<div class="box-header"> <h2 class="box-header">
{{ "newAttachment" | i18n }} {{ "newAttachment" | i18n }}
</div> </h2>
<div class="box-content no-hover"> <div class="box-content no-hover">
<div class="box-content-row"> <div class="box-content-row">
<label for="file">{{ "file" | i18n }}</label> <label for="file">{{ "file" | i18n }}</label>

4
apps/desktop/src/app/vault/collections.component.html
View File

@ -3,9 +3,9 @@
<form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise"> <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<div class="modal-body"> <div class="modal-body">
<div class="box"> <div class="box">
<div class="box-header" id="collectionsTitle"> <h1 class="box-header" id="collectionsTitle">
{{ "collections" | i18n }} {{ "collections" | i18n }}
</div> </h1>
<div class="box-content" *ngIf="!collections || !collections.length"> <div class="box-content" *ngIf="!collections || !collections.length">
{{ "noCollectionsInList" | i18n }} {{ "noCollectionsInList" | i18n }}
</div> </div>

4
apps/desktop/src/app/vault/export.component.html
View File

@ -11,9 +11,9 @@
</app-callout> </app-callout>
<app-export-scope-callout *ngIf="!disabledByPolicy"></app-export-scope-callout> <app-export-scope-callout *ngIf="!disabledByPolicy"></app-export-scope-callout>
<div class="box"> <div class="box">
<div class="box-header" id="exportTitle"> <h1 class="box-header" id="exportTitle">
{{ "exportVault" | i18n }} {{ "exportVault" | i18n }}
</div> </h1>
<div class="box-content"> <div class="box-content">
<div class="box-content-row" appBoxRow> <div class="box-content-row" appBoxRow>
<label for="format">{{ "fileFormat" | i18n }}</label> <label for="format">{{ "fileFormat" | i18n }}</label>

4
apps/desktop/src/app/vault/folder-add-edit.component.html
View File

@ -3,9 +3,9 @@
<form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise"> <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<div class="modal-body"> <div class="modal-body">
<div class="box"> <div class="box">
<div class="box-header" id="folderAddEditTitle"> <h1 class="box-header" id="folderAddEditTitle">
{{ title }} {{ title }}
</div> </h1>
<div class="box-content"> <div class="box-content">
<div class="box-content-row" appBoxRow> <div class="box-content-row" appBoxRow>
<label for="name">{{ "name" | i18n }}</label> <label for="name">{{ "name" | i18n }}</label>

19
apps/desktop/src/app/vault/generator.component.html
View File

@ -1,15 +1,10 @@
<div <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="generatorTitle">
class="modal fade"
role="dialog"
aria-modal="true"
attr.aria-label="{{ 'generatePassword' | i18n }}"
>
<div class="modal-dialog modal-md" role="document"> <div class="modal-dialog modal-md" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-body"> <div class="modal-body">
<div class="modal-title"> <h1 class="modal-title" id="generatorTitle">
{{ "generator" | i18n }} {{ "generator" | i18n }}
</div> </h1>
<app-callout <app-callout
type="info" type="info"
*ngIf="enforcedPasswordPolicyOptions?.inEffect() && type === 'password'" *ngIf="enforcedPasswordPolicyOptions?.inEffect() && type === 'password'"
@ -103,7 +98,7 @@
</div> </div>
<ng-container *ngIf="type === 'password'"> <ng-container *ngIf="type === 'password'">
<div class="box"> <div class="box">
<div class="box-header"> <h2 class="box-header">
<button <button
type="button" type="button"
(click)="toggleOptions()" (click)="toggleOptions()"
@ -114,7 +109,7 @@
<i class="bwi bwi-minus-square" aria-hidden="true" [hidden]="!showOptions"></i> <i class="bwi bwi-minus-square" aria-hidden="true" [hidden]="!showOptions"></i>
{{ "options" | i18n }} {{ "options" | i18n }}
</button> </button>
</div> </h2>
<div class="box-content condensed" [hidden]="!showOptions"> <div class="box-content condensed" [hidden]="!showOptions">
<div <div
class="box-content-row box-content-row-radio" class="box-content-row box-content-row-radio"
@ -303,7 +298,7 @@
</ng-container> </ng-container>
<ng-container *ngIf="type === 'username'"> <ng-container *ngIf="type === 'username'">
<div class="box"> <div class="box">
<div class="box-header"> <h2 class="box-header">
<button <button
type="button" type="button"
(click)="toggleOptions()" (click)="toggleOptions()"
@ -314,7 +309,7 @@
<i class="bwi bwi-minus-square" aria-hidden="true" [hidden]="!showOptions"></i> <i class="bwi bwi-minus-square" aria-hidden="true" [hidden]="!showOptions"></i>
{{ "options" | i18n }} {{ "options" | i18n }}
</button> </button>
</div> </h2>
<div class="box-content condensed" [hidden]="!showOptions"> <div class="box-content condensed" [hidden]="!showOptions">
<div <div
class="box-content-row box-content-row-radio" class="box-content-row box-content-row-radio"

4
apps/desktop/src/app/vault/password-generator-history.component.html
View File

@ -3,9 +3,9 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-body"> <div class="modal-body">
<div class="box"> <div class="box">
<div class="box-header" id="passwordGenHistoryTitle"> <h1 class="box-header" id="passwordGenHistoryTitle">
{{ "passwordHistory" | i18n }} {{ "passwordHistory" | i18n }}
</div> </h1>
<div class="box-content condensed"> <div class="box-content condensed">
<div class="box-content-row box-content-row-flex" *ngFor="let h of history"> <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
<div class="row-main"> <div class="row-main">

4
apps/desktop/src/app/vault/password-history.component.html
View File

@ -3,9 +3,9 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-body"> <div class="modal-body">
<div class="box"> <div class="box">
<div class="box-header" id="passwordHistoryTitle"> <h1 class="box-header" id="passwordHistoryTitle">
{{ "passwordHistory" | i18n }} {{ "passwordHistory" | i18n }}
</div> </h1>
<div class="box-content condensed"> <div class="box-content condensed">
<div class="box-content-row box-content-row-flex" *ngFor="let h of history"> <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
<div class="row-main"> <div class="row-main">

8
apps/desktop/src/app/vault/share.component.html
View File

@ -3,9 +3,9 @@
<form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise"> <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<div class="modal-body"> <div class="modal-body">
<div class="box"> <div class="box">
<div class="box-header" id="moveToOrgTitle"> <h1 class="box-header" id="moveToOrgTitle">
{{ "moveToOrganization" | i18n }} {{ "moveToOrganization" | i18n }}
</div> </h1>
<div class="box-content" *ngIf="!organizations || !organizations.length"> <div class="box-content" *ngIf="!organizations || !organizations.length">
<div class="box-content-row"> <div class="box-content-row">
{{ "noOrganizationsList" | i18n }} {{ "noOrganizationsList" | i18n }}
@ -29,9 +29,9 @@
</div> </div>
</div> </div>
<div class="box" *ngIf="organizations && organizations.length"> <div class="box" *ngIf="organizations && organizations.length">
<div class="box-header"> <h2 class="box-header">
{{ "collections" | i18n }} {{ "collections" | i18n }}
</div> </h2>
<div class="box-content" *ngIf="!collections || !collections.length"> <div class="box-content" *ngIf="!collections || !collections.length">
{{ "noCollectionsInList" | i18n }} {{ "noCollectionsInList" | i18n }}
</div> </div>

4
apps/desktop/src/app/vault/view-custom-fields.component.html
View File

@ -1,7 +1,7 @@
<div class="box"> <div class="box">
<div class="box-header"> <h2 class="box-header">
{{ "customFields" | i18n }} {{ "customFields" | i18n }}
</div> </h2>
<div class="box-content"> <div class="box-content">
<div class="box-content-row box-content-row-flex" *ngFor="let field of cipher.fields"> <div class="box-content-row box-content-row-flex" *ngFor="let field of cipher.fields">
<div class="row-main"> <div class="row-main">

12
apps/desktop/src/app/vault/view.component.html
View File

@ -1,9 +1,9 @@
<div class="content"> <div class="content">
<div class="inner-content" *ngIf="cipher"> <div class="inner-content" *ngIf="cipher">
<div class="box"> <div class="box">
<div class="box-header"> <h2 class="box-header">
{{ "itemInformation" | i18n }} {{ "itemInformation" | i18n }}
</div> </h2>
<div class="box-content"> <div class="box-content">
<div class="box-content-row"> <div class="box-content-row">
<span class="row-label">{{ "name" | i18n }}</span> <span class="row-label">{{ "name" | i18n }}</span>
@ -321,9 +321,9 @@
</div> </div>
</div> </div>
<div class="box" *ngIf="cipher.notes"> <div class="box" *ngIf="cipher.notes">
<div class="box-header"> <h2 class="box-header">
{{ "notes" | i18n }} {{ "notes" | i18n }}
</div> </h2>
<div class="box-content"> <div class="box-content">
<div class="box-content-row pre-wrap">{{ cipher.notes }}</div> <div class="box-content-row pre-wrap">{{ cipher.notes }}</div>
</div> </div>
@ -336,9 +336,9 @@
> >
</app-vault-view-custom-fields> </app-vault-view-custom-fields>
<div class="box" *ngIf="cipher.hasAttachments && (canAccessPremium || cipher.organizationId)"> <div class="box" *ngIf="cipher.hasAttachments && (canAccessPremium || cipher.organizationId)">
<div class="box-header"> <h2 class="box-header">
{{ "attachments" | i18n }} {{ "attachments" | i18n }}
</div> </h2>
<div class="box-content"> <div class="box-content">
<button <button
type="button" type="button"

6
apps/desktop/src/scss/base.scss
View File

@ -31,10 +31,8 @@ h4,
h5, h5,
h6 { h6 {
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
font-size: $font-size-base;
@include themify($themes) { font-weight: normal;
color: themed("textColor");
}
} }
p { p {