this repo has no description
Make checkboxes properly labeled for accessibility
+15
-2
+11
-1
rehype-custom-html.ts
+11
-1
rehype-custom-html.ts
···
138
138
case "ul": {
139
139
node.children.forEach((x) => {
140
140
if (x.type === "element" && x.tagName === "li") {
141
-
x.children.forEach((y) => {
141
+
const contents = x.children.map((y) => {
142
142
if (
143
143
y.type === "element" &&
144
144
y.tagName === "input" &&
···
147
147
y.properties["aria-label"] = y.properties.checked
148
148
? "Checked checkbox"
149
149
: "Unchecked checkbox";
150
+
return y;
150
151
});
152
+
153
+
x.children = [
154
+
{
155
+
type: "element",
156
+
tagName: "label",
157
+
properties: {},
158
+
children: contents,
159
+
},
160
+
];
151
161
}
152
162
});
153
163
}
+4
-1
src/pages/blog/[id].astro
+4
-1
src/pages/blog/[id].astro