-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.css
136 lines (120 loc) · 5.37 KB
/
index.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
/* each html document should have a lang attribute with a non-empty value */
html:not([lang]),
html[lang=""],
/* all images should have an alt tag */
img:not([alt]),
/* if an image has an empty alt tag, it should also have aria-hidden="true" */
img[alt=""]:not([aria-hidden="true"]),
/* all images should be served as avif or webp */
img:is(:not(picture img)):is([src$=".jpg"], [src$=".png"]),
picture img:only-child:is([src$=".jpg"], [src$=".png"]),
source:not([type="image/webp"], [type="image/avif"]) ~ img:is([src$=".jpg"], [src$=".png"]),
/* only images, iframes, svgs, videos, rect and canvas should have width and height attributes */
*:not(img):not(iframe):not(svg):not(video):not(rect):not(source):not(canvas)[width],
*:not(img):not(iframe):not(svg):not(video):not(rect):not(source):not(canvas)[height],
/* anchors should have an href attribute */
a:not([href]),
/* anchors should not have an empty href */
a[href=""],
/* href attributes should not end with # */
a[href$="#"],
/* anchors should not be used as buttons */
a[href="#"],
a[href^="javascript:"],
/* anchors with target=_blank should have rel="noopener" */
a[target="_blank"]:not([rel~="noopener"]),
/* inputs need a type */
input:not([type]),
/* empty buttons should be properly labelled */
button:empty:not([aria-label]):not([aria-labelledby]),
/* the first direct child of a fieldset should be legend */
fieldset > *:first-child:not(legend),
/* lists only allow li as direct children */
ul > *:not(li),
ol > *:not(li),
/* direct children of a dl must be div, dt or dd */
dl > *:not(div):not(dt):not(dd),
/* if direct children of a dl is a div, its direct children must be dt or dd */
dl > div > *:not(dt):not(dd),
/* if direct children of a dl is a div, all direct children must be a div */
dl > div ~ *:not(div),
/* some elements should not be direct children of specific elements */
section > section:first-child,
article > section:first-child,
article > article:first-child,
section > article:first-child,
section > aside:first-child,
aside > aside:first-child,
article > aside:first-child,
aside > article:first-child,
aside > section:first-child,
/* links and buttons should not have specific elements as children */
:is(a, button) :is(a, button, input, textarea, select),
/* a select should only have option or optgroup children */
select *:not(option):not(optgroup),
/* headlines should not have specific elements as children */
:is(h1, h2, h3, h4, h5, h6) :is(code, input, map, object, output, script, select, textarea, address, article, aside, blockquote, canvas, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, li, main, nav, noscript, ol, p, pre, section, table, tfoot, ul, video),
/* a block element should not be inside an inline element */
:is(abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, output, q, samp, script, select, small, span, strong, sub, sup, textarea, time, tt, var) :is(address, article, aside, blockquote, canvas, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, li, main, nav, noscript, ol, p, pre, section, table, tfoot, ul, video),
/* a list should not be inside a paragraph */
p ul, p ol,
/* role attributes are not necessary for elements with a specific meaning */
article[role="article"],
button[role="button"],
input[type="checkbox"][role="checkbox"],
input[type="radio"][role="radio"],
input[type="range"][role="range"],
input[role="input"],
form[role="form"],
img[role="img"],
link[role="link"],
main[role="main"],
nav[role="menu"],
nav[role="navigation"],
section[role="section"],
tr[role="row"],
/* tabindex should only be set to 0 or -1 */
[tabindex]:not([tabindex="0"]):not([tabindex="-1"]),
/* classes should not start with a number */
*[class^="0"],
*[class^="1"],
*[class^="2"],
*[class^="3"],
*[class^="4"],
*[class^="5"],
*[class^="6"],
*[class^="7"],
*[class^="8"],
*[class^="9"],
/* iframes need to have a title */
iframe:not([title]),
/* videos which are not muted should not have the autoplay attribute */
video:not([muted])[autoplay],
/* headlines should not be empty */
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty,
/* labels need to be connected with an input using `for` */
label:not(:has(input, textarea, select)):is(:not([for]), [for=""]) {
outline: 3px solid red !important;
}
/* links containing block level elements is not best practice due to accessibility */
:is(a)
:is(address, article, aside, blockquote, canvas, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, li, main, nav, noscript, ol, p, pre, section, table, tfoot, ul, video),
/* svgs should have a focusable="false" to avoid focus in IE11 (only a warning since we usually do not support IE11 anymore) */
svg:not([focusable="false"]),
/* elements that are marked as active using a class but not aria-current or aria-selected */
.is-active:not([aria-current]):not([aria-selected]),
.active:not([aria-current]):not([aria-selected]),
.is-current:not([aria-current]):not([aria-selected]),
.current:not([aria-current]):not([aria-selected]),
.is-selected:not([aria-current]):not([aria-selected]),
.selected:not([aria-current]):not([aria-selected]),
[class$="--active"]:not([aria-current]):not([aria-selected]),
[class$="--selected"]:not([aria-current]):not([aria-selected]),
[class$="--current"]:not([aria-current]):not([aria-selected]) {
outline: 3px solid yellow !important;
}