-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnested.html
270 lines (245 loc) · 12.9 KB
/
nested.html
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="An accessible nested accordion built with the 'details' element. The CSS enhances the accordion with a smooth height transition only when it's safe and supported. It uses modern CSS features with progressive enhancement in mind.">
<title>Accessible Accordion V2 | Multiple</title>
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">
<link rel="stylesheet" href="./style.css">
<script src="./index.js" type="module"></script>
</head>
<body class="flow">
<div id="loader" class="loader"><span class="visually-hidden">The page is loading...</span></div>
<span class="visually-hidden" aria-hidden="true" id="page-loaded"></span>
<a href="#main-content" class="element-invisible element-focusable skip-link">Skip to main content</a>
<div class="theme-toggler">
<p class="light">Light<span class="visually-hidden"> theme inactive</span></p><button type="button"
aria-pressed="true" aria-label="Toggle theme"><span></span></button>
<p class="dark">Dark<span class="visually-hidden"> theme active</span></p>
</div>
<header class="header">
<p class="h1">
<a href="./index.html"><span class="visually-hidden">Link to Home page</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 6h2v2H4zm0 5h2v2H4zm0 5h2v2H4zm16-8V6H8.023v2H18.8zM8 11h12v2H8zm0 5h12v2H8z">
</path>
</svg>
</a>
<span>Accessible Accordion V2</span>
</p>
<div id="primary-navigation" class="primary-navigation">
<div class="hamburger-button-wrapper">
<p>Menu</p>
<button class="hamburger-button" id="hamburger-button" aria-controls="site-navigation"
aria-expanded="false">
<span id="btn-txt" class="visually-hidden">Expand menu</span>
<svg class="lines" viewBox="0 0 100 100">
<rect class="line top" y="28" x="10" rx="5"></rect>
<rect class="line middle" y="47" x="10" rx="5"></rect>
<rect class="line bottom" y="68" x="10" rx="5"></rect>
</svg>
</button>
</div>
<nav id="site-navigation" class="menu-hidden">
<ul>
<li><a href="./">Multiple (open)</a></li>
<li><a href="./multiple-closed.html">Multiple (closed)</a></li>
<li><a href="./nested.html" aria-current="page">Nested</a></li>
<li><a href="./single.html">Single</a></li>
</ul>
</nav>
</div>
</header>
<main class="main container" id="main-content">
<h1>Accordion (Nested)</h1>
<div class="accordion">
<details>
<summary class="element">
<h2>Introduction</h2>
</summary>
<div class="summary-content element flow">
<p>These accessible accordions are built with the <code>details</code> element:</p>
<p>
<pre><code>
<details>
<summary>
Title
</summary>
<p>
Content...
</p>
</details>
</code></pre>
</p>
<h3>Notes</h3>
<ul class="flow">
<li>To enable multiple accordions, add the same <code>name</code> attribute to each of the
<code>details</code> tags,
e.g. <code>name="accordion"</code>. When any accordion opens, any currently open
accordion will
close.
</li>
<li>Hardcode <code>open</code> on any <code>details</code> element to have that accordion
open on page load,
i.e. <code><details open></code>.</li>
<li>Accordions can be nested.</li>
</ul>
</div>
<div class="nested">
<details name="accordion">
<summary class="element">
<h2>Features</h2>
</summary>
<div class="summary-content element flow">
<ul class="flow">
<li><strong>Responsive-aware</strong>: Transitions are only applied on viewports wider
than
37.5rem (600px),
avoiding
layout issues caused by wrapped <code>summary</code> text on smaller screens.</li>
<li><strong>Respects user preferences</strong>: Honors
<code>prefers-reduced-motion</code> to
avoid animating
for
users who have motion reduction enabled.
</li>
<li><strong>Feature detection</strong>: Uses <code>@supports</code> to apply styles only
if the
browser supports
the
experimental <code>interpolate-size</code> property.</li>
<li><strong>Safe fallback</strong>: Older browsers that don't support modern syntax will
ignore
the transition
block
entirely, without affecting functionality.</li>
</ul>
</div>
</details>
<details name="accordion">
<summary class="element">
<h2>CSS Transition</h2>
</summary>
<div class="summary-content element flow">
<p>The CSS snippet enhances the accordions
with a smooth height transition - but only when it's safe and supported. It uses
modern CSS
features with
progressive enhancement in mind.</p>
<p>Styles are applied only when:</p>
<ul class="flow">
<li>The screen width is greater than <code>37.5rem (600px)</code>. (Note:
<code>width</code> is
modern range
syntax.)
</li>
<li>The user has not requested reduced motion.</li>
<li>The browser supports the experimental <code>interpolate-size</code> property
(some browsers may ignore this block if they don't support it).</li>
</ul>
<p>If the browser does support it, <code>interpolate-size</code> is applied globally with a
value of
<code>allow-keywords</code>. (his is a proposed property allowing height/width
interpolation on
elements
like <details>, which normally don't transition well.)
</p>
<p>This allows a transition from <code>height: [n]</code> to <code>height: auto</code>.</p>
</div>
</details>
<details name="accordion">
<summary class="element">
<h2>JavaScript</h2>
</summary>
<div class="summary-content element flow">
<h3><code>ariaExpandedDetails()</code></h3>
<p>
This function ensures accessibility by dynamically
updating the
<code>aria-expanded</code> attribute on <code>details</code> elements, improving screen
reader
support
for
users with older or less capable assistive technologies. It listens for the
<code>toggle</code>
event to reflect
the
open/closed state, providing clearer communication for browsers or screen readers that
may not
fully support the
native <code>details</code> behavior.
</p>
</div>
</details>
<details name="accordion">
<summary class="element">
<h2>Accessibility</h2>
</summary>
<div class="summary-content element flow">
<ul class="flow">
<li>The site is fully navigable using tab keys and up/down arrows.</li>
<li>ARIA attributes are dynamically added to the <code>details</code> element to signal
whether
it is
open or
closed.
</li>
</ul>
</div>
</details>
<details name="accordion">
<summary class="element">
<h2>Testing and Compatibility</h2>
</summary>
<div class="summary-content element flow">
<p>The application has been tested on the following platforms and browsers:</p>
<ul class="flow">
<li><strong>Operating System</strong>: Windows 10</li>
<li><strong>Browsers</strong>:<ul>
<li>Google Chrome</li>
<li>Mozilla Firefox</li>
<li>Microsoft Edge</li>
</ul>
</li>
</ul>
<h3>Device View Testing</h3>
<p>The layout and functionality have been verified in both browser and device simulation
views to
ensure
responsiveness
and usability.</p>
</div>
</details>
<details name="accordion">
<summary class="element">
<h2>How to Run</h2>
</summary>
<div class="summary-content element flow">
<ol>
<li>Clone or download the repository to your local machine.</li>
<li>Open the project folder and start a simple HTTP server (e.g., using
<code>Live Server</code>
in VS Code or
Python's <code>http.server</code> module).
</li>
<li>Open the project in a modern browser (e.g., Chrome, Firefox, or Edge).</li>
</ol>
</div>
</details>
</div>
</details>
</div>
</main>
<footer class="footer">
<a href="https://github.com/chrisnajman/accessible-accordion-v2" target="_blank" rel="noopener noreferrer"
class="external-link">
GitHub Repository
</a>
</footer>
</body>
</html>