Skip to content

Commit 30ce9e8

Browse files
brandonrobertsbrandonroberts
committed
feat: add configuration for a11y tests with "@storybook/addon-a11y"
1 parent 8276a29 commit 30ce9e8

File tree

6 files changed

+69
-36
lines changed

6 files changed

+69
-36
lines changed

‎.storybook/main.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ const config: StorybookConfig = {
55
addons: [
66
"@storybook/addon-links",
77
"@storybook/addon-docs",
8-
"@storybook/addon-vitest"
8+
"@storybook/addon-vitest",
9+
"@storybook/addon-a11y"
910
],
1011
framework: {
1112
name: "@analogjs/storybook-angular",

‎.storybook/preview.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const preview: Preview = {
1313
date: /Date$/i,
1414
},
1515
},
16+
a11y: { test: 'todo', }
1617
},
1718

1819
tags: ['autodocs']

‎.storybook/vitest.setup.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { beforeAll } from 'vitest';
22
import { setProjectAnnotations } from '@analogjs/storybook-angular/testing';
3+
import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
34

45
import * as projectAnnotations from './preview';
56

6-
const annotations = setProjectAnnotations([projectAnnotations]);
7+
const annotations = setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
78

89
// Run Storybook's beforeAll hook
910
beforeAll(annotations.beforeAll);

