HTML writer: use first paragraph in task item as checkbox label.

Closes: #8729

2 files changed, 15 insertions, 13 deletions

diff --git a/src/Text/Pandoc/Writers/HTML.hs b/src/Text/Pandoc/Writers/HTML.hs
index bbdbbc0ba..17fe2c945 100644
--- a/src/Text/Pandoc/Writers/HTML.hs
+++ b/src/Text/Pandoc/Writers/HTML.hs
@@ -501,7 +501,7 @@ listItemToHtml opts bls
           checkbox' = H.input ! A.type_ "checkbox"
       isContents <- inlineListToHtml opts is
       bsContents <- blockListToHtml opts bs
-      return $ constr (checkbox >> isContents) >>
+      return $ constr (H.label (checkbox >> isContents)) >>
                (if null bs then mempty else nl) >>
                bsContents
 
diff --git a/test/command/tasklist.md b/test/command/tasklist.md
index caa8603f4..b1c6491cc 100644
--- a/test/command/tasklist.md
+++ b/test/command/tasklist.md
@@ -6,8 +6,8 @@ tests adapted from <https://github.github.com/gfm/#task-list-items-extension->
 - [x] bar
 ^D
 <ul class="task-list">
-<li><input type="checkbox" />foo</li>
-<li><input type="checkbox" checked="" />bar</li>
+<li><label><input type="checkbox" />foo</label></li>
+<li><label><input type="checkbox" checked="" />bar</label></li>
 </ul>
 ```
 
@@ -20,12 +20,12 @@ tests adapted from <https://github.github.com/gfm/#task-list-items-extension->
 - [ ] bim
 ^D
 <ul class="task-list">
-<li><input type="checkbox" checked="" />foo
+<li><label><input type="checkbox" checked="" />foo</label>
 <ul class="task-list">
-<li><input type="checkbox" />bar</li>
-<li><input type="checkbox" checked="" />baz</li>
+<li><label><input type="checkbox" />bar</label></li>
+<li><label><input type="checkbox" checked="" />baz</label></li>
 </ul></li>
-<li><input type="checkbox" />bim</li>
+<li><label><input type="checkbox" />bim</label></li>
 </ul>
 ```
 
@@ -53,21 +53,23 @@ paragraph
 - [x] checked
 ^D
 <ul>
-<li><input type="checkbox" />unchecked</li>
+<li><label><input type="checkbox" />unchecked</label></li>
 <li>plain item</li>
-<li><input type="checkbox" checked="" />checked</li>
+<li><label><input type="checkbox" checked="" />checked</label></li>
 </ul>
 <p>paragraph</p>
 <ol type="1">
-<li><input type="checkbox" />ordered unchecked</li>
+<li><label><input type="checkbox" />ordered unchecked</label></li>
 <li>[] plain item</li>
-<li><input type="checkbox" checked="" />ordered checked</li>
+<li><label><input type="checkbox" checked="" />ordered
+checked</label></li>
 </ol>
 <p>paragraph</p>
 <ul class="task-list">
-<li><p><input type="checkbox" />list item with a</p>
+<li><p><label><input type="checkbox" />list item with a</label></p>
 <p>second paragraph</p></li>
-<li><p><input type="checkbox" checked="" />checked</p></li>
+<li><p><label><input type="checkbox"
+checked="" />checked</label></p></li>
 </ul>
 ```