@stackoverflow/stacks 1.10.2 → 1.10.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/js/stacks.js +265 -110
  2. package/dist/js/stacks.min.js +1 -1
  3. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +7 -5
  4. package/lib/components/anchor/anchor.a11y.test.ts +10 -3
  5. package/lib/components/badge/badge.a11y.test.ts +45 -6
  6. package/lib/components/badge/badge.visual.test.ts +27 -5
  7. package/lib/components/banner/banner.a11y.test.ts +14 -0
  8. package/lib/components/block-link/block-link.a11y.test.ts +9 -2
  9. package/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts +2 -0
  10. package/lib/components/button/button.a11y.test.ts +132 -1
  11. package/lib/components/card/card.a11y.test.ts +6 -0
  12. package/lib/components/check-control/check-control.a11y.test.ts +9 -1
  13. package/lib/components/description/description.a11y.test.ts +5 -1
  14. package/lib/components/link/link.a11y.test.ts +19 -6
  15. package/lib/components/toggle-switch/toggle-switch.a11y.test.ts +5 -2
  16. package/lib/components/toggle-switch/toggle-switch.visual.test.ts +12 -11
  17. package/lib/test/axe-apca/README.md +34 -0
  18. package/lib/test/axe-apca/index.ts +3 -0
  19. package/lib/test/axe-apca/package.wip.json +30 -0
  20. package/lib/test/axe-apca/src/apca-w3.d.ts +3 -0
  21. package/lib/test/axe-apca/src/axe-apca.test.ts +155 -0
  22. package/lib/test/axe-apca/src/axe-apca.ts +212 -0
  23. package/lib/test/test-utils.ts +18 -1
  24. package/lib/tsconfig.json +1 -0
  25. package/package.json +11 -10
