Add informative tooltips/titles to generated tag fields

[gwern]

It would be good if the generated tags were a little more informative by default for readers & accessibility issues: right now, generated tags are bare links with no metadata, but it would be straightforward to add a title or description for readers.

Currently, to substitute in tags, the Hakyll workflow looks something like this (using gwern.net as an example):

postCtx :: Tags -> Context String
postCtx tags =
    tagsField "tagsHTML" tags <>
    defaultContext <>
   ...

Which defines the tagsHTML template variable for substituting into a HTML template:

<span id="tags"><em>$tagsHTML$</em></span>

Which gets compiled to

<span id="tags"><em><a href="./tags/statistics">statistics</a>, <a href="./tags/decision%20theory">decision theory</a>, <a href="./tags/R">R</a>, <a href="./tags/survival%20analysis">survival analysis</a>, <a href="./tags/Bayes">Bayes</a>, <a href="./tags/tutorial">tutorial</a></em></span>

The <a> tags have no alt/title attributes, so when the user hovers over them, they learn nothing more. It would be better if they could read something like <a href="./tags/statistics" title="Index of all pages tagged 'statistics' on this website">statistics</a> (ie following a template like <a href="./tags/$TAG" title="Index of all pages tagged '$TAG' on this website">$TAG</a>).

In Hakyll/Web/Tags.hs, the ultimately responsible code appears to be simpleRenderLink:

simpleRenderLink tag (Just filePath) =
  Just $ H.a ! A.href (toValue $ toUrl filePath) $ toHtml tag

Looking at blaze docs, I think this would just require adding in something like A.title tag $ to give something like

simpleRenderLink tag (Just filePath) =
  Just $ H.a ! A.title ("Index of all pages tagged '"++tag++"' on this website.") $ A.href (toValue $ toUrl filePath) $ toHtml tag

?

I realize that I can probably do this for my website with the tagsFieldWith function and overriding the rendering function, but this is a small but general enhancement I think all Hakyll websites using tags would benefit from, and I can't think of any reason this shouldn't be a default and pushed upstream.

[jaspervdj]

Yes, I think this would be good to have -- a disadvantage is that it locks the website's language to English, but again, it's possible to override it anyway.

[gwern]

Looks like I got the blaze slightly wrong. Here's a diff which seems to work for me:

diff --git a/lib/Hakyll/Web/Tags.hs b/lib/Hakyll/Web/Tags.hs
index 88119c2..9a4b87a 100644
--- a/lib/Hakyll/Web/Tags.hs
+++ b/lib/Hakyll/Web/Tags.hs
@@ -326,7 +326,9 @@ categoryField =
 simpleRenderLink :: String -> (Maybe FilePath) -> Maybe H.Html
 simpleRenderLink _   Nothing         = Nothing
 simpleRenderLink tag (Just filePath) =
-  Just $ H.a ! A.href (toValue $ toUrl filePath) $ toHtml tag
+ Just $ H.a ! A.title (H.stringValue ("All pages tagged '"++tag++"'."))
+             ! A.href (toValue $ toUrl filePath)
+             $ toHtml tag

Produces HTML with the gwern.net template like

     <div id="page-metadata">
          <p><span id="page-description"><em>A log of experiments done on the site design, intended to render pages more readable, focusing on the challenge of testing a static site, page width, fonts, plugins, and effects of advertising.</em></span>
            <br />
            topics: <span id="tags"><em><a title="Index of all pages tagged 'experiments' on this website." href="./tags/experiments">experiments</a>, <a title="Index of all pages tagged 'statistics' on this website." href="./tags/statistics">statistics</a>, <a title="Index of all pages tagged 'computer science' on this website." href="./tags/computer%20science">computer science</a>, <a title="Index of all pages tagged 'meta' on this website." href="./tags/meta">meta</a>, <a title="Index of all pages tagged 'decision theory' on this website." href="./tags/decision%20theory">decision theory</a>, <a title="Index of all pages tagged 'shell' on this website." href="./tags/shell">shell</a>, <a title="Index of all pages tagged 'R' on this website." href="./tags/R">R</a>, <a title="Index of all pages tagged 'JS' on this website." href="./tags/JS">JS</a>, <a title="Index of all pages tagged 'CSS' on this website." href="./tags/CSS">CSS</a>, <a title="Index of all pages tagged 'power analysis' on this website." href="./tags/power%20analysis">power analysis</a>, <a title="Index of all pages tagged 'Bayes' on this website." href="./tags/Bayes">Bayes</a>, <a title="Index of all pages tagged 'Google' on this website." href="./tags/Google">Google</a>, <a title="Index of all pages tagged 'tutorial' on this website." href="./tags/tutorial">tutorial</a></em></span>
            <br />
            <span id="page-created">created: <em>16 Jun 2012</em></span>;  <span id="last-modified">modified: <em>16 Feb 2019</em></span>; <span id="version">status: <em>in progress</em></span>; <span id="epistemological-status"><a href="./About#confidence-tags" title="Explanation of 'confidence' metadata">confidence:</a> <em>possible</em></span>; <span id="importance"><a href="./About#importance-tags" title="Explanation of 'importance' metadata">importance:</a> <em>4</em></span>
          </p>
          <hr>
        </div>

Looks good to me.

[gwern]

Any problems with that diff? It so far hasn't produced any problems for me: the tooltips work and are valid HTML/CSS according to the validators.