[CL-133] add skip links to bit-layout (#7213)

* Add light LinkType to link directive

* add skip link to bit-layout; update i18n for all apps

* install storybook interaction testing packages

* update storybook config

* add skiplink story to bit-layout

* update route and focus logic

* remove focus ring

.storybook/main.ts

@@ -17,6 +17,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-a11y",
     "@storybook/addon-designs",
+    "@storybook/addon-interactions",
     {
       name: "@storybook/addon-docs",
       options: {

apps/browser/src/_locales/en/messages.json

@@ -2512,6 +2512,9 @@
     "message": "Turn off master password re-prompt to edit this field",
     "description": "Message appearing below the autofill on load message when master password reprompt is set for a vault item."
   },
+  "skipToContent": {
+    "message": "Skip to content"
+  },
   "bitwardenOverlayButton": {
     "message": "Bitwarden auto-fill menu button",
     "description": "Page title for the iframe containing the overlay button"

apps/desktop/src/locales/en/messages.json

@@ -2427,6 +2427,9 @@
   "submenu": {
     "message": "Submenu"
   },
+  "skipToContent": {
+    "message": "Skip to content"
+  },
   "typePasskey": {
     "message": "Passkey"
   },

apps/web/src/locales/en/messages.json

@@ -7395,6 +7395,9 @@
   "alreadyHaveAccount": {
     "message": "Already have an account?"
   },
+  "skipToContent": {
+    "message": "Skip to content"
+  },
   "customBillingStart": {
     "message": "Custom billing is not reflected. Visit the "
   },

libs/components/src/layout/layout.component.html

@@ -1,3 +1,18 @@
+<div
+  class="tw-fixed tw-z-50 tw-w-full tw-flex tw-justify-center tw-opacity-0 focus-within:tw-opacity-100 tw-pointer-events-none focus-within:tw-pointer-events-auto"
+>
+  <nav class="tw-bg-background-alt3 tw-rounded-md tw-rounded-t-none tw-py-2 tw-text-alt2">
+    <a
+      bitLink
+      class="tw-mx-6 focus-visible:before:!tw-ring-0"
+      [fragment]="mainContentId"
+      [routerLink]="[]"
+      (click)="focusMainContent()"
+      linkType="light"
+      >{{ "skipToContent" | i18n }}</a
+    >
+  </nav>
+</div>
 <div class="tw-flex tw-w-full">
   <aside
     [ngStyle]="
@@ -12,7 +27,11 @@
   >
     <ng-content select="[slot=sidebar]"></ng-content>
   </aside>
-  <main class="tw-ml-60 tw-min-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6">
+  <main
+    [id]="mainContentId"
+    tabindex="-1"
+    class="tw-ml-60 tw-min-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6"
+  >
     <ng-content></ng-content>
   </main>
 </div>

libs/components/src/layout/layout.component.ts

@@ -1,5 +1,8 @@
-import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+import { LinkModule } from "../link";
+import { SharedModule } from "../shared";
 
 export type LayoutVariant = "primary" | "secondary";
 
@@ -7,8 +10,14 @@ export type LayoutVariant = "primary" | "secondary";
   selector: "bit-layout",
   templateUrl: "layout.component.html",
   standalone: true,
-  imports: [CommonModule],
+  imports: [SharedModule, LinkModule, RouterModule],
 })
 export class LayoutComponent {
+  protected mainContentId = "main-content";
+
   @Input() variant: LayoutVariant = "primary";
+
+  focusMainContent() {
+    document.getElementById(this.mainContentId)?.focus();
+  }
 }

libs/components/src/layout/layout.stories.ts

@@ -1,5 +1,6 @@
 import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";
+import { userEvent } from "@storybook/testing-library";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -30,6 +31,7 @@ export default {
           provide: I18nService,
           useFactory: () => {
             return new I18nMockService({
+              skipToContent: "Skip to content",
               submenu: "submenu",
               toggleCollapse: "toggle collapse",
             });
@@ -134,6 +136,13 @@ export const WithContent: Story = {
   }),
 };
 
+export const SkipLinks: Story = {
+  ...WithContent,
+  play: async () => {
+    await userEvent.tab();
+  },
+};
+
 export const Secondary: Story = {
   render: (args) => ({
     props: args,

libs/components/src/link/link.directive.ts

@@ -1,6 +1,6 @@
 import { Input, HostBinding, Directive } from "@angular/core";
 
-export type LinkType = "primary" | "secondary" | "contrast";
+export type LinkType = "primary" | "secondary" | "contrast" | "light";
 
 const linkStyles: Record<LinkType, string[]> = {
   primary: [
@@ -21,6 +21,12 @@ const linkStyles: Record<LinkType, string[]> = {
     "focus-visible:before:tw-ring-text-contrast",
     "disabled:!tw-text-contrast/60",
   ],
+  light: [
+    "!tw-text-alt2",
+    "hover:!tw-text-alt2",
+    "focus-visible:before:tw-ring-text-alt2",
+    "disabled:!tw-text-alt2/60",
+  ],
 };
 
 const commonStyles = [

package-lock.json

@@ -86,8 +86,11 @@
         "@storybook/addon-actions": "7.3.0",
         "@storybook/addon-designs": "7.0.7",
         "@storybook/addon-essentials": "7.3.0",
+        "@storybook/addon-interactions": "^7.6.4",
         "@storybook/addon-links": "7.3.0",
         "@storybook/angular": "7.3.0",
+        "@storybook/jest": "^0.2.3",
+        "@storybook/testing-library": "^0.2.2",
         "@types/argon2-browser": "1.18.1",
         "@types/chrome": "0.0.243",
         "@types/duo_web_sdk": "2.7.1",
@@ -332,6 +335,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.2.tgz",
+      "integrity": "sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==",
+      "dev": true
+    },
     "node_modules/@aduh95/viz.js": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/@aduh95/viz.js/-/viz.js-3.4.0.tgz",
@@ -9325,6 +9334,121 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/addon-interactions": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-7.6.4.tgz",
+      "integrity": "sha512-LjK9uhkgnbGyDwwa7pQhLptDEHeTIFmy+KurfJs9T08DpvRFfuuzyW4mj/hA63R1W5yjFSAhRiZj26+D7kBIyw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0",
+        "@storybook/types": "7.6.4",
+        "jest-mock": "^27.0.6",
+        "polished": "^4.2.2",
+        "ts-dedent": "^2.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-interactions/node_modules/@jest/types": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
+      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^16.0.0",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-interactions/node_modules/@storybook/channels": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.4.tgz",
+      "integrity": "sha512-Z4PY09/Czl70ap4ObmZ4bgin+EQhPaA3HdrEDNwpnH7A9ttfEO5u5KThytIjMq6kApCCihmEPDaYltoVrfYJJA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.6.4",
+        "@storybook/core-events": "7.6.4",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.2.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-interactions/node_modules/@storybook/client-logger": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.4.tgz",
+      "integrity": "sha512-vJwMShC98tcoFruRVQ4FphmFqvAZX1FqZqjFyk6IxtFumPKTVSnXJjlU1SnUIkSK2x97rgdUMqkdI+wAv/tugQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-interactions/node_modules/@storybook/core-events": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.4.tgz",
+      "integrity": "sha512-i3xzcJ19ILSy4oJL5Dz9y0IlyApynn5RsGhAMIsW+mcfri+hGfeakq1stNCo0o7jW4Y3A7oluFTtIoK8DOxQdQ==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-interactions/node_modules/@storybook/types": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.4.tgz",
+      "integrity": "sha512-qyiiXPCvol5uVgfubcIMzJBA0awAyFPU+TyUP1mkPYyiTHnsHYel/mKlSdPjc8a97N3SlJXHOCx41Hde4IyJgg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.6.4",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-interactions/node_modules/@types/yargs": {
+      "version": "16.0.9",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.9.tgz",
+      "integrity": "sha512-tHhzvkFXZQeTECenFoRljLBYPZJ7jAVxqqtEI0qTLOmuultnFp4I9yKE17vTuhf7BkhCu7I4XuemPgikDVuYqA==",
+      "dev": true,
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@storybook/addon-interactions/node_modules/jest-mock": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-27.5.1.tgz",
+      "integrity": "sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
     "node_modules/@storybook/addon-links": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.3.0.tgz",
@@ -13186,6 +13310,118 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/expect": {
+      "version": "28.1.3-5",
+      "resolved": "https://registry.npmjs.org/@storybook/expect/-/expect-28.1.3-5.tgz",
+      "integrity": "sha512-lS1oJnY1qTAxnH87C765NdfvGhksA6hBcbUVI5CHiSbNsEtr456wtg/z+dT9XlPriq1D5t2SgfNL9dBAoIGyIA==",
+      "dev": true,
+      "dependencies": {
+        "@types/jest": "28.1.3"
+      }
+    },
+    "node_modules/@storybook/expect/node_modules/@jest/schemas": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-28.1.3.tgz",
+      "integrity": "sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==",
+      "dev": true,
+      "dependencies": {
+        "@sinclair/typebox": "^0.24.1"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@storybook/expect/node_modules/@sinclair/typebox": {
+      "version": "0.24.51",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
+      "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==",
+      "dev": true
+    },
+    "node_modules/@storybook/expect/node_modules/@types/jest": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-28.1.3.tgz",
+      "integrity": "sha512-Tsbjk8Y2hkBaY/gJsataeb4q9Mubw9EOz7+4RjPkzD5KjTvHHs7cpws22InaoXxAVAhF5HfFbzJjo6oKWqSZLw==",
+      "dev": true,
+      "dependencies": {
+        "jest-matcher-utils": "^28.0.0",
+        "pretty-format": "^28.0.0"
+      }
+    },
+    "node_modules/@storybook/expect/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/expect/node_modules/diff-sequences": {
+      "version": "28.1.1",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-28.1.1.tgz",
+      "integrity": "sha512-FU0iFaH/E23a+a718l8Qa/19bF9p06kgE0KipMOMadwa3SjnaElKzPaUC0vnibs6/B/9ni97s61mcejk8W1fQw==",
+      "dev": true,
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@storybook/expect/node_modules/jest-diff": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-28.1.3.tgz",
+      "integrity": "sha512-8RqP1B/OXzjjTWkqMX67iqgwBVJRgCyKD3L9nq+6ZqJMdvjE8RgHktqZ6jNrkdMT+dJuYNI3rhQpxaz7drJHfw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^28.1.1",
+        "jest-get-type": "^28.0.2",
+        "pretty-format": "^28.1.3"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@storybook/expect/node_modules/jest-get-type": {
+      "version": "28.0.2",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-28.0.2.tgz",
+      "integrity": "sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@storybook/expect/node_modules/jest-matcher-utils": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-28.1.3.tgz",
+      "integrity": "sha512-kQeJ7qHemKfbzKoGjHHrRKH6atgxMk8Enkk2iPQ3XwO6oE/KYD8lMYOziCkeSB9G4adPM4nR1DE8Tf5JeWH6Bw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "jest-diff": "^28.1.3",
+        "jest-get-type": "^28.0.2",
+        "pretty-format": "^28.1.3"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@storybook/expect/node_modules/pretty-format": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz",
+      "integrity": "sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^28.1.3",
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
     "node_modules/@storybook/global": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",
@@ -13205,6 +13441,159 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@storybook/jest": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/jest/-/jest-0.2.3.tgz",
+      "integrity": "sha512-ov5izrmbAFObzKeh9AOC5MlmFxAcf0o5i6YFGae9sDx6DGh6alXsRM+chIbucVkUwVHVlSzdfbLDEFGY/ShaYw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/expect": "storybook-jest",
+        "@testing-library/jest-dom": "^6.1.2",
+        "@types/jest": "28.1.3",
+        "jest-mock": "^27.3.0"
+      }
+    },
+    "node_modules/@storybook/jest/node_modules/@jest/schemas": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-28.1.3.tgz",
+      "integrity": "sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==",
+      "dev": true,
+      "dependencies": {
+        "@sinclair/typebox": "^0.24.1"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@storybook/jest/node_modules/@jest/types": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
+      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^16.0.0",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@storybook/jest/node_modules/@sinclair/typebox": {
+      "version": "0.24.51",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
+      "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==",
+      "dev": true
+    },
+    "node_modules/@storybook/jest/node_modules/@types/jest": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-28.1.3.tgz",
+      "integrity": "sha512-Tsbjk8Y2hkBaY/gJsataeb4q9Mubw9EOz7+4RjPkzD5KjTvHHs7cpws22InaoXxAVAhF5HfFbzJjo6oKWqSZLw==",
+      "dev": true,
+      "dependencies": {
+        "jest-matcher-utils": "^28.0.0",
+        "pretty-format": "^28.0.0"
+      }
+    },
+    "node_modules/@storybook/jest/node_modules/@types/yargs": {
+      "version": "16.0.9",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.9.tgz",
+      "integrity": "sha512-tHhzvkFXZQeTECenFoRljLBYPZJ7jAVxqqtEI0qTLOmuultnFp4I9yKE17vTuhf7BkhCu7I4XuemPgikDVuYqA==",
+      "dev": true,
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@storybook/jest/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/jest/node_modules/diff-sequences": {
+      "version": "28.1.1",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-28.1.1.tgz",
+      "integrity": "sha512-FU0iFaH/E23a+a718l8Qa/19bF9p06kgE0KipMOMadwa3SjnaElKzPaUC0vnibs6/B/9ni97s61mcejk8W1fQw==",
+      "dev": true,
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@storybook/jest/node_modules/jest-diff": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-28.1.3.tgz",
+      "integrity": "sha512-8RqP1B/OXzjjTWkqMX67iqgwBVJRgCyKD3L9nq+6ZqJMdvjE8RgHktqZ6jNrkdMT+dJuYNI3rhQpxaz7drJHfw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^28.1.1",
+        "jest-get-type": "^28.0.2",
+        "pretty-format": "^28.1.3"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@storybook/jest/node_modules/jest-get-type": {
+      "version": "28.0.2",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-28.0.2.tgz",
+      "integrity": "sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@storybook/jest/node_modules/jest-matcher-utils": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-28.1.3.tgz",
+      "integrity": "sha512-kQeJ7qHemKfbzKoGjHHrRKH6atgxMk8Enkk2iPQ3XwO6oE/KYD8lMYOziCkeSB9G4adPM4nR1DE8Tf5JeWH6Bw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "jest-diff": "^28.1.3",
+        "jest-get-type": "^28.0.2",
+        "pretty-format": "^28.1.3"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@storybook/jest/node_modules/jest-mock": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-27.5.1.tgz",
+      "integrity": "sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@storybook/jest/node_modules/pretty-format": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz",
+      "integrity": "sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^28.1.3",
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
     "node_modules/@storybook/manager": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.3.0.tgz",
@@ -13391,6 +13780,17 @@
         "node": ">=14.14"
       }
     },
+    "node_modules/@storybook/testing-library": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@storybook/testing-library/-/testing-library-0.2.2.tgz",
+      "integrity": "sha512-L8sXFJUHmrlyU2BsWWZGuAjv39Jl1uAqUHdxmN42JY15M4+XCMjGlArdCCjDe1wpTSW6USYISA9axjZojgtvnw==",
+      "dev": true,
+      "dependencies": {
+        "@testing-library/dom": "^9.0.0",
+        "@testing-library/user-event": "^14.4.0",
+        "ts-dedent": "^2.2.0"
+      }
+    },
     "node_modules/@storybook/theming": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.2.tgz",