package/lib/components/badge/badge.a11y.test.ts CHANGED
@@ -25,6 +25,15 @@ describe("badge", () => {
25
25
  </span>`,
26
26
  },
27
27
  tag: "span",
28
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
29
+ skippedTestids: [
30
+ "s-badge-dark",
31
+ "s-badge-dark-gold",
32
+ "s-badge-dark",
33
+ "s-badge-dark-silver",
34
+ "s-badge-dark",
35
+ "s-badge-dark-bronze",
36
+ ],
28
37
  });
29
38
  });
30
39
 
@@ -41,12 +50,18 @@ describe("badge", () => {
41
50
  includeNullModifier: false,
42
51
  },
43
52
  tag: "span",
53
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
44
54
  skippedTestids: [
45
- "s-badge-dark-answered", // TODO remove when contrast bugs are fixed
46
- "s-badge-dark-important", // TODO remove when contrast bugs are fixed
47
- "s-badge-dark-rep-down", // TODO remove when contrast bugs are fixed
48
- "s-badge-light-answered", // TODO remove when contrast bugs are fixed
49
- "s-badge-light-rep", // TODO remove when contrast bugs are fixed
55
+ "s-badge-dark-answered",
56
+ "s-badge-dark-important",
57
+ "s-badge-dark-rep-down",
58
+ "s-badge-light-answered",
59
+ "s-badge-light-rep",
60
+ "s-badge-dark",
61
+ "s-badge-dark-bounty",
62
+ "s-badge-dark-rep",
63
+ "s-badge-dark-votes",
64
+ "s-badge-light-rep-down",
50
65
  ],
51
66
  });
52
67
 
@@ -67,6 +82,13 @@ describe("badge", () => {
67
82
  includeNullModifier: false,
68
83
  },
69
84
  tag: "span",
85
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
86
+ skippedTestids: [
87
+ "s-badge-dark-danger-icon",
88
+ "s-badge-dark-icon",
89
+ "s-badge-light-danger-icon",
90
+ "s-badge-light-warning-icon",
91
+ ],
70
92
  });
71
93
 
72
94
  // Filled badges
@@ -87,6 +109,11 @@ describe("badge", () => {
87
109
  includeNullVariant: false,
88
110
  },
89
111
  tag: "span",
112
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
113
+ skippedTestids: [
114
+ "s-badge-dark-danger-icon",
115
+ "s-badge-light-danger-icon",
116
+ ],
90
117
  });
91
118
 
92
119
  // User badges
@@ -101,8 +128,18 @@ describe("badge", () => {
101
128
  default: "user",
102
129
  },
103
130
  tag: "span",
131
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
104
132
  skippedTestids: [
105
- /^s-badge-dark-admin.*/, // TODO remove when contrast bugs are fixed
133
+ /^s-badge-dark-admin.*/,
134
+ "s-badge-dark",
135
+ "s-badge-dark-sm",
136
+ "s-badge-dark-xs",
137
+ "s-badge-light-admin",
138
+ "s-badge-light-admin-sm",
139
+ "s-badge-light-admin-xs",
140
+ "s-badge-light-staff",
141
+ "s-badge-light-staff-sm",
142
+ "s-badge-light-staff-xs",
106
143
  ],
107
144
  });
108
145
 
@@ -117,5 +154,7 @@ describe("badge", () => {
117
154
  default: "size badge",
118
155
  },
119
156
  tag: "span",
157
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
158
+ skippedTestids: ["s-badge-dark", "s-badge-dark-sm", "s-badge-dark-xs"],
120
159
  });
121
160
  });
package/lib/components/badge/badge.visual.test.ts CHANGED
@@ -24,7 +24,18 @@ const template = ({ component, testid }: any) => html`
24
24
  `;
25
25
 
26
26
  describe("badge", () => {
27
- // Award badges (Default/badge counts)
27
+ // Base badge
28
+ runComponentTests({
29
+ type: "visual",
30
+ baseClass: "s-badge",
31
+ children: {
32
+ default: `base badge`,
33
+ },
34
+ tag: "span",
35
+ template,
36
+ });
37
+
38
+ // Award badges
28
39
  variants.blings.map((bling) => {
29
40
  runComponentTests({
30
41
  type: "visual",
@@ -32,9 +43,14 @@ describe("badge", () => {
32
43
  variants: [bling],
33
44
  children: {
34
45
  default: `<span class="s-award-bling s-award-bling__${bling}">
35
- Altruist
46
+ with bling
36
47
  </span>`,
37
48
  },
49
+ options: {
50
+ ...defaultOptions,
51
+ includeNullVariant: false,
52
+ includeNullModifier: false,
53
+ },
38
54
  tag: "span",
39
55
  template,
40
56
  });
@@ -50,6 +66,7 @@ describe("badge", () => {
50
66
  },
51
67
  options: {
52
68
  ...defaultOptions,
69
+ includeNullVariant: false,
53
70
  includeNullModifier: false,
54
71
  },
55
72
  tag: "span",
@@ -81,9 +98,6 @@ describe("badge", () => {
81
98
  type: "visual",
82
99
  baseClass: "s-badge",
83
100
  variants: variants.states.filled,
84
- modifiers: {
85
- primary: ["icon"],
86
- },
87
101
  children: {
88
102
  default: "filled",
89
103
  // icon: Icons.IconEyeOffSm, // TODO fix the icon imports
@@ -108,6 +122,10 @@ describe("badge", () => {
108
122
  children: {
109
123
  default: "user badge",
110
124
  },
125
+ options: {
126
+ ...defaultOptions,
127
+ includeNullVariant: false,
128
+ },
111
129
  tag: "span",
112
130
  template,
113
131
  });
@@ -122,6 +140,10 @@ describe("badge", () => {
122
140
  children: {
123
141
  default: "size badge",
124
142
  },
143
+ options: {
144
+ ...defaultOptions,
145
+ includeNullModifier: false,
146
+ },
125
147
  tag: "span",
126
148
  template,
127
149
  });
package/lib/components/banner/banner.a11y.test.ts CHANGED
@@ -33,5 +33,19 @@ describe("banner", () => {
33
33
  children: {
34
34
  default: bannerChild,
35
35
  },
36
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
37
+ skippedTestids: [
38
+ "s-banner-dark",
39
+ "s-banner-dark-danger",
40
+ "s-banner-dark-danger-important",
41
+ "s-banner-dark-important",
42
+ "s-banner-dark-info",
43
+ "s-banner-dark-success",
44
+ "s-banner-dark-success-important",
45
+ "s-banner-dark-warning",
46
+ "s-banner-dark-warning-important",
47
+ "s-banner-light-success-important",
48
+ "s-banner-light-warning-important",
49
+ ],
36
50
  });
37
51
  });
package/lib/components/block-link/block-link.a11y.test.ts CHANGED
@@ -23,6 +23,8 @@ describe("block-link", () => {
23
23
  default: `block link`,
24
24
  },
25
25
  template: blockLinkTemplate,
26
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
27
+ skippedTestids: ["s-block-link-dark"],
26
28
  });
27
29
 
28
30
  // Base + danger
@@ -39,8 +41,12 @@ describe("block-link", () => {
39
41
  ...defaultOptions,
40
42
  includeNullModifier: false,
41
43
  },
42
- skippedTestids: ["s-block-link-dark-danger"],
43
44
  template: blockLinkTemplate,
45
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
46
+ skippedTestids: [
47
+ "s-block-link-dark-danger",
48
+ "s-block-link-light-danger",
49
+ ],
44
50
  });
45
51
 
46
52
  // All left and rignt variants
@@ -58,12 +64,13 @@ describe("block-link", () => {
58
64
  ...defaultOptions,
59
65
  includeNullVariant: false,
60
66
  },
67
+ template: blockLinkTemplate,
68
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
61
69
  skippedTestids: [
62
70
  "s-block-link-dark-left-is-selected-danger",
63
71
  "s-block-link-dark-right-is-selected-danger",
64
72
  "s-block-link-light-left-is-selected-danger",
65
73
  "s-block-link-light-right-is-selected-danger",
66
74
  ],
67
- template: blockLinkTemplate,
68
75
  });
69
76
  });
package/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts CHANGED
@@ -33,5 +33,7 @@ describe("breadcrumbs", () => {
33
33
  ${component}
34
34
  </div>
35
35
  `,
36
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
37
+ skippedTestids: ["s-breadcrumbs-dark", "s-breadcrumbs-light"],
36
38
  });
