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

apps/browser/src/platform/popup/layout/popup-layout.stories.ts

@@ -557,7 +557,10 @@ export const CenteredContent: Story = {
         <popup-tab-navigation>
           <popup-page>
             <popup-header slot="header" pageTitle="Centered Content"></popup-header>
-            <div class="tw-h-full tw-flex tw-items-center tw-justify-center tw-text-main">
+            <div
+              class="tw-h-full tw-flex tw-items-center tw-justify-center tw-text-main tw-flex-col"
+            >
+              <h2 bitTypography="h2" class="tw-mb-6">Page with no content</h2>
               <bit-no-items>
                 <ng-container slot="title">Before centering a div</ng-container>
                 <ng-container slot="description">One must first center oneself</ng-container>

libs/components/src/card/card.stories.ts

@@ -91,7 +91,7 @@ export const WithoutBorderRadius: Story = {
     template: /*html*/ `
     <bit-layout>
       <bit-card>
-        <p bitTypography="body1" class="!tw-mb-0">Cards used in <code>bit-layout</code> will not have a border radius</p>
+        <p bitTypography="body1" class="!tw-mb-0">Cards used in <code class="tw-text-danger-700">bit-layout</code> will not have a border radius</p>
       </bit-card>
     </bit-layout>
     `,

libs/components/src/checkbox/checkbox.stories.ts

@@ -218,7 +218,10 @@ export const Indeterminate: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <input type="checkbox" bitCheckbox [indeterminate]="true">
+      <label>
+        Indeterminate
+        <input type="checkbox" bitCheckbox [indeterminate]="true">
+      </label>
     `,
   }),
 };
@@ -256,6 +259,9 @@ export const InTableRow: Story = {
                 bitCheckbox
                 id="checkOne"
               />
+              <label for="checkOne" class="tw-sr-only">
+                Check row 0
+              </label>
             </td>
             <td bitCell>Lorem</td>
             <td bitCell>Ipsum</td>

libs/components/src/form-field/form-field.stories.ts

@@ -172,7 +172,7 @@ export const LabelWithIcon: Story = {
         <bit-form-field>
           <bit-label>
             Label
-            <a href="#" slot="end" bitLink>
+            <a href="#" slot="end" bitLink aria-label="More info" title="More info">
               <i class="bwi bwi-question-circle" aria-hidden="true"></i>
             </a>
           </bit-label>
@@ -203,7 +203,7 @@ export const LongLabel: Story = {
         <bit-form-field>
           <bit-label>
             Hello I am a very long label with lots of very cool helpful information
-            <a href="#" slot="end" bitLink>
+            <a href="#" slot="end" bitLink aria-label="More info" title="More info">
               <i class="bwi bwi-question-circle" aria-hidden="true"></i>
             </a>
           </bit-label>

libs/components/src/popover/popover.stories.ts

@@ -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>

libs/components/src/stories/icons/icons.stories.ts

@@ -37,7 +37,7 @@ export const StatusIcons = {
           @for (row of rows$ | async; track row.id) {
             <tr bitRow alignContent="middle">
               <td bitCell><i class="bwi" [ngClass]="row.id"></i> </td>
-              <td bitCell><code>{{row.id}}</code></td>
+              <td bitCell><code class="tw-text-danger-700">{{row.id}}</code></td>
               <td bitCell>{{row.usage}}</td>
             </tr>
           }
@@ -152,7 +152,7 @@ export const SizeVariants = {
           @for (row of rows$ | async; track row.size) {
             <tr bitRow alignContent="middle">
               <td bitCell><i class="bwi bwi-plus" [ngClass]="row.size"></i> </td>
-              <td bitCell><code>{{row.size}}</code></td>
+              <td bitCell><code class="tw-text-danger-700">{{row.size}}</code></td>
               <td bitCell>{{row.usage}}</td>
             </tr>
           }
@@ -201,7 +201,7 @@ export const RotationVariants = {
           @for (row of rows$ | async; track row.class) {
             <tr bitRow alignContent="middle">
               <td bitCell><i class="bwi bwi-lock" [ngClass]="row.class"></i> </td>
-              <td bitCell><code>{{row.class}}</code></td>
+              <td bitCell><code class="tw-text-danger-700">{{row.class}}</code></td>
               <td bitCell>{{row.usage}}</td>
             </tr>
           }

libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts

@@ -152,6 +152,7 @@ class KitchenSinkDialog {
 
       <bit-tab label="Empty tab" data-testid="empty-tab">
         <bit-section>
+          <h2 bitTypography="h2" class="tw-mb-6">Tab Number 2</h2>
           <bit-no-items class="tw-text-main">
             <ng-container slot="title">This tab is empty</ng-container>
             <ng-container slot="description">

libs/components/src/toggle-group/toggle-group.stories.ts

@@ -75,7 +75,7 @@ export const LabelWrap: Story = {
   render: (args) => ({
     props: args,
     template: /* HTML */ `
-      <code>fullWidth=false</code>
+      <code class="tw-text-danger-700">fullWidth=false</code>
       <bit-toggle-group
         [(selected)]="selected"
         aria-label="People list filter"
@@ -92,7 +92,7 @@ export const LabelWrap: Story = {
         <bit-toggle value="deactivated">Deactivatedinvitationswraplabel</bit-toggle>
       </bit-toggle-group>
       <br />
-      <code>fullWidth=true</code>
+      <code class="tw-text-danger-700">fullWidth=true</code>
       <bit-toggle-group
         [(selected)]="selected"
         aria-label="People list filter"