testaro 4.7.1 → 4.7.2
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/package.json
CHANGED
|
@@ -42,13 +42,14 @@
|
|
|
42
42
|
"withItems": true,
|
|
43
43
|
"what": "focus indication",
|
|
44
44
|
"expect": [
|
|
45
|
-
["totals.total", "=",
|
|
46
|
-
["totals.types.indicatorMissing.total", "=",
|
|
45
|
+
["totals.total", "=", 9],
|
|
46
|
+
["totals.types.indicatorMissing.total", "=", 3],
|
|
47
47
|
["totals.types.indicatorMissing.tagNames.A", "=", 1],
|
|
48
|
-
["totals.types.indicatorMissing.tagNames.INPUT", "=",
|
|
49
|
-
["totals.types.nonOutlinePresent.total", "=",
|
|
48
|
+
["totals.types.indicatorMissing.tagNames.INPUT", "=", 2],
|
|
49
|
+
["totals.types.nonOutlinePresent.total", "=", 3],
|
|
50
50
|
["totals.types.nonOutlinePresent.tagNames.A", "=", 1],
|
|
51
51
|
["totals.types.nonOutlinePresent.tagNames.BUTTON", "=", 1],
|
|
52
|
+
["totals.types.nonOutlinePresent.tagNames.INPUT", "=", 1],
|
|
52
53
|
["totals.types.outlinePresent.total", "=", 3],
|
|
53
54
|
["totals.types.outlinePresent.tagNames.A", "=", 1],
|
|
54
55
|
["totals.types.outlinePresent.tagNames.BUTTON", "=", 1],
|
|
@@ -7,22 +7,28 @@
|
|
|
7
7
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
8
8
|
<style>
|
|
9
9
|
#button:focus, #checkbox:focus {
|
|
10
|
-
outline: 3px blue
|
|
10
|
+
outline: 3px solid blue;
|
|
11
11
|
outline-offset: 2px;
|
|
12
12
|
}
|
|
13
|
-
#slowLink:focus, #sluggishLink:focus {
|
|
14
|
-
border: 2px green solid;
|
|
15
|
-
outline: none;
|
|
16
|
-
}
|
|
17
13
|
#checkbox {
|
|
18
14
|
transition-property: outline;
|
|
19
15
|
transition-delay: 35ms;
|
|
20
16
|
transition-duration: 40ms;
|
|
21
17
|
}
|
|
18
|
+
#outlinedInput {
|
|
19
|
+
outline: 2px solid black;
|
|
20
|
+
}
|
|
21
|
+
#outlinedInput:focus {
|
|
22
|
+
outline: 2px solid brown;
|
|
23
|
+
}
|
|
22
24
|
#slowLink {
|
|
23
25
|
transition-property: border;
|
|
24
26
|
transition-delay: 125ms;
|
|
25
27
|
}
|
|
28
|
+
#slowLink:focus, #sluggishLink:focus {
|
|
29
|
+
border: 2px solid green;
|
|
30
|
+
outline: none;
|
|
31
|
+
}
|
|
26
32
|
#sluggishLink {
|
|
27
33
|
transition-property: border;
|
|
28
34
|
transition-delay: 525ms;
|
|
@@ -35,6 +41,12 @@
|
|
|
35
41
|
#textInput:focus {
|
|
36
42
|
outline: none;
|
|
37
43
|
}
|
|
44
|
+
#thickOutlineInput {
|
|
45
|
+
outline: 1px solid black;
|
|
46
|
+
}
|
|
47
|
+
#thickOutlineInput:focus {
|
|
48
|
+
outline: 4px solid black;
|
|
49
|
+
}
|
|
38
50
|
</style>
|
|
39
51
|
</head>
|
|
40
52
|
<body>
|
|
@@ -43,6 +55,8 @@
|
|
|
43
55
|
<p>This paragraph contains a link to <a href="https://en.wikipedia.org">English information</a>, which exhibits a default focus indicator.</p>
|
|
44
56
|
<p>This paragraph contains a <button id="button" type="button">button</button> with a custom outline as its focus indicator.</p>
|
|
45
57
|
<p>This paragraph contains a <label>text input <input id="textInput" type="text"></label> with the focus indicator suppressed.</p>
|
|
58
|
+
<p>This paragraph contains a <label>text input <input id="outlinedInput" type="text"></label> with a custom outline, which changes only color when the input is focused.</p>
|
|
59
|
+
<p>This paragraph contains a <label>text input <input id="thickOutlineInput" type="text"></label> with a custom outline, which changes only thickness when the input is focused.</p>
|
|
46
60
|
<p>This paragraph contains a checkbox with an enhanced focus-indication outline that finishes appearing 75 ms after the checkbox becomes focused. <label><input id="checkbox" type="checkbox"> I am a bad page.</label></p>
|
|
47
61
|
<p>This paragraph contains a link to <a id="slowLink" href="https://fr.wikipedia.org">French information</a> with a custom border as its only focus indicator. The border appears 125 ms after the link becomes focused.</p>
|
|
48
62
|
<p>This paragraph contains a link to <a id="sluggishLink" href="https://de.wikipedia.org">German information</a> with a custom border as its only focus indicator. The border appears 525 ms after the link becomes focused.</p>
|