HTML5 writer: implement WAI-ARIA roles for (end)notes.

See #4213.

2 files changed, 35 insertions, 22 deletions

diff --git a/src/Text/Pandoc/Writers/HTML.hs b/src/Text/Pandoc/Writers/HTML.hs
index 7329d8197..8a55cae65 100644
--- a/src/Text/Pandoc/Writers/HTML.hs
+++ b/src/Text/Pandoc/Writers/HTML.hs
@@ -521,7 +521,9 @@ footnoteSection opts notes = do
         , epubVersion == Just EPUB3
                 = H5.section ! A.class_ "footnotes"
                              ! customAttribute "epub:type" "footnotes" $ x
-        | html5 = H5.section ! A.class_ "footnotes" $ x
+        | html5 = H5.section ! A.class_ "footnotes"
+                             ! customAttribute "role" "doc-endnotes"
+                             $ x
         | slideVariant /= NoSlides = H.div ! A.class_ "footnotes slide" $ x
         | otherwise = H.div ! A.class_ "footnotes" $ x
   return $
@@ -1183,6 +1185,8 @@ inlineToHtml opts inline = do
                                        $ toHtml ref
                         return $ case epubVersion of
                                       Just EPUB3 -> link ! customAttribute "epub:type" "noteref"
+                                      _ | html5  -> link ! H5.customAttribute
+                                                      "role" "doc-noteref"
                                       _          -> link
     (Cite cits il)-> do contents <- inlineListToHtml opts il
                         let citationIds = unwords $ map citationId cits
@@ -1191,12 +1195,17 @@ inlineToHtml opts inline = do
                                     then result ! customAttribute "data-cites" (toValue citationIds)
                                     else result
 
-blockListToNote :: PandocMonad m => WriterOptions -> String -> [Block] -> StateT WriterState m Html
-blockListToNote opts ref blocks =
+blockListToNote :: PandocMonad m
+                => WriterOptions -> String -> [Block]
+                -> StateT WriterState m Html
+blockListToNote opts ref blocks = do
+  html5 <- gets stHtml5
   -- If last block is Para or Plain, include the backlink at the end of
   -- that block. Otherwise, insert a new Plain block with the backlink.
-  let backlink = [Link ("",["footnote-back"],[]) [Str "↩"] ("#" ++ "fnref" ++ ref,[])]
-      blocks'  = if null blocks
+  let kvs = if html5 then [("role","doc-backlink")] else []
+  let backlink = [Link ("",["footnote-back"],kvs)
+                    [Str "↩"] ("#" ++ "fnref" ++ ref,[])]
+  let blocks'  = if null blocks
                     then []
                     else let lastBlock   = last blocks
                              otherBlocks = init blocks
@@ -1207,13 +1216,16 @@ blockListToNote opts ref blocks =
                                                  [Plain (lst ++ backlink)]
                                   _           -> otherBlocks ++ [lastBlock,
                                                  Plain backlink]
-  in  do contents <- blockListToHtml opts blocks'
-         let noteItem = H.li ! prefixedId opts ("fn" ++ ref) $ contents
-         epubVersion <- gets stEPUBVersion
-         let noteItem' = case epubVersion of
-                              Just EPUB3 -> noteItem ! customAttribute "epub:type" "footnote"
-                              _          -> noteItem
-         return $ nl opts >> noteItem'
+  contents <- blockListToHtml opts blocks'
+  let noteItem = H.li ! prefixedId opts ("fn" ++ ref) $ contents
+  epubVersion <- gets stEPUBVersion
+  let noteItem' = case epubVersion of
+                       Just EPUB3 -> noteItem !
+                                       customAttribute "epub:type" "footnote"
+                       _ | html5  -> noteItem !
+                                       customAttribute "role" "doc-endnote"
+                       _          -> noteItem
+  return $ nl opts >> noteItem'
 
 isMathEnvironment :: String -> Bool
 isMathEnvironment s = "\\begin{" `isPrefixOf` s &&
@@ -1434,6 +1446,7 @@ html5Attributes = Set.fromList
   , "rel"
   , "required"
   , "reversed"
+  , "role"
   , "rows"
   , "rowspan"
   , "sandbox"
