Skip to content

Commit d8b2f8e

Browse files
felixgiraultfelixgirault
committed
Added an example to the a11y section
1 parent b06a8ff commit d8b2f8e

4 files changed

Lines changed: 96 additions & 0 deletions

File tree

‎rspack.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,11 @@ module.exports = {
128128
chunks: [],
129129
lang: 'fr'
130130
}),
131+
featureTemplatePlugin({
132+
title: 'WCAG compliance',
133+
feature: 'wcag',
134+
template: 'wcag'
135+
}),
131136
assetsPlugin(),
132137
matomoPlugin()
133138
]

‎site/assets/style.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ iframe {
1313
min-height: 25lh;
1414
}
1515

16+
.Iframe--narrow {
17+
min-height: 12lh;
18+
}
19+
1620
.is-hidden {
1721
display: none;
1822
}
@@ -68,6 +72,11 @@ label:has(.Form-error):has(+ :user-invalid) .Form-error {
6872
padding: var(--spacing-block--l) var(--spacing-inline--xl);
6973
}
7074

75+
.ExampleGrid {
76+
grid-template-columns: repeat(var(--grid-algorithm), minmax(20ch, 1fr));
77+
gap: var(--spacing-block--l) var(--spacing-inline--xl);
78+
}
79+
7180
.ExampleReset {
7281
--orejime-color-interactive: royalblue;
7382
--orejime-color-on-interactive: white;

‎site/features/wcag.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!doctype html>
2+
3+
<html class="ExamplePage" lang="en">
4+
<head>
5+
<title>Orejime</title>
6+
7+
<link
8+
rel="stylesheet"
9+
href="https://boscop.fr/wp-content/themes/boscop/dist/app.css"
10+
/>
11+
12+
<link rel="stylesheet" href="../assets/style.css" />
13+
<link rel="stylesheet" href="../orejime-standard.css" />
14+
</head>
15+
16+
<body>
17+
<main class="ExampleMain" role="main">
18+
<div class="ExampleGrid Grid">
19+
<a href="#">Example link 1</a>
20+
<a href="#">Example link 2</a>
21+
<a href="#">Example link 3</a>
22+
<a href="#">Example link 4</a>
23+
<a href="#">Example link 5</a>
24+
<a href="#">Example link 6</a>
25+
<a href="#">Example link 7</a>
26+
<a href="#">Example link 8</a>
27+
<a href="#">Example link 9</a>
28+
</div>
29+
30+
<div class="orejime-Env">
31+
<button class="ExampleReset Button">Reset consent</button>
32+
</div>
33+
</main>
34+
35+
<script>
36+
window.orejimeConfig = {
37+
purposes: [
38+
{
39+
id: 'example',
40+
title: 'Example purpose'
41+
}
42+
],
43+
privacyPolicyUrl: '#'
44+
};
45+
</script>
46+
47+
<script src="../orejime-standard-en.js"></script>
48+
49+
<script>
50+
document
51+
.querySelector('.ExampleReset')
52+
.addEventListener('click', function () {
53+
window.orejime.manager.clearConsents();
54+
});
55+
</script>
56+
</body>
57+
</html>

‎site/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,31 @@ <h3>Accessibility</h3>
247247
complies to the WCAG.
248248
</p>
249249

250+
<details>
251+
<summary>Example</summary>
252+
253+
<p>
254+
Try navigating below with the keyboard, a screen reader or
255+
any assistive technology.
256+
<br />
257+
Orejime even handles complex criteria from the latest WCAG,
258+
like
259+
<a
260+
href="https://www.w3.org/TR/WCAG22/#focus-not-obscured-enhanced"
261+
>Criterion 2.4.12 Focus Not Obscured</a
262+
>: when navigating with the keyboard, the banner will
263+
always stay out of the way as to avoid obscuring the
264+
focused element.
265+
</p>
266+
267+
<iframe
268+
class="Iframe--narrow"
269+
data-src="./features/wcag.html"
270+
title="WCAG compliance"
271+
loading="lazy"
272+
></iframe>
273+
</details>
274+
250275
<h3>Ecodesign & performance</h3>
251276

252277
<p>

0 commit comments

Comments
 (0)
⚡