qbit/go
1
0
Fork 0
mirror of https://github.com/golang/go synced 2024-11-05 18:36:10 -07:00
Code Releases Activity

godoc: accessible permalinks

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
godoc/static/godocs.js
View File

@ -343,7 +343,7 @@ function addPermalinks() {
// Already attached. // Already attached.
return; 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() { $("#page .container").find("h2[id], h3[id]").each(function() {

8
godoc/static/package.html
View File

@ -166,7 +166,7 @@
{{/* Name is a string - no need for FSet */}} {{/* Name is a string - no need for FSet */}}
{{$name_html := html .Name}} {{$name_html := html .Name}}
<h2 id="{{$name_html}}">func <a href="{{posLink_url $ .Decl}}">{{$name_html}}</a> <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> </h2>
<pre>{{node_html $ .Decl true}}</pre> <pre>{{node_html $ .Decl true}}</pre>
{{comment_html .Doc}} {{comment_html .Doc}}
@ -178,7 +178,7 @@
{{$tname := .Name}} {{$tname := .Name}}
{{$tname_html := html .Name}} {{$tname_html := html .Name}}
<h2 id="{{$tname_html}}">type <a href="{{posLink_url $ .Decl}}">{{$tname_html}}</a> <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> </h2>
{{comment_html .Doc}} {{comment_html .Doc}}
<pre>{{node_html $ .Decl true}}</pre> <pre>{{node_html $ .Decl true}}</pre>
@ -200,7 +200,7 @@
{{range .Funcs}} {{range .Funcs}}
{{$name_html := html .Name}} {{$name_html := html .Name}}
<h3 id="{{$name_html}}">func <a href="{{posLink_url $ .Decl}}">{{$name_html}}</a> <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> </h3>
<pre>{{node_html $ .Decl true}}</pre> <pre>{{node_html $ .Decl true}}</pre>
{{comment_html .Doc}} {{comment_html .Doc}}
@ -211,7 +211,7 @@
{{range .Methods}} {{range .Methods}}
{{$name_html := html .Name}} {{$name_html := html .Name}}
<h3 id="{{$tname_html}}.{{$name_html}}">func ({{html .Recv}}) <a href="{{posLink_url $ .Decl}}">{{$name_html}}</a> <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> </h3>
<pre>{{node_html $ .Decl true}}</pre> <pre>{{node_html $ .Decl true}}</pre>
{{comment_html .Doc}} {{comment_html .Doc}}

17
godoc/static/static.go
View File

@ -929,7 +929,7 @@ function addPermalinks() {
// Already attached. // Already attached.
return; 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() { $("#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 is a string - no need for FSet */}}
{{$name_html := html .Name}} {{$name_html := html .Name}}
<h2 id="{{$name_html}}">func <a href="{{posLink_url $ .Decl}}">{{$name_html}}</a> <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> </h2>
<pre>{{node_html $ .Decl true}}</pre> <pre>{{node_html $ .Decl true}}</pre>
{{comment_html .Doc}} {{comment_html .Doc}}
@ -1831,7 +1831,7 @@ function cgAddChild(tree, ul, cgn) {
{{$tname := .Name}} {{$tname := .Name}}
{{$tname_html := html .Name}} {{$tname_html := html .Name}}
<h2 id="{{$tname_html}}">type <a href="{{posLink_url $ .Decl}}">{{$tname_html}}</a> <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> </h2>
{{comment_html .Doc}} {{comment_html .Doc}}
<pre>{{node_html $ .Decl true}}</pre> <pre>{{node_html $ .Decl true}}</pre>
@ -1853,7 +1853,7 @@ function cgAddChild(tree, ul, cgn) {
{{range .Funcs}} {{range .Funcs}}
{{$name_html := html .Name}} {{$name_html := html .Name}}
<h3 id="{{$name_html}}">func <a href="{{posLink_url $ .Decl}}">{{$name_html}}</a> <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> </h3>
<pre>{{node_html $ .Decl true}}</pre> <pre>{{node_html $ .Decl true}}</pre>
{{comment_html .Doc}} {{comment_html .Doc}}
@ -1864,7 +1864,7 @@ function cgAddChild(tree, ul, cgn) {
{{range .Methods}} {{range .Methods}}
{{$name_html := html .Name}} {{$name_html := html .Name}}
<h3 id="{{$tname_html}}.{{$name_html}}">func ({{html .Recv}}) <a href="{{posLink_url $ .Decl}}">{{$name_html}}</a> <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> </h3>
<pre>{{node_html $ .Decl true}}</pre> <pre>{{node_html $ .Decl true}}</pre>
{{comment_html .Doc}} {{comment_html .Doc}}
@ -2968,13 +2968,6 @@ a:hover,
text-decoration: none; text-decoration: none;
} }
.permalink {
display: none;
}
:hover > .permalink {
display: inline;
}
p, li { p, li {
max-width: 800px; max-width: 800px;
word-wrap: break-word; word-wrap: break-word;

7
godoc/static/style.css
View File

@ -61,13 +61,6 @@ a:hover,
text-decoration: none; text-decoration: none;
} }
.permalink {
display: none;
}
:hover > .permalink {
display: inline;
}
p, li { p, li {
max-width: 800px; max-width: 800px;
word-wrap: break-word; word-wrap: break-word;