forked from incluud/accessible-astro-components
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathAccordionItem.astro
93 lines (82 loc) · 2.07 KB
/
AccordionItem.astro
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
---
const {header} = Astro.props
---
<li class="accordion__item">
<h3>
<button
id="accordion-header-1"
class="accordion__header"
aria-expanded="false"
aria-controls="accordion-panel-1"
onclick="toggleAccordionItem()"
>
{header}
<svg class="header__toggle-indicator" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/>
</svg>
</button>
</h3>
<div
id="accordion-panel-1"
class="accordion__panel"
aria-labelledby="accordion-header-1"
>
<div class="panel__inner">
<slot />
</div>
</div>
</li>
<style lang="scss" is:global>
.accordion__item,
.accordion__header {
width: 100%;
}
.accordion__header {
display: flex;
justify-content: space-between;
border: 2px solid #202020;
padding: 1rem;
}
.accordion__item .accordion__header {
border-bottom: 0;
// improved focus outline
&:focus {
outline-offset: -6px;
box-shadow: inset 0 0 0 2px white;
}
}
// add border if there is only one and to the last one
.accordion__item:only-of-type,
.accordion__item:last-of-type {
.accordion__header {
border: 2px solid #202020;
}
.accordion__panel {
border-bottom: 2px solid #202020;
}
}
.header__toggle-indicator {
width: 20px;
}
.accordion__panel {
visibility: hidden;
overflow: hidden;
height: 0;
border-left: 2px solid #202020;
border-right: 2px solid #202020;
transition: height 0.3s ease-in-out, visibility 0s 0.3s;
}
.panel__inner {
padding: 2rem 1rem;
}
.is-active {
.accordion__header {
border: 2px solid #202020;
}
.accordion__panel {
visibility: visible;
height: auto;
transition: height 0.3s ease-in-out, visibility 0s 0s;
}
}
</style>