this repo has no description
Improve accessibility for code-heading:
- focus/hover/active properly indicated
- add "copied" text
- copied text fades in and out, remaining for 2s
- role=alert ensures screen readers announce changes
+56
-7
+56
-7
src/pages/blog/[id].astro
+56
-7
src/pages/blog/[id].astro
···
100
100
<template id="code-heading">
101
101
<!-- slots need to be set using set:html
102
102
else it is treated as astro slot -->
103
-
<span class="lang">
104
-
<Fragment set:html={"<slot>Plain Text</slot>"} />
105
-
</span>
103
+
<span class="lang"><Fragment set:html={"<slot>Plain Text</slot>"} /></span>
104
+
<span id="copied" style="visibility:hidden" role="alert">Copied!</span>
106
105
<button id="copy"><Copy /></button>
107
106
108
107
<style>
108
+
@keyframes teeter {
109
+
from,
110
+
to {
111
+
rotate: 0deg;
112
+
}
113
+
25% {
114
+
rotate: 15deg;
115
+
}
116
+
75% {
117
+
rotate: -15deg;
118
+
}
119
+
}
120
+
109
121
.lang {
110
122
color: var(--typo-body);
111
123
}
···
113
125
button {
114
126
border: none;
115
127
background: none;
128
+
aspect-ratio: 1;
129
+
border-radius: 100%;
130
+
margin-right: 0.5rem;
116
131
117
132
display: flex;
118
133
align-items: center;
119
134
justify-content: center;
120
135
136
+
&:hover,
137
+
&:focus {
138
+
scale: 1.2;
139
+
outline: none;
140
+
background-color: #ffffff20;
141
+
}
142
+
143
+
&:active {
144
+
scale: 1.4;
145
+
animation: teeter 0.2s;
146
+
}
147
+
121
148
& svg {
122
149
stroke: var(--typo-body);
123
150
margin: 0.2rem;
···
161
188
162
189
const copy = this.shadowRoot.getElementById("copy");
163
190
if (!copy) throw new Error("No #copy in #code-heading");
164
-
console.log(copy, this.contents);
191
+
192
+
const copied = this.shadowRoot.getElementById("copied");
193
+
if (!copied) throw new Error("No #copied in #code-heading");
194
+
195
+
const copied_animation = {
196
+
opacity: [0, 1],
197
+
visibility: ["hidden", "visible"],
198
+
};
165
199
166
200
copy.addEventListener("click", () => {
167
-
navigator.clipboard.writeText(this.contents).catch((e) => {
168
-
console.error("Encountered error copying to clipboard;", e);
169
-
});
201
+
navigator.clipboard
202
+
.writeText(this.contents)
203
+
.catch((e) => {
204
+
console.error("Encountered error copying to clipboard;", e);
205
+
})
206
+
.then(async () => {
207
+
await copied.animate(copied_animation, {
208
+
duration: 200,
209
+
fill: "forwards",
210
+
}).finished;
211
+
212
+
copied.animate(copied_animation, {
213
+
duration: 200,
214
+
delay: 2000,
215
+
fill: "forwards",
216
+
direction: "reverse",
217
+
});
218
+
});
170
219
});
171
220
}
172
221