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:
parent
e4b401d06e
commit
f57adc1821
@ -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'>¶</a>").attr("href", "#" + id));
|
||||
parent.append(" ").append($("<a class='permalink' title='permalink' aria-label='permalink'>¶</a>").attr("href", "#" + id));
|
||||
}
|
||||
|
||||
$("#page .container").find("h2[id], h3[id]").each(function() {
|
||||
|
@ -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}}">¶</a>
|
||||
<a class="permalink" title="permalink" aria-label="permalink" href="#{{$name_html}}">¶</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}}">¶</a>
|
||||
<a class="permalink" title="permalink" aria-label="permalink" href="#{{$tname_html}}">¶</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}}">¶</a>
|
||||
<a class="permalink" title="permalink" aria-label="permalink" href="#{{$name_html}}">¶</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}}">¶</a>
|
||||
<a class="permalink" title="permalink" aria-label="permalink" href="#{{$tname_html}}.{{$name_html}}">¶</a>
|
||||
</h3>
|
||||
<pre>{{node_html $ .Decl true}}</pre>
|
||||
{{comment_html .Doc}}
|
||||
|
@ -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'>¶</a>").attr("href", "#" + id));
|
||||
parent.append(" ").append($("<a class='permalink' title='permalink' aria-label='permalink'>¶</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}}">¶</a>
|
||||
<a class="permalink" title="permalink" aria-label="permalink" href="#{{$name_html}}">¶</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}}">¶</a>
|
||||
<a class="permalink" title="permalink" aria-label="permalink" href="#{{$tname_html}}">¶</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}}">¶</a>
|
||||
<a class="permalink" title="permalink" aria-label="permalink" href="#{{$name_html}}">¶</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}}">¶</a>
|
||||
<a class="permalink" title="permalink" aria-label="permalink" href="#{{$tname_html}}.{{$name_html}}">¶</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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user