37
39
  });
package/lib/components/button/button.a11y.test.ts CHANGED
@@ -25,8 +25,139 @@ describe("button", () => {
25
25
  excludedTestids: [
26
26
  /primary-outlined/, // This combination is not supported
27
27
  ],
28
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
28
29
  skippedTestids: [
29
- /s-btn-dark/, // TODO remove when contrast bugs are fixed
30
+ "s-btn-light",
31
+ "s-btn-light-dropdown",
32
+ "s-btn-light-dropdown-is-loading",
33
+ "s-btn-light-icon",
34
+ "s-btn-light-icon-is-loading",
35
+ "s-btn-light-is-loading",
36
+ "s-btn-light-link",
37
+ "s-btn-light-muted-filled",
38
+ "s-btn-light-muted-filled-dropdown",
39
+ "s-btn-light-muted-filled-dropdown-is-loading",
40
+ "s-btn-light-muted-filled-icon",
41
+ "s-btn-light-muted-filled-icon-is-loading",
42
+ "s-btn-light-muted-filled-is-loading",
43
+ "s-btn-light-muted-filled-sm",
44
+ "s-btn-light-muted-filled-sm-is-loading",
45
+ "s-btn-light-muted-filled-xs",
46
+ "s-btn-light-muted-filled-xs-is-loading",
47
+ "s-btn-light-outlined",
48
+ "s-btn-light-outlined-dropdown",
49
+ "s-btn-light-outlined-dropdown-is-loading",
50
+ "s-btn-light-outlined-icon",
51
+ "s-btn-light-outlined-icon-is-loading",
52
+ "s-btn-light-outlined-is-loading",
53
+ "s-btn-light-outlined-sm",
54
+ "s-btn-light-outlined-sm-is-loading",
55
+ "s-btn-light-outlined-xs",
56
+ "s-btn-light-outlined-xs-is-loading",
57
+ "s-btn-light-sm",
58
+ "s-btn-light-sm-is-loading",
59
+ "s-btn-light-xs",
60
+ "s-btn-light-xs-is-loading",
61
+ "s-btn-dark",
62
+ "s-btn-dark-danger",
63
+ "s-btn-dark-danger-dropdown",
64
+ "s-btn-dark-danger-dropdown-is-loading",
65
+ "s-btn-dark-danger-icon",
66
+ "s-btn-dark-danger-icon-is-loading",
67
+ "s-btn-dark-danger-is-loading",
68
+ "s-btn-dark-danger-md",
69
+ "s-btn-dark-danger-md-is-loading",
70
+ "s-btn-dark-danger-outlined",
71
+ "s-btn-dark-danger-outlined-dropdown",
72
+ "s-btn-dark-danger-outlined-dropdown-is-loading",
73
+ "s-btn-dark-danger-outlined-icon",
74
+ "s-btn-dark-danger-outlined-icon-is-loading",
75
+ "s-btn-dark-danger-outlined-is-loading",
76
+ "s-btn-dark-danger-outlined-md",
77
+ "s-btn-dark-danger-outlined-md-is-loading",
78
+ "s-btn-dark-danger-outlined-sm",
79
+ "s-btn-dark-danger-outlined-sm-is-loading",
80
+ "s-btn-dark-danger-outlined-xs",
81
+ "s-btn-dark-danger-outlined-xs-is-loading",
82
+ "s-btn-dark-danger-sm",
83
+ "s-btn-dark-danger-sm-is-loading",
84
+ "s-btn-dark-danger-xs",
85
+ "s-btn-dark-danger-xs-is-loading",
86
+ "s-btn-dark-dropdown",
87
+ "s-btn-dark-dropdown-is-loading",
88
+ "s-btn-dark-filled",
89
+ "s-btn-dark-filled-dropdown",
90
+ "s-btn-dark-filled-dropdown-is-loading",
91
+ "s-btn-dark-filled-icon",
92
+ "s-btn-dark-filled-icon-is-loading",
93
+ "s-btn-dark-filled-is-loading",
94
+ "s-btn-dark-filled-sm",
95
+ "s-btn-dark-filled-sm-is-loading",
96
+ "s-btn-dark-filled-xs",
97
+ "s-btn-dark-filled-xs-is-loading",
98
+ "s-btn-dark-google",
99
+ "s-btn-dark-icon",
100
+ "s-btn-dark-icon-is-loading",
101
+ "s-btn-dark-is-loading",
102
+ "s-btn-dark-link",
103
+ "s-btn-dark-md",
104
+ "s-btn-dark-md-is-loading",
105
+ "s-btn-dark-muted",
106
+ "s-btn-dark-muted-dropdown",
107
+ "s-btn-dark-muted-dropdown-is-loading",
108
+ "s-btn-dark-muted-filled",
109
+ "s-btn-dark-muted-filled-dropdown",
110
+ "s-btn-dark-muted-filled-dropdown-is-loading",
111
+ "s-btn-dark-muted-filled-icon",
112
+ "s-btn-dark-muted-filled-icon-is-loading",
113
+ "s-btn-dark-muted-filled-is-loading",
114
+ "s-btn-dark-muted-filled-sm",
115
+ "s-btn-dark-muted-filled-sm-is-loading",
116
+ "s-btn-dark-muted-filled-xs",
117
+ "s-btn-dark-muted-filled-xs-is-loading",
118
+ "s-btn-dark-muted-icon",
119
+ "s-btn-dark-muted-icon-is-loading",
120
+ "s-btn-dark-muted-is-loading",
121
+ "s-btn-dark-muted-outlined",
122
+ "s-btn-dark-muted-outlined-dropdown",
123
+ "s-btn-dark-muted-outlined-dropdown-is-loading",
124
+ "s-btn-dark-muted-outlined-icon",
125
+ "s-btn-dark-muted-outlined-icon-is-loading",
126
+ "s-btn-dark-muted-outlined-is-loading",
127
+ "s-btn-dark-muted-outlined-sm",
128
+ "s-btn-dark-muted-outlined-sm-is-loading",
129
+ "s-btn-dark-muted-outlined-xs",
130
+ "s-btn-dark-muted-outlined-xs-is-loading",
131
+ "s-btn-dark-muted-sm",
132
+ "s-btn-dark-muted-sm-is-loading",
133
+ "s-btn-dark-muted-xs",
134
+ "s-btn-dark-muted-xs-is-loading",
135
+ "s-btn-dark-outlined",
136
+ "s-btn-dark-outlined-dropdown",
137
+ "s-btn-dark-outlined-dropdown-is-loading",
138
+ "s-btn-dark-outlined-icon",
139
+ "s-btn-dark-outlined-icon-is-loading",
140
+ "s-btn-dark-outlined-is-loading",
141
+ "s-btn-dark-outlined-md",
142
+ "s-btn-dark-outlined-md-is-loading",
143
+ "s-btn-dark-outlined-sm",
144
+ "s-btn-dark-outlined-sm-is-loading",
145
+ "s-btn-dark-outlined-xs",
146
+ "s-btn-dark-outlined-xs-is-loading",
147
+ "s-btn-dark-primary-filled",
148
+ "s-btn-dark-primary-filled-dropdown",
149
+ "s-btn-dark-primary-filled-dropdown-is-loading",
150
+ "s-btn-dark-primary-filled-icon",
151
+ "s-btn-dark-primary-filled-icon-is-loading",
152
+ "s-btn-dark-primary-filled-is-loading",
153
+ "s-btn-dark-primary-filled-sm",
154
+ "s-btn-dark-primary-filled-sm-is-loading",
155
+ "s-btn-dark-primary-filled-xs",
156
+ "s-btn-dark-primary-filled-xs-is-loading",
157
+ "s-btn-dark-sm",
158
+ "s-btn-dark-sm-is-loading",
159
+ "s-btn-dark-xs",
160
+ "s-btn-dark-xs-is-loading",
30
161
  ],
31
162
  });
