1
0
mirror of https://github.com/golang/go synced 2024-11-05 11:36:10 -07:00

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>
This commit is contained in:
jimmyfrasche 2017-10-08 16:16:30 -07:00 committed by Andrew Bonventre
parent e4b401d06e
commit f57adc1821
4 changed files with 12 additions and 26 deletions

View File

@ -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() {

View File

@ -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}}

View File

@ -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;

View File

@ -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;