From f57adc18217d779aa42266ea71a545827755a77b Mon Sep 17 00:00:00 2001
From: jimmyfrasche <soapboxcicero@gmail.com>
Date: Sun, 8 Oct 2017 16:16:30 -0700
Subject: [PATCH] godoc: accessible permalinks

This CL makes permalinks accessible to keyboard-users and screen
readers.

Adding an aria-label to permalinks overrides the default content
of "pilcrow".

As the permalinks only showed on hover they were inaccessible
to users who could only use a keyboard and are now always shown.

For golang/go#22171

Change-Id: I6ce3828dfedfd7edc29dd16f3eb94a0abcabfc7c
Reviewed-on: https://go-review.googlesource.com/69210
Reviewed-by: Andrew Bonventre <andybons@golang.org>
---
 godoc/static/godocs.js    |  4 ++--
 godoc/static/package.html |  8 ++++----
 godoc/static/static.go    | 19 ++++++-------------
 godoc/static/style.css    |  7 -------
 4 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/godoc/static/godocs.js b/godoc/static/godocs.js
index 5177c302..cec8823d 100644
--- a/godoc/static/godocs.js
+++ b/godoc/static/godocs.js
@@ -209,7 +209,7 @@ function setupInlinePlayground() {
 			code.on('keyup', resize);
 			code.keyup(); // resize now.
 		};
