Skip to content

Commit 8232103

Browse files
eksperimentaleksperimental
authored
Accessibility: Restructure headings (#1265)
It only holds the title inside the heading, Everything else, such as links are moved our of the heading. Everything is contained in a <div class="section-heading"> tag.
1 parent 0f75903 commit 8232103

File tree

9 files changed

+135
-81
lines changed

9 files changed

+135
-81
lines changed

‎assets/less/content/general.less

+21-13
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,28 @@ h6 {
88
font-weight: 700;
99
line-height: 1.5em;
1010
word-wrap: break-word;
11+
margin: 1em 0 .5em;
1112
}
1213

1314
h1 {
1415
font-size: 2em;
15-
margin: 1em 0 .5em;
1616

1717
&.signature {
1818
margin: 0;
1919
}
2020

21-
&.section-heading {
22-
margin: 1.5em 0 .5em;
23-
}
24-
2521
& small {
2622
font-weight: 300;
2723
}
28-
29-
a.view-source {
30-
font-size: 1.2rem;
31-
}
3224
}
3325

3426
h2 {
3527
font-size: 1.6em;
36-
margin: 1em 0 .5em;
3728
font-weight: 700;
3829
}
3930

4031
h3 {
4132
font-size: 1.375em;
42-
margin: 1em 0 .5em;
4333
font-weight: 700;
4434
}
4535

@@ -52,6 +42,7 @@ a.no-underline {
5242
}
5343

5444
a.view-source {
45+
display: inline-block;
5546
float: right;
5647
color: #727272;
5748
text-decoration: none;
@@ -67,7 +58,7 @@ a.view-source {
6758
.note {
6859
color: #727272;
6960
margin-right: 5px;
70-
font-size: 14px;
61+
font-size: 0.875em;
7162
font-weight: normal;
7263
}
7364

@@ -114,6 +105,8 @@ td, th {
114105
}
115106

116107
.section-heading {
108+
margin-bottom: inherit;
109+
117110
&:hover a.hover-link {
118111
opacity: 1;
119112
text-decoration: none;
@@ -131,9 +124,24 @@ td, th {
131124
font-size: 16px;
132125
vertical-align: middle;
133126
}
127+
128+
h1, h2, h3,
129+
h4, h5, h6 {
130+
display: inline-block;
131+
}
132+
133+
h1 {
134+
display: inline-block;
135+
136+
~ a.view-source {
137+
font-size: 1.2rem;
138+
margin-top: 3rem;
139+
}
140+
}
134141
}
135142

136-
.detail h2.section-heading {
143+
144+
.detail .section-heading h2 {
137145
margin-left: 0.3em;
138146
}
139147

‎assets/test/tooltips/hints-extraction.spec.js

+11-5
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,27 @@ import $ from 'jquery'
44
describe('hints extraction', () => {
55
describe('extractModuleHint', () => {
66
var modulePageObject = $($.parseHTML(`
7-
<div>
8-
<h1>
9-
Some module <small class="app-vsn">(ExDoc v0.0.1)</small>
7+
<div id="content" class="content-inner">
8+
<div class="section-headeing">
9+
<h1>
10+
Some module <small class="app-vsn">(ExDoc v0.0.1)</small>
11+
</h1>
1012
1113
<a href="https://github.com/" title="View Source" class="view-source" rel="help">
1214
<span class="icon-code" aria-hidden="true"></span>
1315
<span class="sr-only">View Source</span>
1416
</a>
15-
</h1>
17+
</div>
18+
1619
<section id="moduledoc">
1720
<p>
1821
Module <strong>description</strong> here
1922
</p>
2023
</section>
21-
<section id="summary">List of functions with summaries</section>
24+
25+
<section id="summary" class="details-list">
26+
List of functions with summaries
27+
</section>
2228
</div>
2329
`))
2430

‎lib/ex_doc/formatter/epub/templates/module_template.eex

+8-6
Original file line numberDiff line numberDiff line change
@@ -17,26 +17,28 @@
1717

1818
<%= if Enum.any?(summary, fn {_, v} -> v != [] end) do %>
1919
<section id="summary" class="details-list">
20-
<h1 class="section-heading">
20+
<div class="section-heading">
2121
<a class="hover-link" href="#summary">
2222
<span class="icon-link" aria-hidden="true"></span>
2323
<span class="sr-only">Anchor for this section</span>
2424
</a>
25-
Summary
26-
</h1>
25+
26+
<h1>Summary</h1>
27+
</div>
2728
<%= for {name, nodes} <- summary, do: H.summary_template(name, nodes) %>
2829
</section>
2930
<% end %>
3031

3132
<%= for {name, nodes} <- summary, nodes != [], key = HTML.text_to_id(name) do %>
3233
<section id="<%= key %>" class="details-list">
33-
<h1 class="section-heading">
34+
<div class="section-heading">
3435
<a class="hover-link" href="#<%= key %>">
3536
<span class="icon-link" aria-hidden="true"></span>
3637
<span class="sr-only">Anchor for this section</span>
3738
</a>
38-
<%= name %>
39-
</h1>
39+
40+
<h1><%= name %></h1>
41+
</div>
4042
<div class="<%= key %>-list">
4143
<%= for node <- nodes, do: H.detail_template(node, module) %>
4244
</div>

‎lib/ex_doc/formatter/html/templates.ex

+5-3
Original file line numberDiff line numberDiff line change
@@ -247,10 +247,12 @@ defmodule ExDoc.Formatter.HTML.Templates do
247247

248248
defp link_heading(_match, tag, title, id, prefix) do
249249
"""
250-
<#{tag} id="#{prefix}#{id}" class="section-heading">
250+
<div class="section-heading">
251251
<a href="##{prefix}#{id}" class="hover-link"><span class="icon-link" aria-hidden="true"></span></a>
252-
#{title}
253-
</#{tag}>
252+
<#{tag} id="#{prefix}#{id}">
253+
#{title}
254+
</#{tag}>
255+
</div>
254256
"""
255257
end
256258

‎lib/ex_doc/formatter/html/templates/api_reference_template.eex

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
<h1>
2-
API Reference <small class="app-vsn"><%= config.project %> v<%= config.version %></small>
3-
</h1>
1+
<div class="section-heading">
2+
<h1>
3+
API Reference <small class="app-vsn"><%= config.project %> v<%= config.version %></small>
4+
</h1>
5+
</div>
46

57
<%= if nodes_map.modules != [] do %>
68
<section class="details-list">
7-
<h2 id="modules" class="section-heading">Modules</h2>
9+
<div class="section-heading">
10+
<h2 id="modules">Modules</h2>
11+
</div>
812
<div class="summary">
913
<%= for module_node <- Enum.sort_by(nodes_map.modules, & &1.id) do
1014
api_reference_entry_template(module_node)
@@ -15,7 +19,9 @@
1519

1620
<%= if nodes_map.tasks != [] do %>
1721
<section class="details-list">
18-
<h2 id="tasks" class="section-heading">Mix Tasks</h2>
22+
<div class="section-heading">
23+
<h2 id="tasks">Mix Tasks</h2>
24+
</div>
1925
<div class="summary">
2026
<%= for task_node <- nodes_map.tasks do
2127
api_reference_entry_template(task_node)

‎lib/ex_doc/formatter/html/templates/module_template.eex

+18-10
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<%= head_template(config, %{title: module.title, type: module.type}) %>
22
<%= sidebar_template(config, nodes_map) %>
33

4-
<h1>
5-
<%= module_title(module) %> <small class="app-vsn">(<%= config.project %> v<%= config.version %>)</small>
4+
<div class="section-heading">
5+
<h1>
6+
<%= module_title(module) %> <small class="app-vsn">(<%= config.project %> v<%= config.version %>)</small>
7+
</h1>
68
<%= if module.source_url do %>
79
<a href="<%= module.source_url %>" title="View Source" class="view-source" rel="help">
810
<span class="icon-code" aria-hidden="true"></span>
911
<span class="sr-only">View Source</span>
1012
</a>
1113
<% end %>
12-
</h1>
14+
</div>
1315

1416
<%= if deprecated = module.deprecated do %>
1517
<div class="deprecated">
@@ -25,26 +27,32 @@
2527

2628
<%= if Enum.any?(summary, fn {_, v} -> v != [] end) do %>
2729
<section id="summary" class="details-list">
28-
<h1 class="section-heading">
30+
<div class="section-heading">
2931
<a class="hover-link" href="#summary">
3032
<span class="icon-link" aria-hidden="true"></span>
3133
<span class="sr-only">Link to this section</span>
3234
</a>
33-
Summary
34-
</h1>
35-
<%= for {name, nodes} <- summary, do: summary_template(name, nodes) %>
35+
<h1>
36+
Summary
37+
</h1>
38+
<%= for {name, nodes} <- summary, do: summary_template(name, nodes) %>
39+
</div>
3640
</section>
3741
<% end %>
3842

3943
<%= for {name, nodes} <- summary, nodes != [], key = HTML.text_to_id(name) do %>
4044
<section id="<%= key %>" class="details-list">
41-
<h1 class="section-heading">
45+
<div class="section-heading">
4246
<a class="hover-link" href="#<%= key %>">
4347
<span class="icon-link" aria-hidden="true"></span>
4448
<span class="sr-only">Link to this section</span>
4549
</a>
46-
<%= name %>
47-
</h1>
50+
51+
<h1>
52+
<%= name %>
53+
</h1>
54+
</div>
55+
4856
<div class="<%= key %>-list">
4957
<%= for node <- nodes, do: detail_template(node, module) %>
5058
</div>

‎lib/ex_doc/formatter/html/templates/search_template.eex

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<%= head_template(config, %{title: "Search", type: :search}) %>
22
<%= sidebar_template(config, nodes_map) %>
3-
<div id="search">
3+
<div id="search" class="section-heading">
44
<h1>Search</h1>
55
<div class="loading"><div></div><div></div><div></div><div></div></div>
66
</div>

0 commit comments

Comments
 (0)