@@ -13635,6 +14035,124 @@
         "node": ">=10"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "9.3.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",
+      "integrity": "sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.1.3",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.1.5.tgz",
+      "integrity": "sha512-3y04JLW+EceVPy2Em3VwNr95dOKqA8DhR0RJHhHKDZNYXcVXnEK7WIrpj4eYU8SVt/qYZ2aRWt/WgQ+grNES8g==",
+      "dev": true,
+      "dependencies": {
+        "@adobe/css-tools": "^4.3.1",
+        "@babel/runtime": "^7.9.2",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.5.6",
+        "lodash": "^4.17.15",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      },
+      "peerDependencies": {
+        "@jest/globals": ">= 28",
+        "@types/jest": ">= 28",
+        "jest": ">= 28",
+        "vitest": ">= 0.32"
+      },
+      "peerDependenciesMeta": {
+        "@jest/globals": {
+          "optional": true
+        },
+        "@types/jest": {
+          "optional": true
+        },
+        "jest": {
+          "optional": true
+        },
+        "vitest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.5.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz",
+      "integrity": "sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@thednp/event-listener": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@thednp/event-listener/-/event-listener-2.0.4.tgz",
@@ -13776,6 +14294,12 @@
       "integrity": "sha512-PZffP/CqH9m2kovDSRQMfMMxUC3V98I7i7/caa0RB0/nvsXzYbL9bKyqZpNMFmLFGZslROlG1R60ONt7abrwlA==",
       "dev": true
     },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.1",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.1.tgz",
