Skip to content

Commit 4549dcd

Browse files
plumdumplingplumdumpling
committed
feat(examples): add example content for rules 2.4.4 – 3.2.1
1 parent b93279a commit 4549dcd

File tree

4 files changed

+841
-41
lines changed

4 files changed

+841
-41
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html>
33
<head>
44
<meta charset="UTF-8" />
55
<link

‎src/App.module.css‎

Lines changed: 206 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,42 @@ ul {
4545
padding-left: 1.25em;
4646
}
4747

48+
nav > ul {
49+
display: flex;
50+
gap: 0.5rem;
51+
padding: 0;
52+
list-style-type: none;
53+
}
54+
55+
button[role='tab'] {
56+
border-bottom: 2px solid transparent;
57+
}
58+
59+
button[role='tab'][aria-selected='true'] {
60+
border-color: currentColor;
61+
}
62+
63+
button[role='tab'],
64+
button[role='tab']:not([disabled]):hover,
65+
button[role='tab']:not([disabled]):focus-visible,
66+
button[role='tab']:not([disabled]):active {
67+
background: none;
68+
}
69+
70+
button[role='tab']:not([disabled]):not([aria-selected='true']):hover::before,
71+
button[role='tab']:not([disabled]):focus-visible::before,
72+
button[role='tab']:not([disabled]):not([aria-selected='true']):active::before {
73+
content: '';
74+
position: absolute;
75+
inset: 0;
76+
background-color: currentColor;
77+
opacity: 0.1;
78+
}
79+
80+
button[role='tab']:not([disabled]):not([aria-selected='true']):active::before {
81+
opacity: 0.05;
82+
}
83+
4884
img,
4985
audio,
5086
video {
@@ -290,13 +326,6 @@ video {
290326
}
291327
}
292328

293-
.bypassBlocks nav ul {
294-
display: flex;
295-
gap: 0.5rem;
296-
padding: 0;
297-
list-style-type: none;
298-
}
299-
300329
.pageTitled {
301330
color: var(--ubilabs-font-secondary-color);
302331
}
@@ -307,3 +336,173 @@ video {
307336
align-items: start;
308337
gap: 1rem;
309338
}
339+
340+
.multipleWays nav[role='tablist'] {
341+
margin-bottom: 1rem;
342+
}
343+
344+
.headingsAndLabels {
345+
display: flex;
346+
flex-direction: column;
347+
align-items: start;
348+
gap: 0.5rem;
349+
}
350+
351+
.headingsAndLabels label {
352+
display: flex;
353+
align-items: center;
354+
gap: 0.5rem;
355+
}
356+
357+
.noFocusVisible {
358+
display: flex;
359+
align-self: start;
360+
align-items: center;
361+
gap: 1rem;
362+
}
363+
364+
.noFocusVisible button:not([disabled]):focus-visible {
365+
outline: none;
366+
box-shadow: none;
367+
background-color: #3c55dc;
368+
}
369+
370+
.noFocusVisible a:focus-visible {
371+
outline: none;
372+
color: var(--ubilabs-font-color);
373+
}
374+
375+
.focusNotObscured {
376+
position: relative;
377+
height: 9rem;
378+
overflow: auto;
379+
outline: 1px solid var(--ubilabs-gray-500);
380+
}
381+
382+
.focusNotObscured .header {
383+
z-index: 2;
384+
position: sticky;
385+
top: 0;
386+
left: 0;
387+
display: flex;
388+
align-items: center;
389+
justify-content: center;
390+
width: 100%;
391+
height: 3.5rem;
392+
margin-bottom: -3.5rem;
393+
padding: 0 1rem;
394+
background: var(--ubilabs-gray-700);
395+
color: var(--ubilabs-white);
396+
pointer-events: none; /* so it doesn't block clicks for this demo */
397+
}
398+
399+
.focusNotObscured .content {
400+
display: flex;
401+
flex-direction: column;
402+
gap: 1rem;
403+
padding: 1rem;
404+
}
405+
406+
.pointerGestures {
407+
position: relative;
408+
}
409+
410+
.pointerGestures .secretContent {
411+
width: 13rem;
412+
padding: 1rem;
413+
background-color: var(--ubilabs-yellow-800);
414+
color: var(--ubilabs-white);
415+
font-weight: 500;
416+
text-transform: uppercase;
417+
text-align: center;
418+
}
419+
420+
.pointerGestures .draggable {
421+
position: absolute;
422+
top: 0;
423+
left: 0;
424+
display: flex;
425+
align-items: center;
426+
justify-content: center;
427+
width: 13rem;
428+
padding: 1rem;
429+
background: var(--ubilabs-anthracite);
430+
color: var(--ubilabs-white);
431+
border: 1px solid var(--ubilabs-white);
432+
user-select: none;
433+
touch-action: none;
434+
cursor: grab;
435+
text-align: center;
436+
}
437+
438+
.pointerGestures .draggable::before {
439+
content: '←';
440+
}
441+
442+
.pointerGestures .draggable::after {
443+
content: '→';
444+
}
445+
446+
.labelInName form {
447+
display: flex;
448+
align-items: center;
449+
gap: 0.5rem;
450+
}
451+
452+
.draggingMovements {
453+
position: relative;
454+
}
455+
456+
.draggingMovements .dropZones {
457+
display: grid;
458+
grid-template-columns: repeat(2, 1fr);
459+
gap: 1rem;
460+
}
461+
462+
.draggingMovements .dropZones > div {
463+
display: flex;
464+
align-items: center;
465+
justify-content: center;
466+
padding: 50% 0;
467+
border: 1px solid var(--ubilabs-gray-500);
468+
color: var(--ubilabs-font-secondary-color);
469+
}
470+
471+
.draggingMovements .dropZones > div > span {
472+
position: absolute;
473+
text-transform: uppercase;
474+
}
475+
476+
.draggingMovements .slider {
477+
position: absolute;
478+
top: 0;
479+
left: 0;
480+
width: 3.5rem;
481+
height: 3.5rem;
482+
margin: 1rem;
483+
background-color: var(--ubilabs-blue);
484+
user-select: none;
485+
touch-action: none;
486+
cursor: grab;
487+
}
488+
489+
.draggingMovements p {
490+
margin-top: 1rem;
491+
}
492+
493+
.targetSize {
494+
display: flex;
495+
gap: 0.25rem;
496+
}
497+
498+
.targetSize button {
499+
min-width: 0;
500+
min-height: 0;
501+
height: 16px;
502+
padding: 0.25em;
503+
font-size: 0.675rem;
504+
}
505+
506+
.languageOfPage {
507+
color: var(--ubilabs-font-secondary-color);
508+
}

0 commit comments

Comments
 (0)