[PM-12718] Vault item - keyboard focus (#11338)
* refactor vault-list-item to be a button so it is keyboard accessible - an anchor tag without an `href` isn't included in the tab order * allow bit-item-content focus state to be visible - cdk-virtual-scroll-viewport applied certain styles that hid overflow. Because each bit-item-group isn't a scroll container for vault items, these should be safe to alter.
This commit is contained in:
parent
6e7c83305e
commit
f2339b0586
|
@ -17,10 +17,14 @@
|
||||||
{{ description }}
|
{{ description }}
|
||||||
</div>
|
</div>
|
||||||
<bit-item-group>
|
<bit-item-group>
|
||||||
<cdk-virtual-scroll-viewport [itemSize]="ItemHeight">
|
<cdk-virtual-scroll-viewport
|
||||||
|
[itemSize]="ItemHeight"
|
||||||
|
class="tw-overflow-visible [&>.cdk-virtual-scroll-content-wrapper]:[contain:layout_style]"
|
||||||
|
>
|
||||||
<bit-item *cdkVirtualFor="let cipher of ciphers">
|
<bit-item *cdkVirtualFor="let cipher of ciphers">
|
||||||
<a
|
<button
|
||||||
bit-item-content
|
bit-item-content
|
||||||
|
type="button"
|
||||||
(click)="onViewCipher(cipher)"
|
(click)="onViewCipher(cipher)"
|
||||||
[appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
|
[appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
|
||||||
class="{{ ItemHeightClass }}"
|
class="{{ ItemHeightClass }}"
|
||||||
|
@ -40,7 +44,7 @@
|
||||||
[appA11yTitle]="'attachments' | i18n"
|
[appA11yTitle]="'attachments' | i18n"
|
||||||
></i>
|
></i>
|
||||||
<span slot="secondary">{{ cipher.subTitle }}</span>
|
<span slot="secondary">{{ cipher.subTitle }}</span>
|
||||||
</a>
|
</button>
|
||||||
<ng-container slot="end">
|
<ng-container slot="end">
|
||||||
<bit-item-action *ngIf="showAutofillButton">
|
<bit-item-action *ngIf="showAutofillButton">
|
||||||
<button
|
<button
|
||||||
|
|
Loading…
Reference in New Issue