bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 16:53:34 +00:00
Code Issues Releases Wiki Activity

[CL-768] Fix small a11y errors in storybook stories (#15826)

Browse Source
This commit is contained in:
Vicki League
2025-07-29 14:29:37 -04:00
committed by GitHub
parent 9c1bc57418
commit 6a2d8ee294
8 changed files with 73 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
libs/components/src/popover/popover.stories.ts
View File

@@ -4,6 +4,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
import { ButtonModule } from "../button";
import { IconButtonModule } from "../icon-button";
import { LinkModule } from "../link";
import { SharedModule } from "../shared/shared.module";
import { I18nMockService } from "../utils/i18n-mock.service";
@@ -14,7 +15,7 @@ export default {
title: "Component Library/Popover",
decorators: [
moduleMetadata({
imports: [PopoverModule, ButtonModule, IconButtonModule, SharedModule],
imports: [PopoverModule, ButtonModule, IconButtonModule, SharedModule, LinkModule],
providers: [
{
provide: I18nService,
@@ -59,13 +60,13 @@ export default {
type Story = StoryObj<PopoverTriggerForDirective>;
const popoverContent = `
const popoverContent = /*html*/ `
<bit-popover [title]="'Example Title'" #myPopover>
<div>Lorem ipsum dolor <a href="#">adipisicing elit</a>.</div>
<div>Lorem ipsum dolor <a href="#" bitLink>adipisicing elit</a>.</div>
<ul class="tw-mt-2 tw-mb-0 tw-ps-4">
<li>Dolor sit amet consectetur</li>
<li>Esse labore veniam tempora</li>
<li>Adipisicing elit ipsum <a href="#">iustolaborum</a></li>
<li>Adipisicing elit ipsum <a href="#" bitLink>iustolaborum</a></li>
</ul>
<button bitButton class="tw-mt-3" (click)="triggerRef.closePopover()">Close</button>
</bit-popover>
@@ -74,13 +75,15 @@ const popoverContent = `
export const Default: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56">
<button
type="button"
class="tw-border-none tw-bg-transparent tw-text-primary-600"
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>
@@ -93,13 +96,13 @@ export const Default: Story = {
export const Open: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<bit-popover [title]="'Example Title'" #myPopover="popoverComponent">
<div>Lorem ipsum dolor <a href="#">adipisicing elit</a>.</div>
<div>Lorem ipsum dolor <a href="#" bitLink>adipisicing elit</a>.</div>
<ul class="tw-mt-2 tw-mb-0 tw-ps-4">
<li>Dolor sit amet consectetur</li>
<li>Esse labore veniam tempora</li>
<li>Adipisicing elit ipsum <a href="#">iustolaborum</a></li>
<li>Adipisicing elit ipsum <a href="#" bitLink>iustolaborum</a></li>
</ul>
</bit-popover>
@@ -115,13 +118,13 @@ export const Open: Story = {
export const OpenLongTitle: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<bit-popover [title]="'Example Title that is really long it wraps 2 lines'" #myPopover="popoverComponent">
<div>Lorem ipsum dolor <a href="#">adipisicing elit</a>.</div>
<div>Lorem ipsum dolor <a href="#" bitLink>adipisicing elit</a>.</div>
<ul class="tw-mt-2 tw-mb-0 tw-ps-4">
<li>Dolor sit amet consectetur</li>
<li>Esse labore veniam tempora</li>
<li>Adipisicing elit ipsum <a href="#">iustolaborum</a></li>
<li>Adipisicing elit ipsum <a href="#" bitLink>iustolaborum</a></li>
</ul>
</bit-popover>
@@ -137,7 +140,7 @@ export const OpenLongTitle: Story = {
export const InitiallyOpen: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56">
<button
type="button"
@@ -145,6 +148,8 @@ export const InitiallyOpen: Story = {
[bitPopoverTriggerFor]="myPopover"
[popoverOpen]="true"
#triggerRef="popoverTrigger"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>
@@ -163,7 +168,7 @@ export const RightStart: Story = {
},
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56">
<button
type="button"
@@ -171,6 +176,8 @@ export const RightStart: Story = {
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
[position]="'${args.position}'"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>
@@ -186,7 +193,7 @@ export const RightCenter: Story = {
},
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56">
<button
type="button"
@@ -194,6 +201,8 @@ export const RightCenter: Story = {
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
[position]="'${args.position}'"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>
@@ -209,7 +218,7 @@ export const RightEnd: Story = {
},
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56">
<button
type="button"
@@ -217,6 +226,8 @@ export const RightEnd: Story = {
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
[position]="'${args.position}'"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>
@@ -232,7 +243,7 @@ export const LeftStart: Story = {
},
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56 tw-flex tw-justify-end">
<button
type="button"
@@ -240,6 +251,8 @@ export const LeftStart: Story = {
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
[position]="'${args.position}'"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>
@@ -255,7 +268,7 @@ export const LeftCenter: Story = {
},
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56 tw-flex tw-justify-end">
<button
type="button"
@@ -263,6 +276,8 @@ export const LeftCenter: Story = {
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
[position]="'${args.position}'"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>
@@ -277,7 +292,7 @@ export const LeftEnd: Story = {
},
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56 tw-flex tw-justify-end">
<button
type="button"
@@ -285,6 +300,8 @@ export const LeftEnd: Story = {
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
[position]="'${args.position}'"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>
@@ -300,7 +317,7 @@ export const BelowStart: Story = {
},
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56 tw-flex tw-justify-center">
<button
type="button"
@@ -308,6 +325,8 @@ export const BelowStart: Story = {
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
[position]="'${args.position}'"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>
@@ -323,7 +342,7 @@ export const BelowCenter: Story = {
},
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56 tw-flex tw-justify-center">
<button
type="button"
@@ -331,6 +350,8 @@ export const BelowCenter: Story = {
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
[position]="'${args.position}'"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>
@@ -346,7 +367,7 @@ export const BelowEnd: Story = {
},
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56 tw-flex tw-justify-center">
<button
type="button"
@@ -354,6 +375,8 @@ export const BelowEnd: Story = {
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
[position]="'${args.position}'"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>
@@ -369,7 +392,7 @@ export const AboveStart: Story = {
},
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56 tw-flex tw-justify-center">
<button
type="button"
@@ -377,6 +400,8 @@ export const AboveStart: Story = {
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
[position]="'${args.position}'"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>
@@ -392,7 +417,7 @@ export const AboveCenter: Story = {
},
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56 tw-flex tw-justify-center">
<button
type="button"
@@ -400,6 +425,8 @@ export const AboveCenter: Story = {
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
[position]="'${args.position}'"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>
@@ -415,7 +442,7 @@ export const AboveEnd: Story = {
},
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<div class="tw-mt-56 tw-flex tw-justify-center">
<button
type="button"
@@ -423,6 +450,8 @@ export const AboveEnd: Story = {
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
[position]="'${args.position}'"
aria-label="Open popover"
title="Open popover"
>
<i class="bwi bwi-question-circle"></i>
</button>