‎documentation.json‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
},
9090
{
9191
"name": "ButtonComponent",
92-
"id": "component-ButtonComponent-ea53b5a9b3579bbf02b4f897c0f411e26ae8b2dd9c9c1e5b8217b126a54713d3f22e6f6f3fd6841aa3a7142c4050d331406abeb0c3671b6eb723895455e85bb7",
92+
"id": "component-ButtonComponent-86e2311c54fbca7431c12e070d0fd5b0ebe343eec0553a392f182ba0e04a8f86613233d26ee47718fd0e7a65078f580c76a1fcc928ce55de81193d6618025bc4",
9393
"file": "src/stories/button.component.ts",
9494
"encapsulation": [],
9595
"entryComponents": [],
@@ -101,7 +101,7 @@
101101
"./button.css"
102102
],
103103
"styles": [],
104-
"template": "<img src=\"/angular-gradient.png\"/> <button type=\"button\"\n (click)=\"onClick.emit($event)\"\n [ngClass]=\"classes\"\n [ngStyle]=\"{ 'background-color': backgroundColor }\"\n >\n {{ label }}\n </button>",
104+
"template": "<button type=\"button\"\n (click)=\"onClick.emit($event)\"\n [ngClass]=\"classes\"\n [ngStyle]=\"{ 'background-color': backgroundColor }\"\n >\n {{ label }}\n </button>",
105105
"templateUrl": [],
106106
"viewProviders": [],
107107
"hostDirectives": [],
@@ -123,16 +123,16 @@
123123
"deprecationMessage": "",
124124
"jsdoctags": [
125125
{
126-
"pos": 832,
127-
"end": 845,
126+
"pos": 798,
127+
"end": 811,
128128
"kind": 327,
129129
"id": 0,
130130
"flags": 16842752,
131131
"modifierFlagsCache": 0,
132132
"transformFlags": 0,
133133
"tagName": {
134-
"pos": 833,
135-
"end": 841,
134+
"pos": 799,
135+
"end": 807,
136136
"kind": 80,
137137
"id": 0,
138138
"flags": 16842752,
@@ -199,7 +199,7 @@
199199
"description": "",
200200
"rawdescription": "\n",
201201
"type": "component",
202-
"sourceCode": "import { CommonModule } from '@angular/common';\nimport { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n selector: 'storybook-button',\n standalone: true,\n imports: [CommonModule],\n template: `<img src=\"/angular-gradient.png\"/> <button\n type=\"button\"\n (click)=\"onClick.emit($event)\"\n [ngClass]=\"classes\"\n [ngStyle]=\"{ 'background-color': backgroundColor }\"\n >\n {{ label }}\n </button>`,\n styleUrls: ['./button.css'],\n})\nexport class ButtonComponent {\n /**\n * Is this the principal call to action on the page?\n */\n @Input()\n primary = false;\n\n /**\n * What background color to use\n */\n @Input()\n backgroundColor?: string;\n\n /**\n * How large should the button be?\n */\n @Input()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Button contents\n *\n * @required\n */\n @Input()\n label = 'Button';\n\n /**\n * Optional click handler\n */\n @Output()\n onClick = new EventEmitter<Event>();\n\n public get classes(): string[] {\n const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary';\n\n return ['storybook-button', `storybook-button--${this.size}`, mode];\n }\n}\n",
202+
"sourceCode": "import { CommonModule } from '@angular/common';\nimport { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n selector: 'storybook-button',\n standalone: true,\n imports: [CommonModule],\n template: ` <button\n type=\"button\"\n (click)=\"onClick.emit($event)\"\n [ngClass]=\"classes\"\n [ngStyle]=\"{ 'background-color': backgroundColor }\"\n >\n {{ label }}\n </button>`,\n styleUrls: ['./button.css'],\n})\nexport class ButtonComponent {\n /**\n * Is this the principal call to action on the page?\n */\n @Input()\n primary = false;\n\n /**\n * What background color to use\n */\n @Input()\n backgroundColor?: string;\n\n /**\n * How large should the button be?\n */\n @Input()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Button contents\n *\n * @required\n */\n @Input()\n label = 'Button';\n\n /**\n * Optional click handler\n */\n @Output()\n onClick = new EventEmitter<Event>();\n\n public get classes(): string[] {\n const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary';\n\n return ['storybook-button', `storybook-button--${this.size}`, mode];\n }\n}\n",
203203
"assetsDirs": [],
204204
"styleUrlsData": [
205205
{
@@ -223,7 +223,7 @@
223223
},
224224
{
225225
"name": "HeaderComponent",
226-
"id": "component-HeaderComponent-cad94b233ec8e80ceb541e7972c5f9737e08237b4e137112f3987ca48ee0cce5c0d57798d41daa5d4d24d6bdbb2df1606ab68cca2aa0a1785e38f99f3cac0729",
226+
"id": "component-HeaderComponent-bf1b59351d45d6f1a7caabbe9caa07241c4049354b07062c19c981a7e2687e743a675013bb62da7e0f2941d2afec5437ec29e475111d30a97f230a83d5645a14",
227227
"file": "src/stories/header.component.ts",
228228
"encapsulation": [],
229229
"entryComponents": [],
@@ -235,7 +235,7 @@
235235
"./header.css"
236236
],
237237
"styles": [],
238-
"template": "<header> <div class=\"storybook-header\">\n <div>\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fillRule=\"evenodd\">\n <path\n d=\"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z\"\n fill=\"#FFF\"\n />\n <path\n d=\"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z\"\n fill=\"#555AB9\"\n />\n <path\n d=\"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z\"\n fill=\"#91BAF8\"\n />\n </g>\n </svg>\n <h1>Acme</h1>\n </div>\n <div>\n <div *ngIf=\"user\">\n <span class=\"welcome\">\n Welcome, <b>{{ user.name }}</b\n >!\n </span>\n <storybook-button\n *ngIf=\"user\"\n size=\"small\"\n (onClick)=\"onLogout.emit($event)\"\n label=\"Log out\"\n ></storybook-button>\n </div>\n <div *ngIf=\"!user\">\n <storybook-button\n *ngIf=\"!user\"\n size=\"small\"\n class=\"margin-left\"\n (onClick)=\"onLogin.emit($event)\"\n label=\"Log in\"\n ></storybook-button>\n <storybook-button\n *ngIf=\"!user\"\n size=\"small\"\n [primary]=\"true\"\n class=\"margin-left\"\n (onClick)=\"onCreateAccount.emit($event)\"\n label=\"Sign up\"\n ></storybook-button>\n </div>\n </div>\n </div>\n </header>",
238+
"template": "<header> <div class=\"storybook-header\">\n <div>\n <img src=\"/angular-gradient.png\" width=\"24px\" height=\"24px\"/>\n <h1>Acme</h1>\n </div>\n <div>\n <div *ngIf=\"user\">\n <span class=\"welcome\">\n Welcome, <b>{{ user.name }}</b\n >!\n </span>\n <storybook-button\n *ngIf=\"user\"\n size=\"small\"\n (onClick)=\"onLogout.emit($event)\"\n label=\"Log out\"\n ></storybook-button>\n </div>\n <div *ngIf=\"!user\">\n <storybook-button\n *ngIf=\"!user\"\n size=\"small\"\n class=\"margin-left\"\n (onClick)=\"onLogin.emit($event)\"\n label=\"Log in\"\n ></storybook-button>\n <storybook-button\n *ngIf=\"!user\"\n size=\"small\"\n [primary]=\"true\"\n class=\"margin-left\"\n (onClick)=\"onCreateAccount.emit($event)\"\n label=\"Sign up\"\n ></storybook-button>\n </div>\n </div>\n </div>\n </header>",
239239
"templateUrl": [],
240240
"viewProviders": [],
241241
"hostDirectives": [],
@@ -245,7 +245,7 @@
245245
"defaultValue": "null",
246246
"deprecated": false,
247247
"deprecationMessage": "",
248-
"line": 69,
248+
"line": 54,
249249
"type": "User | null",
250250
"decorators": []
251251
}
@@ -256,23 +256,23 @@
256256
"defaultValue": "new EventEmitter<Event>()",
257257
"deprecated": false,
258258
"deprecationMessage": "",
259-
"line": 78,
259+
"line": 63,
260260
"type": "EventEmitter"
261261
},
262262
{
263263
"name": "onLogin",
264264
"defaultValue": "new EventEmitter<Event>()",
265265
"deprecated": false,
266266
"deprecationMessage": "",
267-
"line": 72,
267+
"line": 57,
268268
"type": "EventEmitter"
269269
},
270270
{
271271
"name": "onLogout",
272272
"defaultValue": "new EventEmitter<Event>()",
273273
"deprecated": false,
274274
"deprecationMessage": "",
275-
"line": 75,
275+
"line": 60,
276276
"type": "EventEmitter"
277277
}
278278
],
@@ -296,7 +296,7 @@
296296
"description": "",
297297
"rawdescription": "\n",
298298
"type": "component",
299-
"sourceCode": "import { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { ButtonComponent } from './button.component';\nimport type { User } from './user';\n\n@Component({\n selector: 'storybook-header',\n standalone: true,\n imports: [CommonModule, ButtonComponent],\n template: `<header>\n <div class=\"storybook-header\">\n <div>\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fillRule=\"evenodd\">\n <path\n d=\"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z\"\n fill=\"#FFF\"\n />\n <path\n d=\"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z\"\n fill=\"#555AB9\"\n />\n <path\n d=\"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z\"\n fill=\"#91BAF8\"\n />\n </g>\n </svg>\n <h1>Acme</h1>\n </div>\n <div>\n <div *ngIf=\"user\">\n <span class=\"welcome\">\n Welcome, <b>{{ user.name }}</b\n >!\n </span>\n <storybook-button\n *ngIf=\"user\"\n size=\"small\"\n (onClick)=\"onLogout.emit($event)\"\n label=\"Log out\"\n ></storybook-button>\n </div>\n <div *ngIf=\"!user\">\n <storybook-button\n *ngIf=\"!user\"\n size=\"small\"\n class=\"margin-left\"\n (onClick)=\"onLogin.emit($event)\"\n label=\"Log in\"\n ></storybook-button>\n <storybook-button\n *ngIf=\"!user\"\n size=\"small\"\n [primary]=\"true\"\n class=\"margin-left\"\n (onClick)=\"onCreateAccount.emit($event)\"\n label=\"Sign up\"\n ></storybook-button>\n </div>\n </div>\n </div>\n </header>`,\n styleUrls: ['./header.css'],\n})\nexport class HeaderComponent {\n @Input()\n user: User | null = null;\n\n @Output()\n onLogin = new EventEmitter<Event>();\n\n @Output()\n onLogout = new EventEmitter<Event>();\n\n @Output()\n onCreateAccount = new EventEmitter<Event>();\n}\n",
299+
"sourceCode": "import { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { ButtonComponent } from './button.component';\nimport type { User } from './user';\n\n@Component({\n selector: 'storybook-header',\n standalone: true,\n imports: [CommonModule, ButtonComponent],\n template: `<header>\n <div class=\"storybook-header\">\n <div>\n <img src=\"/angular-gradient.png\" width=\"24px\" height=\"24px\"/> \n <h1>Acme</h1>\n </div>\n <div>\n <div *ngIf=\"user\">\n <span class=\"welcome\">\n Welcome, <b>{{ user.name }}</b\n >!\n </span>\n <storybook-button\n *ngIf=\"user\"\n size=\"small\"\n (onClick)=\"onLogout.emit($event)\"\n label=\"Log out\"\n ></storybook-button>\n </div>\n <div *ngIf=\"!user\">\n <storybook-button\n *ngIf=\"!user\"\n size=\"small\"\n class=\"margin-left\"\n (onClick)=\"onLogin.emit($event)\"\n label=\"Log in\"\n ></storybook-button>\n <storybook-button\n *ngIf=\"!user\"\n size=\"small\"\n [primary]=\"true\"\n class=\"margin-left\"\n (onClick)=\"onCreateAccount.emit($event)\"\n label=\"Sign up\"\n ></storybook-button>\n </div>\n </div>\n </div>\n </header>`,\n styleUrls: ['./header.css'],\n})\nexport class HeaderComponent {\n @Input()\n user: User | null = null;\n\n @Output()\n onLogin = new EventEmitter<Event>();\n\n @Output()\n onLogout = new EventEmitter<Event>();\n\n @Output()\n onCreateAccount = new EventEmitter<Event>();\n}\n",
300300
"assetsDirs": [],
301301
"styleUrlsData": [
302302
{

‎package-lock.json‎

Lines changed: 44 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)