-		
+
 		// If example already visible, set up playground now.
 		if ($(el).is(':visible')) {
 			setup();
@@ -343,7 +343,7 @@ function addPermalinks() {
       // Already attached.
       return;
     }
-    parent.append(" ").append($("<a class='permalink'>&#xb6;</a>").attr("href", "#" + id));
+    parent.append(" ").append($("<a class='permalink' title='permalink' aria-label='permalink'>&#xb6;</a>").attr("href", "#" + id));
   }
 
   $("#page .container").find("h2[id], h3[id]").each(function() {
diff --git a/godoc/static/package.html b/godoc/static/package.html
index 6dc88e69..85c9ca35 100644
--- a/godoc/static/package.html
+++ b/godoc/static/package.html
@@ -166,7 +166,7 @@
 			{{/* Name is a string - no need for FSet */}}
 			{{$name_html := html .Name}}
 			<h2 id="{{$name_html}}">func <a href="{{posLink_url $ .Decl}}">{{$name_html}}</a>
-				<a class="permalink" href="#{{$name_html}}">&#xb6;</a>
+				<a class="permalink" title="permalink" aria-label="permalink" href="#{{$name_html}}">&#xb6;</a>
 			</h2>
 			<pre>{{node_html $ .Decl true}}</pre>
 			{{comment_html .Doc}}
@@ -178,7 +178,7 @@
 			{{$tname := .Name}}
 			{{$tname_html := html .Name}}
 			<h2 id="{{$tname_html}}">type <a href="{{posLink_url $ .Decl}}">{{$tname_html}}</a>
-				<a class="permalink" href="#{{$tname_html}}">&#xb6;</a>
+				<a class="permalink" title="permalink" aria-label="permalink" href="#{{$tname_html}}">&#xb6;</a>
 			</h2>
 			{{comment_html .Doc}}
 			<pre>{{node_html $ .Decl true}}</pre>
@@ -200,7 +200,7 @@
 			{{range .Funcs}}
 				{{$name_html := html .Name}}
 				<h3 id="{{$name_html}}">func <a href="{{posLink_url $ .Decl}}">{{$name_html}}</a>
-					<a class="permalink" href="#{{$name_html}}">&#xb6;</a>
+					<a class="permalink" title="permalink" aria-label="permalink" href="#{{$name_html}}">&#xb6;</a>
 				</h3>
 				<pre>{{node_html $ .Decl true}}</pre>
 				{{comment_html .Doc}}
@@ -211,7 +211,7 @@
 			{{range .Methods}}
 				{{$name_html := html .Name}}
 				<h3 id="{{$tname_html}}.{{$name_html}}">func ({{html .Recv}}) <a href="{{posLink_url $ .Decl}}">{{$name_html}}</a>
-					<a class="permalink" href="#{{$tname_html}}.{{$name_html}}">&#xb6;</a>
+					<a class="permalink" title="permalink" aria-label="permalink" href="#{{$tname_html}}.{{$name_html}}">&#xb6;</a>
 				</h3>
 				<pre>{{node_html $ .Decl true}}</pre>
 				{{comment_html .Doc}}
diff --git a/godoc/static/static.go b/godoc/static/static.go
index b0543560..66fa5db7 100644
--- a/godoc/static/static.go
+++ b/godoc/static/static.go
@@ -795,7 +795,7 @@ function setupInlinePlayground() {
 			code.on('keyup', resize);
 			code.keyup(); // resize now.
 		};
-		
+
 		// If example already visible, set up playground now.
 		if ($(el).is(':visible')) {
 			setup();
@@ -929,7 +929,7 @@ function addPermalinks() {
       // Already attached.
       return;
     }
-    parent.append(" ").append($("<a class='permalink'>&#xb6;</a>").attr("href", "#" + id));
+    parent.append(" ").append($("<a class='permalink' title='permalink' aria-label='permalink'>&#xb6;</a>").attr("href", "#" + id));
   }
 
   $("#page .container").find("h2[id], h3[id]").each(function() {
@@ -1819,7 +1819,7 @@ function cgAddChild(tree, ul, cgn) {
 			{{/* Name is a string - no need for FSet */}}
 			{{$name_html := html .Name}}
 			<h2 id="{{$name_html}}">func <a href="{{posLink_url $ .Decl}}">{{$name_html}}</a>
-				<a class="permalink" href="#{{$name_html}}">&#xb6;</a>
+				<a class="permalink" title="permalink" aria-label="permalink" href="#{{$name_html}}">&#xb6;</a>
 			</h2>
 			<pre>{{node_html $ .Decl true}}</pre>
 			{{comment_html .Doc}}
@@ -1831,7 +1831,7 @@ function cgAddChild(tree, ul, cgn) {
 			{{$tname := .Name}}
 			{{$tname_html := html .Name}}
 			<h2 id="{{$tname_html}}">type <a href="{{posLink_url $ .Decl}}">{{$tname_html}}</a>
-				<a class="permalink" href="#{{$tname_html}}">&#xb6;</a>
+				<a class="permalink" title="permalink" aria-label="permalink" href="#{{$tname_html}}">&#xb6;</a>
 			</h2>
 			{{comment_html .Doc}}
 			<pre>{{node_html $ .Decl true}}</pre>
@@ -1853,7 +1853,7 @@ function cgAddChild(tree, ul, cgn) {
 			{{range .Funcs}}
 				{{$name_html := html .Name}}
 				<h3 id="{{$name_html}}">func <a href="{{posLink_url $ .Decl}}">{{$name_html}}</a>
-					<a class="permalink" href="#{{$name_html}}">&#xb6;</a>
+					<a class="permalink" title="permalink" aria-label="permalink" href="#{{$name_html}}">&#xb6;</a>
 				</h3>
 				<pre>{{node_html $ .Decl true}}</pre>
 				{{comment_html .Doc}}
@@ -1864,7 +1864,7 @@ function cgAddChild(tree, ul, cgn) {
 			{{range .Methods}}
 				{{$name_html := html .Name}}
 				<h3 id="{{$tname_html}}.{{$name_html}}">func ({{html .Recv}}) <a href="{{posLink_url $ .Decl}}">{{$name_html}}</a>
-					<a class="permalink" href="#{{$tname_html}}.{{$name_html}}">&#xb6;</a>
+					<a class="permalink" title="permalink" aria-label="permalink" href="#{{$tname_html}}.{{$name_html}}">&#xb6;</a>
 				</h3>
 				<pre>{{node_html $ .Decl true}}</pre>
 				{{comment_html .Doc}}
@@ -2968,13 +2968,6 @@ a:hover,
 	text-decoration: none;
 }
 
-.permalink {
-	display: none;
-}
-:hover > .permalink {
-	display: inline;
-}
-
 p, li {
 	max-width: 800px;
 	word-wrap: break-word;
diff --git a/godoc/static/style.css b/godoc/static/style.css
index 41e3908e..16c96846 100644
--- a/godoc/static/style.css
+++ b/godoc/static/style.css
@@ -61,13 +61,6 @@ a:hover,
 	text-decoration: none;
 }
 
-.permalink {
-	display: none;
-}
-:hover > .permalink {
-	display: inline;
-}
-
 p, li {
 	max-width: 800px;
 	word-wrap: break-word;