@@ -19256,6 +19780,12 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -20027,6 +20557,12 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true
+    },
     "node_modules/dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -29093,6 +29629,15 @@
       "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
       "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/macos-release": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.1.tgz",
@@ -30543,6 +31088,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/mini-css-extract-plugin": {
       "version": "2.7.6",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
@@ -34797,6 +35351,19 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
@@ -37605,6 +38172,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -37974,9 +38553,9 @@
       }
     },
     "node_modules/telejson": {
-      "version": "7.1.0",
+      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.2.0.tgz",
-      "integrity": "sha512-jFJO4P5gPebZAERPkJsqMAQ0IMA1Hi0AoSfxpnUaV6j6R2SZqlpkbS20U6dEUtA3RUYt2Ak/mTlkQzHH9Rv/hA==",
+      "integrity": "sha512-1QTEcJkJEhc8OnStBx/ILRu5J2p0GjvWsBx56bmZRqnrkdBMUe+nX92jxV+p3dB4CP6PZCdJMQJwCggkNBMzkQ==",
       "dev": true,
       "dependencies": {
         "memoizerific": "^1.11.3"

package.json

@@ -49,8 +49,11 @@
     "@storybook/addon-actions": "7.3.0",
     "@storybook/addon-designs": "7.0.7",
     "@storybook/addon-essentials": "7.3.0",
+    "@storybook/addon-interactions": "^7.6.4",
     "@storybook/addon-links": "7.3.0",
     "@storybook/angular": "7.3.0",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/testing-library": "^0.2.2",
     "@types/argon2-browser": "1.18.1",
     "@types/chrome": "0.0.243",
     "@types/duo_web_sdk": "2.7.1",