32
163
  });
package/lib/components/card/card.a11y.test.ts CHANGED
@@ -9,5 +9,11 @@ describe("card", () => {
9
9
  children: {
10
10
  default: `<p>This is a description of the card’s content.</p>`,
11
11
  },
12
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
13
+ skippedTestids: [
14
+ "s-card-dark-muted",
15
+ "s-card-light-muted",
16
+ "s-card-highcontrast-light-muted",
17
+ ],
12
18
  });
13
19
  });
package/lib/components/check-control/check-control.a11y.test.ts CHANGED
@@ -29,10 +29,18 @@ import "../../index";
29
29
  ...defaultOptions,
30
30
  testidSuffix: `${state}-${type}`,
31
31
  },
32
- // TODO remove when contrast bugs are fixed
32
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
33
33
  skippedTestids: [
34
34
  /^s-check-control-dark-has-error-(checked|unchecked)-(checkbox|radio)$/,
35
35
  /^s-check-control-light-has-(success|warning)-(checked|unchecked)-(checkbox|radio)$/,
36
+ "s-check-control-dark-has-success-checked-checkbox",
37
+ "s-check-control-light-has-error-checked-checkbox",
38
+ "s-check-control-dark-has-success-unchecked-checkbox",
39
+ "s-check-control-light-has-error-unchecked-checkbox",
40
+ "s-check-control-dark-has-success-checked-radio",
41
+ "s-check-control-light-has-error-checked-radio",
42
+ "s-check-control-dark-has-success-unchecked-radio",
43
+ "s-check-control-light-has-error-unchecked-radio",
36
44
  ],
