vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[PS-497] Change `<content>` to `<main>`, make it explicitly non-focusable (#2245) 

* Make <content> element explicitly non-focusable

Some browsers (Firefox, upcoming versions of Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=585413) make containers with `overflow: auto` / `overflow: scroll` (and the `-x` / `-y` variants) keyboard-focusable. This leads to a very awkward experience for assistive technology users navigating through the extension window, as for every view, the entire `<content>` container receives focus (and screen readers try to announce all its content in one go) before you reach the actual first control. To counteract this behaviour, this adds an explicit `tabindex="-1"` to these elements.

* Change `<content>` to `<main>`

More semantically accurate. See https://github.com/bitwarden/browser/pull/2245#issuecomment-1104553312

* Update scss to target `main` instead of `content`

* Change the previously existing `<main>` to generic `<div>`, tweak styles accordingly

Can't have two separate `<main>` elements, especially not nested ones. The original `<main>` was really just a handy wrapper for the component, but semantically should be neutral
This commit is contained in:
Patrick H. Lauke 2022-04-29 01:06:33 +01:00 committed by GitHub
parent 9df22d3601
commit 7b12868c70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 76 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/popup/accounts/environment.component.html
View File

@ -13,7 +13,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="box">
<h2 class="box-header">
{{ "selfHostedEnvironment" | i18n }}
@ -100,5 +100,5 @@
{{ "customEnvironmentFooter" | i18n }}
</div>
</div>
</content>
</main>
</form>

4
src/popup/accounts/hint.component.html
View File

@ -13,7 +13,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
@ -34,5 +34,5 @@
{{ "enterEmailToGetHint" | i18n }}
</div>
</div>
</content>
</main>
</form>

4
src/popup/accounts/lock.component.html
View File

@ -8,7 +8,7 @@
<button type="submit" appBlurClick *ngIf="!hideInput">{{ "unlock" | i18n }}</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-flex" appBoxRow *ngIf="!hideInput">
@ -81,5 +81,5 @@
<p class="text-center text-muted" *ngIf="pendingBiometric">
<i class="bwi bwi-spinner bwi-spin" aria-hidden="true"></i> {{ "awaitDesktop" | i18n }}
</p>
</content>
</main>
</form>

4
src/popup/accounts/login.component.html
View File

@ -13,7 +13,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
@ -68,5 +68,5 @@
<a routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
</p>
<app-private-mode-warning></app-private-mode-warning>
</content>
</main>
</form>

4
src/popup/accounts/register.component.html
View File

@ -13,7 +13,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
@ -156,5 +156,5 @@
</div>
</div>
</div>
</content>
</main>
</form>

4
src/popup/accounts/remove-password.component.html
View File

@ -6,7 +6,7 @@
<div class="right"></div>
</header>
<content>
<main tabindex="-1">
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
@ -46,4 +46,4 @@
</div>
</div>
</div>
</content>
</main>

4
src/popup/accounts/set-password.component.html
View File

@ -13,7 +13,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="full-loading-spinner" *ngIf="syncLoading">
<i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
</div>
@ -144,5 +144,5 @@
</div>
</div>
</div>
</content>
</main>
</form>

4
src/popup/accounts/two-factor-options.component.html
View File

@ -7,7 +7,7 @@
</h1>
<div class="right"></div>
</header>
<content>
<main tabindex="-1">
<div class="box">
<div class="box-content">
<button
@ -26,4 +26,4 @@
</button>
</div>
</div>
</content>
</main>

4
src/popup/accounts/two-factor.component.html
View File

@ -23,7 +23,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<ng-container
*ngIf="
selectedProviderType === providerType.Authenticator ||
@ -140,5 +140,5 @@
</button>
</p>
</div>
</content>
</main>
</form>

4
src/popup/accounts/update-temp-password.component.html
View File

@ -13,7 +13,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<app-callout type="warning" title="{{ 'updateMasterPassword' | i18n }}">
{{ "updateMasterPasswordWarning" | i18n }}
</app-callout>
@ -126,5 +126,5 @@
{{ "masterPassHintDesc" | i18n }}
</div>
</div>
</content>
</main>
</form>

4
src/popup/app.component.ts
View File

@ -19,9 +19,9 @@ import { routerTransition } from "./app-routing.animations";
selector: "app-root",
styles: [],
animations: [routerTransition],
template: ` <main [@routerTransition]="getState(o)">
template: ` <div [@routerTransition]="getState(o)">
<router-outlet #o="outlet"></router-outlet>
</main>`,
</div>`,
})
export class AppComponent implements OnInit {
private lastActivity: number = null;

4
src/popup/generator/generator.component.html
View File

@ -14,7 +14,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<app-callout type="info" *ngIf="enforcedPasswordPolicyOptions?.inEffect() && type === 'password'">
{{ "passwordGeneratorPolicyInEffect" | i18n }}
</app-callout>
@ -453,4 +453,4 @@
</div>
</div>
</ng-container>
</content>
</main>

4
src/popup/generator/password-generator-history.component.html
View File

@ -14,7 +14,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="box list full-list" *ngIf="history && history.length">
<div class="box-content">
<div class="box-content-row box-content-row-flex" *ngFor="let h of history">
@ -45,4 +45,4 @@
<div class="no-items" *ngIf="!history || !history.length">
<p>{{ "noPasswordsInList" | i18n }}</p>
</div>
</content>
</main>

18
src/popup/scss/base.scss
View File

@ -107,17 +107,17 @@ textarea {
resize: vertical;
}
main {
app-root > div {
height: 100%;
}
content::-webkit-scrollbar,
main::-webkit-scrollbar,
cdk-virtual-scroll-viewport::-webkit-scrollbar {
width: 10px;
height: 10px;
}
content::-webkit-scrollbar-track {
main::-webkit-scrollbar-track {
background-color: transparent;
}
@ -127,7 +127,7 @@ cdk-virtual-scroll-viewport::-webkit-scrollbar-track {
}
}
content::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb,
cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb {
border-radius: 10px;
margin-right: 1px;
@ -373,7 +373,7 @@ app-root {
padding: 0 calc((100% - 500px) / 2);
}
app-login content {
app-login main {
padding: 0 calc((100% - 500px) / 2);
}
@ -381,7 +381,7 @@ app-root {
padding: 0 calc((100% - 500px) / 2);
}
app-two-factor content {
app-two-factor main {
padding: 0 calc((100% - 500px) / 2);
}
@ -389,12 +389,12 @@ app-root {
padding: 0 calc((100% - 500px) / 2);
}
app-lock content {
app-lock main {
padding: 0 calc((100% - 500px) / 2);
}
}
content {
main {
position: absolute;
top: 44px;
bottom: 0;
@ -423,7 +423,7 @@ content {
}
.tab-page {
content {
main {
bottom: 55px;
}
}

2
src/popup/scss/pages.scss
View File

@ -1,7 +1,7 @@
@import "variables.scss";
app-sync {
content {
main {
.btn {
margin-bottom: 10px;
}

4
src/popup/send/send-add-edit.component.html
View File

@ -13,7 +13,7 @@
</button>
</div>
</header>
<content *ngIf="send">
<main tabindex="-1" *ngIf="send">
<!-- Policy Banner -->
<app-callout type="warning" title="{{ 'sendDisabled' | i18n }}" *ngIf="disableSend">
{{ "sendDisabledWarning" | i18n }}
@ -315,5 +315,5 @@
</button>
</div>
</div>
</content>
</main>
</form>

4
src/popup/send/send-groupings.component.html
View File

@ -27,7 +27,7 @@
</button>
</div>
</header>
<content [ngClass]="{ flex: disableSend, 'tab-page': disableSend }">
<main tabindex="-1" [ngClass]="{ flex: disableSend, 'tab-page': disableSend }">
<app-callout type="warning" title="{{ 'sendDisabled' | i18n }}" *ngIf="disableSend">
{{ "sendDisabledWarning" | i18n }}
</app-callout>
@ -119,4 +119,4 @@
</div>
</div>
</ng-container>
</content>
</main>

4
src/popup/send/send-type.component.html
View File

@ -30,7 +30,7 @@
</button>
</div>
</header>
<content [ngClass]="{ flex: disableSend }">
<main tabindex="-1" [ngClass]="{ flex: disableSend }">
<app-callout type="warning" title="{{ 'sendDisabled' | i18n }}" *ngIf="disableSend">
{{ "sendDisabledWarning" | i18n }}
</app-callout>
@ -66,4 +66,4 @@
</app-send-list>
</div>
</div>
</content>
</main>

4
src/popup/settings/excluded-domains.component.html
View File

@ -13,7 +13,7 @@
<button type="submit" appBlurClick>{{ "save" | i18n }}</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="box">
<div class="box-content">
<ng-container *ngIf="excludedDomains">
@ -84,5 +84,5 @@
{{ "excludedDomainsDesc" | i18n }}
</div>
</div>
</content>
</main>
</form>

4
src/popup/settings/export.component.html
View File

@ -15,7 +15,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<app-callout type="warning" title="{{ 'vaultExportDisabled' | i18n }}" *ngIf="disabledByPolicy">
{{ "personalVaultExportPolicyInEffect" | i18n }}
</app-callout>
@ -36,5 +36,5 @@
<p>{{ "confirmIdentity" | i18n }}</p>
</div>
</div>
</content>
</main>
</form>

4
src/popup/settings/folder-add-edit.component.html
View File

@ -13,7 +13,7 @@
</button>
</div>
</header>
<content *ngIf="folder">
<main tabindex="-1" *ngIf="folder">
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
@ -49,5 +49,5 @@
</button>
</div>
</div>
</content>
</main>
</form>

4
src/popup/settings/folders.component.html
View File

@ -19,7 +19,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="box list full-list" *ngIf="folders && folders.length">
<div class="box-content">
<button
@ -36,4 +36,4 @@
<div class="no-items" *ngIf="!folders || !folders.length">
<p>{{ "noFolders" | i18n }}</p>
</div>
</content>
</main>

4
src/popup/settings/options.component.html
View File

@ -10,7 +10,7 @@
</h1>
<div class="right"></div>
</header>
<content>
<main tabindex="-1">
<div class="box">
<h2>
<button
@ -255,4 +255,4 @@
<div class="box-footer">{{ "defaultAutoFillOnPageLoadDesc" | i18n }}</div>
</div>
</ng-container>
</content>
</main>

4
src/popup/settings/premium.component.html
View File

@ -10,7 +10,7 @@
</h1>
<div class="right"></div>
</header>
<content>
<main tabindex="-1">
<div class="content">
<ng-container *ngIf="!isPremium">
<p class="text-center lead">{{ "premiumNotCurrentMember" | i18n }}</p>
@ -70,4 +70,4 @@
</button>
</ng-container>
</div>
</content>
</main>

4
src/popup/settings/settings.component.html
View File

@ -7,7 +7,7 @@
</h1>
<div class="right"></div>
</header>
<content>
<main tabindex="-1">
<div class="box list">
<h2 class="box-header">{{ "manage" | i18n }}</h2>
<div class="box-content single-line">
@ -223,4 +223,4 @@
</div>
<div class="box-footer">{{ "rateExtensionDesc" | i18n }}</div>
</div>
</content>
</main>

4
src/popup/settings/sync.component.html
View File

@ -10,7 +10,7 @@
</h1>
<div class="right"></div>
</header>
<content>
<main tabindex="-1">
<div class="content center-content">
<button
type="button"
@ -25,4 +25,4 @@
</button>
<p class="text-center text-muted small">{{ "lastSync" | i18n }} {{ lastSync }}</p>
</div>
</content>
</main>

4
src/popup/vault/add-edit.component.html
View File

@ -13,7 +13,7 @@
</button>
</div>
</header>
<content *ngIf="cipher">
<main tabindex="-1" *ngIf="cipher">
<app-callout type="info" *ngIf="allowOwnershipOptions() && !allowPersonal">
{{ "personalOwnershipPolicyInEffect" | i18n }}
</app-callout>
@ -656,5 +656,5 @@
</button>
</div>
</div>
</content>
</main>
</form>

4
src/popup/vault/attachments.component.html
View File

@ -19,7 +19,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="box" *ngIf="cipher && cipher.hasAttachments">
<div class="box-content no-hover">
<div class="box-content-row box-content-row-flex" *ngFor="let a of cipher.attachments">
@ -69,5 +69,5 @@
{{ "maxFileSize" | i18n }}
</div>
</div>
</content>
</main>
</form>

4
src/popup/vault/ciphers.component.html
View File

@ -24,7 +24,7 @@
</button>
</div>
</header>
<content [ngClass]="{ 'stacked-boxes': showGroupings() }">
<main tabindex="-1" [ngClass]="{ 'stacked-boxes': showGroupings() }">
<ng-container *ngIf="showGroupings()">
<div class="box list" *ngIf="nestedFolders && nestedFolders.length">
<h2 class="box-header">
@ -108,4 +108,4 @@
</div>
</cdk-virtual-scroll-viewport>
</ng-container>
</content>
</main>

4
src/popup/vault/collections.component.html
View File

@ -16,7 +16,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="box">
<div class="box-content" *ngIf="!collections || !collections.length">
<div class="box-content-row padded no-hover">
@ -39,5 +39,5 @@
</div>
</div>
</div>
</content>
</main>
</form>

4
src/popup/vault/current-tab.component.html
View File

@ -30,7 +30,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="no-items" *ngIf="!loaded">
<i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
</div>
@ -91,4 +91,4 @@
</div>
</div>
</ng-container>
</content>
</main>

4
src/popup/vault/groupings.component.html
View File

@ -22,7 +22,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="no-items" *ngIf="(!ciphers || !ciphers.length) && !showSearching()">
<i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded"></i>
<ng-container *ngIf="loaded">
@ -227,4 +227,4 @@
</div>
</cdk-virtual-scroll-viewport>
</ng-container>
</content>
</main>

4
src/popup/vault/password-history.component.html
View File

@ -7,7 +7,7 @@
</h1>
<div class="right"></div>
</header>
<content>
<main tabindex="-1">
<div class="box list full-list" *ngIf="history && history.length">
<div class="box-content">
<div class="box-content-row box-content-row-flex" *ngFor="let h of history">
@ -36,4 +36,4 @@
<div class="no-items" *ngIf="!history || !history.length">
<p>{{ "noPasswordsInList" | i18n }}</p>
</div>
</content>
</main>

4
src/popup/vault/share.component.html
View File

@ -18,7 +18,7 @@
</button>
</div>
</header>
<content>
<main tabindex="-1">
<div class="box">
<div class="box-content" *ngIf="!organizations || !organizations.length">
<div class="box-content-row padded no-hover">
@ -67,5 +67,5 @@
</div>
</div>
</div>
</content>
</main>
</form>

4
src/popup/vault/view.component.html
View File

@ -11,7 +11,7 @@
</button>
</div>
</header>
<content *ngIf="cipher">
<main tabindex="-1" *ngIf="cipher">
<div class="box">
<h2 class="box-header">
{{ "itemInformation" | i18n }}
@ -521,4 +521,4 @@
</div>
</div>
</div>
</content>
</main>