Skip to content

Commit 0d1533f

Browse files
elidakirigoelidakirigo
committed
[A11Y FEATURE]: Detect aria-hidden="true" on interactable elements
#174
1 parent 3724492 commit 0d1533f

9 files changed

Lines changed: 773 additions & 21 deletions

File tree

‎checka11y-warnings.css‎

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,322 @@
5959
padding-bottom: 80px;
6060
}
6161

62+
[role=button][aria-hidden=true]::after {
63+
display: block;
64+
font-size: 1rem;
65+
font-family: verdana, geneva, tahoma, sans-serif;
66+
font-weight: 700;
67+
font-style: initial;
68+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
69+
border-radius: 0.75rem;
70+
letter-spacing: initial;
71+
text-decoration: none;
72+
text-transform: initial;
73+
text-shadow: none;
74+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
75+
color: var(--checka11y-text-warning);
76+
border: 0.4rem solid var(--checka11y-border-warning);
77+
background-color: var(--checka11y-bg-warning);
78+
}
79+
80+
[role=combobox][aria-hidden=true]::after {
81+
display: block;
82+
font-size: 1rem;
83+
font-family: verdana, geneva, tahoma, sans-serif;
84+
font-weight: 700;
85+
font-style: initial;
86+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
87+
border-radius: 0.75rem;
88+
letter-spacing: initial;
89+
text-decoration: none;
90+
text-transform: initial;
91+
text-shadow: none;
92+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
93+
color: var(--checka11y-text-warning);
94+
border: 0.4rem solid var(--checka11y-border-warning);
95+
background-color: var(--checka11y-bg-warning);
96+
}
97+
98+
[role=link][aria-hidden=true]::after {
99+
display: block;
100+
font-size: 1rem;
101+
font-family: verdana, geneva, tahoma, sans-serif;
102+
font-weight: 700;
103+
font-style: initial;
104+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
105+
border-radius: 0.75rem;
106+
letter-spacing: initial;
107+
text-decoration: none;
108+
text-transform: initial;
109+
text-shadow: none;
110+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
111+
color: var(--checka11y-text-warning);
112+
border: 0.4rem solid var(--checka11y-border-warning);
113+
background-color: var(--checka11y-bg-warning);
114+
}
115+
116+
[role=menuitem][aria-hidden=true]::after {
117+
display: block;
118+
font-size: 1rem;
119+
font-family: verdana, geneva, tahoma, sans-serif;
120+
font-weight: 700;
121+
font-style: initial;
122+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
123+
border-radius: 0.75rem;
124+
letter-spacing: initial;
125+
text-decoration: none;
126+
text-transform: initial;
127+
text-shadow: none;
128+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
129+
color: var(--checka11y-text-warning);
130+
border: 0.4rem solid var(--checka11y-border-warning);
131+
background-color: var(--checka11y-bg-warning);
132+
}
133+
134+
[role=menuitemcheckbox][aria-hidden=true]::after {
135+
display: block;
136+
font-size: 1rem;
137+
font-family: verdana, geneva, tahoma, sans-serif;
138+
font-weight: 700;
139+
font-style: initial;
140+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
141+
border-radius: 0.75rem;
142+
letter-spacing: initial;
143+
text-decoration: none;
144+
text-transform: initial;
145+
text-shadow: none;
146+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
147+
color: var(--checka11y-text-warning);
148+
border: 0.4rem solid var(--checka11y-border-warning);
149+
background-color: var(--checka11y-bg-warning);
150+
}
151+
152+
[role=menuitemradio][aria-hidden=true]::after {
153+
display: block;
154+
font-size: 1rem;
155+
font-family: verdana, geneva, tahoma, sans-serif;
156+
font-weight: 700;
157+
font-style: initial;
158+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
159+
border-radius: 0.75rem;
160+
letter-spacing: initial;
161+
text-decoration: none;
162+
text-transform: initial;
163+
text-shadow: none;
164+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
165+
color: var(--checka11y-text-warning);
166+
border: 0.4rem solid var(--checka11y-border-warning);
167+
background-color: var(--checka11y-bg-warning);
168+
}
169+
170+
[role=option][aria-hidden=true]::after {
171+
display: block;
172+
font-size: 1rem;
173+
font-family: verdana, geneva, tahoma, sans-serif;
174+
font-weight: 700;
175+
font-style: initial;
176+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
177+
border-radius: 0.75rem;
178+
letter-spacing: initial;
179+
text-decoration: none;
180+
text-transform: initial;
181+
text-shadow: none;
182+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
183+
color: var(--checka11y-text-warning);
184+
border: 0.4rem solid var(--checka11y-border-warning);
185+
background-color: var(--checka11y-bg-warning);
186+
}
187+
188+
[role=scrollbar][aria-hidden=true]::after {
189+
display: block;
190+
font-size: 1rem;
191+
font-family: verdana, geneva, tahoma, sans-serif;
192+
font-weight: 700;
193+
font-style: initial;
194+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
195+
border-radius: 0.75rem;
196+
letter-spacing: initial;
197+
text-decoration: none;
198+
text-transform: initial;
199+
text-shadow: none;
200+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
201+
color: var(--checka11y-text-warning);
202+
border: 0.4rem solid var(--checka11y-border-warning);
203+
background-color: var(--checka11y-bg-warning);
204+
}
205+
206+
[role=searchbox][aria-hidden=true]::after {
207+
display: block;
208+
font-size: 1rem;
209+
font-family: verdana, geneva, tahoma, sans-serif;
210+
font-weight: 700;
211+
font-style: initial;
212+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
213+
border-radius: 0.75rem;
214+
letter-spacing: initial;
215+
text-decoration: none;
216+
text-transform: initial;
217+
text-shadow: none;
218+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
219+
color: var(--checka11y-text-warning);
220+
border: 0.4rem solid var(--checka11y-border-warning);
221+
background-color: var(--checka11y-bg-warning);
222+
}
223+
224+
[role=slider][aria-hidden=true]::after {
225+
display: block;
226+
font-size: 1rem;
227+
font-family: verdana, geneva, tahoma, sans-serif;
228+
font-weight: 700;
229+
font-style: initial;
230+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
231+
border-radius: 0.75rem;
232+
letter-spacing: initial;
233+
text-decoration: none;
234+
text-transform: initial;
235+
text-shadow: none;
236+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
237+
color: var(--checka11y-text-warning);
238+
border: 0.4rem solid var(--checka11y-border-warning);
239+
background-color: var(--checka11y-bg-warning);
240+
}
241+
242+
[role=spinbutton][aria-hidden=true]::after {
243+
display: block;
244+
font-size: 1rem;
245+
font-family: verdana, geneva, tahoma, sans-serif;
246+
font-weight: 700;
247+
font-style: initial;
248+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
249+
border-radius: 0.75rem;
250+
letter-spacing: initial;
251+
text-decoration: none;
252+
text-transform: initial;
253+
text-shadow: none;
254+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
255+
color: var(--checka11y-text-warning);
256+
border: 0.4rem solid var(--checka11y-border-warning);
257+
background-color: var(--checka11y-bg-warning);
258+
}
259+
260+
[role=switch][aria-hidden=true]::after {
261+
display: block;
262+
font-size: 1rem;
263+
font-family: verdana, geneva, tahoma, sans-serif;
264+
font-weight: 700;
265+
font-style: initial;
266+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
267+
border-radius: 0.75rem;
268+
letter-spacing: initial;
269+
text-decoration: none;
270+
text-transform: initial;
271+
text-shadow: none;
272+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
273+
color: var(--checka11y-text-warning);
274+
border: 0.4rem solid var(--checka11y-border-warning);
275+
background-color: var(--checka11y-bg-warning);
276+
}
277+
278+
[role=tab][aria-hidden=true]::after {
279+
display: block;
280+
font-size: 1rem;
281+
font-family: verdana, geneva, tahoma, sans-serif;
282+
font-weight: 700;
283+
font-style: initial;
284+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
285+
border-radius: 0.75rem;
286+
letter-spacing: initial;
287+
text-decoration: none;
288+
text-transform: initial;
289+
text-shadow: none;
290+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
291+
color: var(--checka11y-text-warning);
292+
border: 0.4rem solid var(--checka11y-border-warning);
293+
background-color: var(--checka11y-bg-warning);
294+
}
295+
296+
[role=radio][aria-hidden=true]::after {
297+
display: block;
298+
font-size: 1rem;
299+
font-family: verdana, geneva, tahoma, sans-serif;
300+
font-weight: 700;
301+
font-style: initial;
302+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
303+
border-radius: 0.75rem;
304+
letter-spacing: initial;
305+
text-decoration: none;
306+
text-transform: initial;
307+
text-shadow: none;
308+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
309+
color: var(--checka11y-text-warning);
310+
border: 0.4rem solid var(--checka11y-border-warning);
311+
background-color: var(--checka11y-bg-warning);
312+
}
313+
314+
[role=textbox][aria-hidden=true]::after {
315+
display: block;
316+
font-size: 1rem;
317+
font-family: verdana, geneva, tahoma, sans-serif;
318+
font-weight: 700;
319+
font-style: initial;
320+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
321+
border-radius: 0.75rem;
322+
letter-spacing: initial;
323+
text-decoration: none;
324+
text-transform: initial;
325+
text-shadow: none;
326+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
327+
color: var(--checka11y-text-warning);
328+
border: 0.4rem solid var(--checka11y-border-warning);
329+
background-color: var(--checka11y-bg-warning);
330+
}
331+
332+
[role=treeitem][aria-hidden=true]::after {
333+
display: block;
334+
font-size: 1rem;
335+
font-family: verdana, geneva, tahoma, sans-serif;
336+
font-weight: 700;
337+
font-style: initial;
338+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
339+
border-radius: 0.75rem;
340+
letter-spacing: initial;
341+
text-decoration: none;
342+
text-transform: initial;
343+
text-shadow: none;
344+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
345+
color: var(--checka11y-text-warning);
346+
border: 0.4rem solid var(--checka11y-border-warning);
347+
background-color: var(--checka11y-bg-warning);
348+
}
349+
350+
a[aria-hidden=true]::after, button[aria-hidden=true]::after, summary[aria-hidden=true]::after, [role=separator][aria-valuenow][aria-hidden=true]::after, [role=separator][aria-valuemin][aria-hidden=true]::after, [role=separator][aria-valuemax][aria-hidden=true]::after {
351+
display: block;
352+
font-size: 1rem;
353+
font-family: verdana, geneva, tahoma, sans-serif;
354+
font-weight: 700;
355+
font-style: initial;
356+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
357+
border-radius: 0.75rem;
358+
letter-spacing: initial;
359+
text-decoration: none;
360+
text-transform: initial;
361+
text-shadow: none;
362+
content: "WARNING (W0017): Interactive element containing aria-hidden" !important;
363+
color: var(--checka11y-text-warning);
364+
border: 0.4rem solid var(--checka11y-border-warning);
365+
background-color: var(--checka11y-bg-warning);
366+
}
367+
368+
area[aria-hidden=true], audio[controls][aria-hidden=true], iframe[aria-hidden=true], input[aria-hidden=true], select[aria-hidden=true], textarea[aria-hidden=true], video[controls][aria-hidden=true] {
369+
border: 0.4rem solid;
370+
border-color: var(--checka11y-border-warning);
371+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="350px" height="80px" viewBox="0 0 350 80"><rect class="box" x="4" y="4" width="342" height="72" rx="12" ry="12" fill="rgba(255, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">WARNING (W0017): Interactive</text> <text x="15" y="60">element containing aria-hidden</text></g></svg>');
372+
background-position: bottom center;
373+
background-repeat: no-repeat;
374+
min-width: 350px;
375+
padding-bottom: 80px;
376+
}
377+
62378
[autoplay] {
63379
border: 0.4rem solid;
64380
border-color: var(--checka11y-border-warning);

0 commit comments

Comments
 (0)