37
45
  });
38
46
  });
package/lib/components/description/description.a11y.test.ts CHANGED
@@ -24,7 +24,11 @@ import "../../index";
24
24
  ${component}
25
25
  </div>
26
26
  `,
27
- skippedTestids: [/^.*-is-disabled$/],
27
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
28
+ skippedTestids: [
29
+ /^.*-is-disabled$/, // TODO: should these the disabled tests be excluded all together instead of skipped?
30
+ "s-description-dark",
31
+ ],
28
32
  });
29
33
  });
30
34
  });
package/lib/components/link/link.a11y.test.ts CHANGED
@@ -24,13 +24,26 @@ describe("link", () => {
24
24
  attributes: {
25
25
  href: "#",
26
26
  },
27
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
27
28
  skippedTestids: [
28
- "s-link-dark", // TODO fix contrast issue
29
- "s-link-dark-dropdown", // TODO fix contrast issue
30
- "s-link-dark-danger", // TODO fix contrast issue
31
- "s-link-dark-danger-dropdown", // TODO fix contrast issue
32
- "s-link-dark-underlined", // TODO fix contrast issue
33
- "s-link-dark-underlined-dropdown", // TODO fix contrast issue
29
+ "s-link-dark",
30
+ "s-link-dark-dropdown",
31
+ "s-link-dark-danger",
32
+ "s-link-dark-danger-dropdown",
33
+ "s-link-dark-underlined",
34
+ "s-link-dark-underlined-dropdown",
35
+ "s-link-dark-muted",
36
+ "s-link-dark-muted-dropdown",
37
+ "s-link-dark-visited",
38
+ "s-link-dark-visited-dropdown",
39
+ "s-link-light",
40
+ "s-link-light-danger",
41
+ "s-link-light-danger-dropdown",
42
+ "s-link-light-dropdown",
43
+ "s-link-light-muted",
44
+ "s-link-light-muted-dropdown",
45
+ "s-link-light-underlined",
46
+ "s-link-light-underlined-dropdown",
34
47
  ],
35
48
  });
36
49
  });
package/lib/components/toggle-switch/toggle-switch.a11y.test.ts CHANGED
@@ -64,9 +64,12 @@ describe("toggle-switch", () => {
64
64
  template: ({ component, testid }) => html`