diff --git a/test/writer.html5 b/test/writer.html5
index 57b937653..39b5344dd 100644
--- a/test/writer.html5
+++ b/test/writer.html5
@@ -526,25 +526,25 @@ Blah
 <p>Here is a movie <img src="movie.jpg" alt="movie" /> icon.</p>
 <hr />
 <h1 id="footnotes">Footnotes</h1>
-<p>Here is a footnote reference,<a href="#fn1" class="footnote-ref" id="fnref1"><sup>1</sup></a> and another.<a href="#fn2" class="footnote-ref" id="fnref2"><sup>2</sup></a> This should <em>not</em> be a footnote reference, because it contains a space.[^my note] Here is an inline note.<a href="#fn3" class="footnote-ref" id="fnref3"><sup>3</sup></a></p>
+<p>Here is a footnote reference,<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a> and another.<a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a> This should <em>not</em> be a footnote reference, because it contains a space.[^my note] Here is an inline note.<a href="#fn3" class="footnote-ref" id="fnref3" role="doc-noteref"><sup>3</sup></a></p>
 <blockquote>
-<p>Notes can go in quotes.<a href="#fn4" class="footnote-ref" id="fnref4"><sup>4</sup></a></p>
+<p>Notes can go in quotes.<a href="#fn4" class="footnote-ref" id="fnref4" role="doc-noteref"><sup>4</sup></a></p>
 </blockquote>
 <ol type="1">
-<li>And in list items.<a href="#fn5" class="footnote-ref" id="fnref5"><sup>5</sup></a></li>
+<li>And in list items.<a href="#fn5" class="footnote-ref" id="fnref5" role="doc-noteref"><sup>5</sup></a></li>
 </ol>
 <p>This paragraph should not be part of the note, as it is not indented.</p>
-<section class="footnotes">
+<section class="footnotes" role="doc-endnotes">
 <hr />
 <ol>
-<li id="fn1"><p>Here is the footnote. It can go anywhere after the footnote reference. It need not be placed at the end of the document.<a href="#fnref1" class="footnote-back">↩</a></p></li>
-<li id="fn2"><p>Here’s the long note. This one contains multiple blocks.</p>
+<li id="fn1" role="doc-endnote"><p>Here is the footnote. It can go anywhere after the footnote reference. It need not be placed at the end of the document.<a href="#fnref1" class="footnote-back" role="doc-backlink">↩</a></p></li>
+<li id="fn2" role="doc-endnote"><p>Here’s the long note. This one contains multiple blocks.</p>
 <p>Subsequent blocks are indented to show that they belong to the footnote (as with list items).</p>
 <pre><code>  { &lt;code&gt; }</code></pre>
-<p>If you want, you can indent every line, but you can also be lazy and just indent the first line of each block.<a href="#fnref2" class="footnote-back">↩</a></p></li>
-<li id="fn3"><p>This is <em>easier</em> to type. Inline notes may contain <a href="http://google.com">links</a> and <code>]</code> verbatim characters, as well as [bracketed text].<a href="#fnref3" class="footnote-back">↩</a></p></li>
-<li id="fn4"><p>In quote.<a href="#fnref4" class="footnote-back">↩</a></p></li>
-<li id="fn5"><p>In list.<a href="#fnref5" class="footnote-back">↩</a></p></li>
+<p>If you want, you can indent every line, but you can also be lazy and just indent the first line of each block.<a href="#fnref2" class="footnote-back" role="doc-backlink">↩</a></p></li>
+<li id="fn3" role="doc-endnote"><p>This is <em>easier</em> to type. Inline notes may contain <a href="http://google.com">links</a> and <code>]</code> verbatim characters, as well as [bracketed text].<a href="#fnref3" class="footnote-back" role="doc-backlink">↩</a></p></li>
+<li id="fn4" role="doc-endnote"><p>In quote.<a href="#fnref4" class="footnote-back" role="doc-backlink">↩</a></p></li>
+<li id="fn5" role="doc-endnote"><p>In list.<a href="#fnref5" class="footnote-back" role="doc-backlink">↩</a></p></li>
 </ol>
 </section>
 </body>