mirror of
https://github.com/bitwarden/browser
synced 2026-02-16 16:59:30 +00:00
7b12868c70
* 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
40 lines
1.2 KiB
HTML
40 lines
1.2 KiB
HTML
<header>
|
|
<div class="left">
|
|
<button type="button" appBlurClick (click)="close()">{{ "close" | i18n }}</button>
|
|
</div>
|
|
<h1 class="center">
|
|
<span class="title">{{ "passwordHistory" | i18n }}</span>
|
|
</h1>
|
|
<div class="right"></div>
|
|
</header>
|
|
<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">
|
|
<div class="row-main">
|
|
<div class="row-main-content">
|
|
<span class="text monospaced no-ellipsis">
|
|
{{ h.password }}
|
|
</span>
|
|
<span class="detail">{{ h.lastUsedDate | date: "medium" }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="action-buttons">
|
|
<button
|
|
type="button"
|
|
class="row-btn"
|
|
appStopClick
|
|
appA11yTitle="{{ 'copyPassword' | i18n }}"
|
|
(click)="copy(h.password)"
|
|
>
|
|
<i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="no-items" *ngIf="!history || !history.length">
|
|
<p>{{ "noPasswordsInList" | i18n }}</p>
|
|
</div>
|
|
</main>
|