65
65
  <div data-testid="${testid}">${component}</div>
66
66
  `,
67
+ // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
67
68
  skippedTestids: [
68
- "s-toggle-switch-dark-multiple", // TODO fix contrast issue
69
- "s-toggle-switch-light-multiple", // TODO fix contrast issue
69
+ "s-toggle-switch-dark-multiple",
70
+ "s-toggle-switch-light-multiple",
71
+ "s-toggle-switch-dark-multiple-off",
72
+ "s-toggle-switch-light-multiple-off",
70
73
  ],
71
74
  });
72
75
  });
package/lib/components/toggle-switch/toggle-switch.visual.test.ts CHANGED
@@ -6,17 +6,14 @@ describe("toggle-switch", () => {
6
6
  // Single toggle switch
7
7
  [true, false].forEach((checked) => {
8
8
  [true, false].forEach((disabled) => {
9
- const idSuffix = `${checked ? "-checked" : ""}${
10
- disabled ? "-disabled" : ""
9
+ const testidSuffix = `${checked ? "checked" : "unchecked"}${
10
+ disabled ? "-disabled" : "-enabled"
11
11
  }`;
12
- const id = `toggle-switch${idSuffix}`;
12
+ const id = `toggle-switch-${testidSuffix}`;
13
13
 
14
14
  runComponentTests({
15
15
  type: "visual",
16
16
  baseClass: "s-toggle-switch",
17
- modifiers: {
18
- global: idSuffix ? [idSuffix.substring(1)] : [], // for proper testid generation
19
- },
20
17
  tag: "input",
21
18
  attributes: {
22
19
  id,
@@ -24,6 +21,11 @@ describe("toggle-switch", () => {
24
21
  ...(checked ? { checked: "" } : {}),
25
22
  ...(disabled ? { disabled: "" } : {}),
26
23
  },
24
+ options: {
25
+ ...defaultOptions,
26
+ includeNullModifier: false,
27
+ testidSuffix,
28
+ },
27
29
  template: ({ component, testid }) => html`
28
30
  <div data-testid="${testid}" class="p4 ws1">
29
31
  <label class="v-visible-sr" for="${id}">toggle</label>
@@ -40,15 +42,12 @@ describe("toggle-switch", () => {
40
42
  type: "visual",
41
43
  baseClass: "s-toggle-switch",
42
44
  variants: ["multiple"],
43
- modifiers: {
44
- global: offChecked ? ["off"] : [], // for proper testid generation
45
- },
46
45
  children: {
47
46
  default: `
48
- <input type="radio" name="group" id="four" ${
47
+ <input type="radio" name="group" id="off" ${
49
48
  offChecked ? 'checked=""' : ""
50
49
  }>
51
- <label for="four" class="s-toggle-switch--label-off">Off</label>
50
+ <label for="off" class="s-toggle-switch--label-off">Off</label>
52
51
  <input type="radio" name="group" id="one" ${
53
52
  !offChecked ? 'checked=""' : ""
54
53
  }>
@@ -61,7 +60,9 @@ describe("toggle-switch", () => {
61
60
  },
62
61
  options: {
63
62
  ...defaultOptions,
63
+ includeNullModifier: false,
64
64
  includeNullVariant: false,
65
+ testidSuffix: offChecked ? "unchecked" : "checked",
65
66
  },
66
67
  template: ({ component, testid }) => html`
67
68
  <div data-testid="${testid}" class="d-flex ai-center g8 p4 ws2">
package/lib/test/axe-apca/README.md ADDED
@@ -0,0 +1,34 @@
1
+ # axe-apca
2
+
3
+ ⚠️ *Once this package become more mature and stable it should be extracted in its own repo (e.g. StackExchange/axe-apca) and published as an npm package. This will allow to use the rule/checks in many contexts including our Core codebase.*
4
+
5
+ This package contains custom axe rules and checks for [APCA](https://readtech.org/) Bronze and Silver+ [conformance levels](https://readtech.org/ARC/tests/visual-readability-contrast/?tn=criterion).
6
+
7
+ ## Usage
8
+
9
+ ### Installation
10
+
11
+ ⚠️ *The following command doesn't work because this package is not published on npm yet.*
12
+
13
+ ```bash
14
+ npm install --save-dev axe-core axe-apca
15
+ ```
16
+
17
+ ### Setup
18
+
19
+ ```js
20
+ import axe from "axe-core";
21
+ import { registerAxeAPCA } from 'axe-apca';
22
+
23
+ registerAxeAPCA('bronze'); // or registerAxeAPCA('silver');
24
+
25
+ // consider turning off default WCAG 2.1 AA color contrast rules when using APCA
26
+ axe.configure({
27
+ rules: [{ id: "color-contrast", enabled: false }]
28
+ })
29
+
30
+ axe.run(document, (err, results) => {
31
+ if (err) throw err;
32
+ console.log(results);
33
+ });
34
+ ```
package/lib/test/axe-apca/index.ts ADDED
@@ -0,0 +1,3 @@
1
+ import registerAxeAPCA from "./src/axe-apca";
2
+
3
+ export default registerAxeAPCA;
package/lib/test/axe-apca/package.wip.json ADDED
@@ -0,0 +1,30 @@
1
+ {
2
+ "name": "axe-apca",
3
+ "description": "Axe rules to check against APCA bronze and silver+ conformance levels.",
4
+ "repository": {
5
+ "type": "git",
6
+ "url": "https://github.com/StackExchange/axe-apca.git"
7
+ },
8
+ "version": "0.0.0",
9
+ "main": "TODO",
10
+ "types": "TODO",
11
+ "scripts": {
12
+ "build": "TODO: transpile ts to js",
13
+ "test": "web-test-runner"
14
+ },
15
+ "license": "MIT",
16
+ "dependencies": {
17
+ "apca-w3": "^0.1.9"
18
+ },
19
+ "peerDependencies": {
20
+ "axe-core": "^4.0.0"
21
+ },
22
+ "devDependencies": {
23
+ "@open-wc/testing": "^3.2.0",
24
+ "@web/dev-server-esbuild": "^0.4.1",
25
+ "@web/dev-server-rollup": "^0.5.2",
26
+ "@web/test-runner": "^0.16.1",
27
+ "@web/test-runner-playwright": "^0.10.1",
28
+ "typescript": "^5.1.6"
29
+ }
30
+ }
package/lib/test/axe-apca/src/apca-w3.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ declare module "apca-w3" {
2
+ export function calcAPCA(textColor: string, bgColor: string): number;
3
+ }