@stackoverflow/stacks 2.0.0-rc.10 → 2.0.0-rc.11
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.
- package/dist/css/stacks.css +33 -22
- package/dist/css/stacks.min.css +1 -1
- package/lib/components/badge/badge.less +10 -10
- package/lib/components/code-block/code-block.a11y.test.ts +1 -1
- package/lib/components/input_textarea/input_textarea.a11y.test.ts +112 -0
- package/lib/components/input_textarea/input_textarea.visual.test.ts +98 -0
- package/lib/components/modal/modal.less +1 -0
- package/lib/components/navigation/navigation.a11y.test.ts +0 -2
- package/lib/components/post-summary/post-summary.less +1 -1
- package/lib/components/tag/tag.a11y.test.ts +7 -1
- package/lib/components/topbar/topbar.less +25 -9
- package/lib/components/user-card/user-card.less +2 -2
- package/lib/test/test-utils.ts +1 -3
- package/package.json +1 -1
|
@@ -13,17 +13,17 @@
|
|
|
13
13
|
// CONTEXTUAL STYLES
|
|
14
14
|
.highcontrast-mode({
|
|
15
15
|
// Badge counts
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
&__gold,
|
|
17
|
+
&__silver,
|
|
18
|
+
&__bronze,
|
|
19
19
|
// Number counts
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
&__rep,
|
|
21
|
+
&__rep-down,
|
|
22
|
+
&__votes:not(.s-badge__answered),
|
|
23
23
|
// Users
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
&__admin,
|
|
25
|
+
&__moderator,
|
|
26
|
+
&__staff {
|
|
27
27
|
--_ba-bc: currentColor;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
|
|
114
114
|
// Users
|
|
115
115
|
&&__admin {
|
|
116
|
-
--_ba-bc: var(--theme-primary-
|
|
116
|
+
--_ba-bc: var(--theme-primary-200);
|
|
117
117
|
--_ba-bg: var(--theme-primary-100);
|
|
118
118
|
--_ba-fc: var(--theme-primary-500);
|
|
119
119
|
}
|
|
@@ -15,7 +15,7 @@ describe("code block", () => {
|
|
|
15
15
|
...defaultOptions,
|
|
16
16
|
includeNullModifier: false,
|
|
17
17
|
},
|
|
18
|
-
// TODO
|
|
18
|
+
// TODO revisit these skipped test ids
|
|
19
19
|
skippedTestids: [
|
|
20
20
|
"s-code-block-language-html-light",
|
|
21
21
|
"s-code-block-language-html-highcontrast-light",
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { html } from "@open-wc/testing";
|
|
2
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
// TODO note: all accessibility tests here are skipped currently. Revisit in Stacks v2
|
|
6
|
+
|
|
7
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
8
|
+
const template = ({ component, testid, classes = "", icon }: any) => html`
|
|
9
|
+
<div data-testid="${testid}" class="p8 ws4 ${classes}">
|
|
10
|
+
<label for="default-id">Label</label>
|
|
11
|
+
${component}${icon}
|
|
12
|
+
</div>
|
|
13
|
+
`;
|
|
14
|
+
|
|
15
|
+
const customAttributes = [
|
|
16
|
+
{
|
|
17
|
+
placeholder: "Enter your text here",
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
readonly: "",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
disabled: "",
|
|
24
|
+
},
|
|
25
|
+
];
|
|
26
|
+
|
|
27
|
+
const states = ["has-error", "has-warning", "has-success"];
|
|
28
|
+
const sizes = ["sm", "md", "lg", "xl"];
|
|
29
|
+
const otherModifiers = ["creditcard", "search"];
|
|
30
|
+
|
|
31
|
+
["input", "textarea"].map((type) => {
|
|
32
|
+
const children =
|
|
33
|
+
type === "textarea" ? { default: "Enter your text here" } : undefined;
|
|
34
|
+
|
|
35
|
+
describe(type, () => {
|
|
36
|
+
// Base styles w/ value, modifiers
|
|
37
|
+
runComponentTests({
|
|
38
|
+
type: "a11y",
|
|
39
|
+
baseClass: `s-${type}`,
|
|
40
|
+
modifiers: {
|
|
41
|
+
primary: [...sizes, ...otherModifiers],
|
|
42
|
+
},
|
|
43
|
+
tag: type,
|
|
44
|
+
attributes:
|
|
45
|
+
type === "input"
|
|
46
|
+
? {
|
|
47
|
+
type: "text",
|
|
48
|
+
value: "Text input value",
|
|
49
|
+
id: `default-id`,
|
|
50
|
+
}
|
|
51
|
+
: {
|
|
52
|
+
id: `default-id`,
|
|
53
|
+
},
|
|
54
|
+
children,
|
|
55
|
+
template,
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
// Base styles w/o value; w/ readonly attr; w/ disabled attr
|
|
59
|
+
customAttributes.forEach((attributes) => {
|
|
60
|
+
const attrString = Object.keys(attributes).sort().join("-");
|
|
61
|
+
|
|
62
|
+
runComponentTests({
|
|
63
|
+
type: "a11y",
|
|
64
|
+
baseClass: `s-${type} ${attrString}`,
|
|
65
|
+
tag: type,
|
|
66
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
67
|
+
// @ts-ignore
|
|
68
|
+
attributes:
|
|
69
|
+
type === "input"
|
|
70
|
+
? {
|
|
71
|
+
type: "text",
|
|
72
|
+
value: attributes.placeholder
|
|
73
|
+
? null
|
|
74
|
+
: "Text input value",
|
|
75
|
+
id: `default-id`,
|
|
76
|
+
...attributes,
|
|
77
|
+
}
|
|
78
|
+
: {
|
|
79
|
+
id: `default-id`,
|
|
80
|
+
...attributes,
|
|
81
|
+
},
|
|
82
|
+
children,
|
|
83
|
+
template,
|
|
84
|
+
// TODO revisit these skipped test ids
|
|
85
|
+
skippedTestids: [/readonly/],
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
// w/ state classes
|
|
90
|
+
states.forEach((state) => {
|
|
91
|
+
runComponentTests({
|
|
92
|
+
type: "a11y",
|
|
93
|
+
baseClass: `s-${type} state-${state}`,
|
|
94
|
+
tag: type,
|
|
95
|
+
attributes:
|
|
96
|
+
type === "input"
|
|
97
|
+
? {
|
|
98
|
+
type: "text",
|
|
99
|
+
value: "Text input value",
|
|
100
|
+
id: `default-id`,
|
|
101
|
+
}
|
|
102
|
+
: {
|
|
103
|
+
id: "default-id",
|
|
104
|
+
},
|
|
105
|
+
children,
|
|
106
|
+
template: ({ component, testid }) =>
|
|
107
|
+
template({ component, testid, classes: state }),
|
|
108
|
+
});
|
|
109
|
+
});
|
|
110
|
+
// TODO interaction (focus) states?
|
|
111
|
+
});
|
|
112
|
+
});
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { html } from "@open-wc/testing";
|
|
2
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
6
|
+
const template = ({ component, testid, classes = "", icon }: any) => html`
|
|
7
|
+
<div data-testid="${testid}" class="p8 ws4 ${classes}">
|
|
8
|
+
${component}${icon}
|
|
9
|
+
</div>
|
|
10
|
+
`;
|
|
11
|
+
|
|
12
|
+
const customAttributes = [
|
|
13
|
+
{
|
|
14
|
+
placeholder: "Enter your text here",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
readonly: "",
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
disabled: "",
|
|
21
|
+
},
|
|
22
|
+
] as Record<string, string>[];
|
|
23
|
+
|
|
24
|
+
const states = ["has-error", "has-warning", "has-success", "is-readonly"];
|
|
25
|
+
const sizes = ["sm", "md", "lg", "xl"];
|
|
26
|
+
const otherModifiers = ["creditcard", "search"];
|
|
27
|
+
|
|
28
|
+
["input", "textarea"].map((type) => {
|
|
29
|
+
const children =
|
|
30
|
+
type === "textarea" ? { default: "Enter your text here" } : undefined;
|
|
31
|
+
|
|
32
|
+
describe(type, () => {
|
|
33
|
+
// Base styles w/ value, modifiers
|
|
34
|
+
runComponentTests({
|
|
35
|
+
type: "visual",
|
|
36
|
+
baseClass: `s-${type}`,
|
|
37
|
+
modifiers: {
|
|
38
|
+
primary: [...sizes, ...otherModifiers],
|
|
39
|
+
},
|
|
40
|
+
tag: type,
|
|
41
|
+
attributes:
|
|
42
|
+
type === "input"
|
|
43
|
+
? {
|
|
44
|
+
type: "text",
|
|
45
|
+
value: "Text input value",
|
|
46
|
+
}
|
|
47
|
+
: {},
|
|
48
|
+
children,
|
|
49
|
+
template,
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
// Base styles w/o value; w/ readonly attr; w/ disabled attr
|
|
53
|
+
customAttributes.forEach((attributes) => {
|
|
54
|
+
const attrString = Object.keys(attributes).sort().join("-");
|
|
55
|
+
let attr = attributes;
|
|
56
|
+
if (type === "input") {
|
|
57
|
+
attr = {
|
|
58
|
+
type: "text",
|
|
59
|
+
...attributes,
|
|
60
|
+
};
|
|
61
|
+
if (!attributes.placeholder) {
|
|
62
|
+
attr = {
|
|
63
|
+
value: "Text input value",
|
|
64
|
+
...attr,
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
runComponentTests({
|
|
69
|
+
type: "visual",
|
|
70
|
+
baseClass: `s-${type} ${attrString}`,
|
|
71
|
+
tag: type,
|
|
72
|
+
attributes: attr,
|
|
73
|
+
children,
|
|
74
|
+
template,
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
// w/ state classes; .is-readonly
|
|
79
|
+
states.forEach((state) => {
|
|
80
|
+
runComponentTests({
|
|
81
|
+
type: "visual",
|
|
82
|
+
baseClass: `s-${type} state-${state}`,
|
|
83
|
+
tag: type,
|
|
84
|
+
attributes:
|
|
85
|
+
type === "input"
|
|
86
|
+
? {
|
|
87
|
+
type: "text",
|
|
88
|
+
value: "Text input value",
|
|
89
|
+
}
|
|
90
|
+
: {},
|
|
91
|
+
children,
|
|
92
|
+
template: ({ component, testid }) =>
|
|
93
|
+
template({ component, testid, classes: state }),
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
// TODO interaction (focus) states?
|
|
97
|
+
});
|
|
98
|
+
});
|
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
|
|
116
116
|
&&__watched {
|
|
117
117
|
&:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
|
|
118
|
-
--_ps-bg: var(--yellow-
|
|
118
|
+
--_ps-bg: var(--yellow-100);
|
|
119
119
|
--_ps-stats-fc: var(--black-400);
|
|
120
120
|
--_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400)));
|
|
121
121
|
--_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500)));
|
|
@@ -18,6 +18,12 @@ describe("tag", () => {
|
|
|
18
18
|
},
|
|
19
19
|
children,
|
|
20
20
|
// TODO: revisit this after minor tag changes are made
|
|
21
|
-
skippedTestids: [
|
|
21
|
+
skippedTestids: [
|
|
22
|
+
/s-tag-highcontrast-light-muted/, // 6.33
|
|
23
|
+
/s-tag-light-is-selected/, // 58.28Lc
|
|
24
|
+
/s-tag-light-ignored-is-selected/, // 58.28Lc
|
|
25
|
+
/s-tag-light-moderator-is-selected/, // 49.14Lc
|
|
26
|
+
/s-tag-light-watched-is-selected/, // 58.28Lc
|
|
27
|
+
],
|
|
22
28
|
});
|
|
23
29
|
});
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
// Redefine the variables for extra contrast in high-contrast mode
|
|
20
20
|
.highcontrast-mode({
|
|
21
21
|
// Search input
|
|
22
|
-
--theme-topbar-search-color: var(--theme-topbar-item-color, var(--black-
|
|
22
|
+
--theme-topbar-search-color: var(--theme-topbar-item-color, var(--black-400));
|
|
23
23
|
--theme-topbar-search-background: var(--theme-topbar-background-color, var(--white));
|
|
24
|
-
--theme-topbar-search-placeholder: var(--theme-topbar-item-color, var(--black-
|
|
25
|
-
--theme-topbar-search-border: var(--theme-topbar-item-color, var(--black-
|
|
26
|
-
--theme-topbar-search-border-focus: var(--theme-topbar-item-color, var(--black-
|
|
24
|
+
--theme-topbar-search-placeholder: var(--theme-topbar-item-color, var(--black-400));
|
|
25
|
+
--theme-topbar-search-border: var(--theme-topbar-item-color, var(--black-400));
|
|
26
|
+
--theme-topbar-search-border-focus: var(--theme-topbar-item-color, var(--black-400));
|
|
27
27
|
|
|
28
28
|
// Search switcher
|
|
29
|
-
--theme-topbar-select-color: var(--theme-topbar-item-color, var(--black-
|
|
29
|
+
--theme-topbar-select-color: var(--theme-topbar-item-color, var(--black-400));
|
|
30
30
|
--theme-topbar-select-background: var(--theme-topbar-background-color, var(--white));
|
|
31
31
|
|
|
32
32
|
// Topbar items
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
&:after {
|
|
81
81
|
width: var(--su-static16);
|
|
82
82
|
height: var(--su-static2);
|
|
83
|
-
background-color: var(--theme-topbar-item-color, var(--black-
|
|
83
|
+
background-color: var(--theme-topbar-item-color, var(--black-400));
|
|
84
84
|
position: relative;
|
|
85
85
|
}
|
|
86
86
|
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
|
|
130
130
|
}
|
|
131
131
|
.s-navigation--item:not(.is-selected) {
|
|
132
|
-
color: var(--theme-topbar-item-color, var(--black-
|
|
132
|
+
color: var(--theme-topbar-item-color, var(--black-400));
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
.s-navigation--item:not(.is-selected):hover {
|
|
@@ -137,6 +137,22 @@
|
|
|
137
137
|
background-color: var(--theme-topbar-item-background-hover, var(--black-200));
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
|
+
.s-popover .s-navigation {
|
|
141
|
+
.s-navigation--item {
|
|
142
|
+
&:focus-visible {
|
|
143
|
+
box-shadow: var(0 0 0 var(--su-static4) var(--focus-ring));
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
&:not(.is-selected) {
|
|
147
|
+
&:hover {
|
|
148
|
+
color: var(--black-600);
|
|
149
|
+
background-color: var(--black-200);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
color: var(--black-500);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
140
156
|
}
|
|
141
157
|
|
|
142
158
|
// ===========================================================================
|
|
@@ -267,7 +283,7 @@
|
|
|
267
283
|
margin-left: auto; // Push this section as far to the right as possible
|
|
268
284
|
|
|
269
285
|
.s-topbar--item:not(.s-topbar--item__unset) {
|
|
270
|
-
color: var(--theme-topbar-item-color, var(--black-
|
|
286
|
+
color: var(--theme-topbar-item-color, var(--black-400));
|
|
271
287
|
display: inline-flex;
|
|
272
288
|
align-items: center;
|
|
273
289
|
padding: 0 calc(var(--su12) - var(--su2));
|
|
@@ -325,7 +341,7 @@
|
|
|
325
341
|
margin-right: var(--su8);
|
|
326
342
|
flex-shrink: 0;
|
|
327
343
|
|
|
328
|
-
.topbar-notice-styles(transparent, transparent, var(--theme-topbar-item-color, var(--black-
|
|
344
|
+
.topbar-notice-styles(transparent, transparent, var(--theme-topbar-item-color, var(--black-400)));
|
|
329
345
|
|
|
330
346
|
&:hover,
|
|
331
347
|
&:focus {
|
package/lib/test/test-utils.ts
CHANGED