shithub: hugo

Info  •  Files  •  Log  •  Branches

Render task list item inside label for correct accessibility

Fixes #3303

--- a/helpers/content_renderer.go

+++ b/helpers/content_renderer.go

@@ -50,10 +50,12 @@

 	switch {

 	case bytes.HasPrefix(text, []byte("[ ] ")):

-		text = append([]byte(`<input type="checkbox" disabled class="task-list-item">`), text[3:]...)

+		text = append([]byte(`<label><input type="checkbox" disabled class="task-list-item">`), text[3:]...)

+		text = append(text, []byte(`</label>`)...)

 	case bytes.HasPrefix(text, []byte("[x] ")) || bytes.HasPrefix(text, []byte("[X] ")):

-		text = append([]byte(`<input type="checkbox" checked disabled class="task-list-item">`), text[3:]...)

+		text = append([]byte(`<label><input type="checkbox" checked disabled class="task-list-item">`), text[3:]...)

+		text = append(text, []byte(`</label>`)...)

 	}

 	r.Renderer.ListItem(out, text, flags)

--- a/helpers/content_renderer_test.go

+++ b/helpers/content_renderer_test.go

@@ -108,9 +108,9 @@

 `, true, `<p>TODO:</p>

 <ul class="task-list">

-<li><input type="checkbox" checked disabled class="task-list-item"> On1</li>

-<li><input type="checkbox" checked disabled class="task-list-item"> On2</li>

-<li><input type="checkbox" disabled class="task-list-item"> Off</li>

+<li><label><input type="checkbox" checked disabled class="task-list-item"> On1</label></li>

+<li><label><input type="checkbox" checked disabled class="task-list-item"> On2</label></li>

+<li><label><input type="checkbox" disabled class="task-list-item"> Off</label></li>

 </ul>

 <p>END</p>

@@ -122,7 +122,7 @@

 		{`* [ ] Off

 END`, true, `<ul class="task-list">

-<li><input type="checkbox" disabled class="task-list-item"> Off</li>

+<li><label><input type="checkbox" disabled class="task-list-item"> Off</label></li>

 </ul>

 <p>END</p>