Revert "Accessibility: Restructure headings (#1265)"

This reverts commit 8232103.
elixir-lang · Sep 13, 2020 · 6bfc916 · 6bfc916
1 parent 8d64cd7
commit 6bfc916
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 135 deletions.
diff --git a/assets/less/content/general.less b/assets/less/content/general.less
@@ -8,28 +8,38 @@ h6 {
   font-weight: 700;
   line-height: 1.5em;
   word-wrap: break-word;
-  margin: 1em 0 .5em;
 }
 
 h1 {
   font-size: 2em;
+  margin: 1em 0 .5em;
 
   &.signature {
     margin: 0;
   }
 
+  &.section-heading {
+    margin: 1.5em 0 .5em;
+  }
+
   & small {
     font-weight: 300;
   }
+
+  a.view-source {
+    font-size: 1.2rem;
+  }
 }
 
 h2 {
   font-size: 1.6em;
+  margin: 1em 0 .5em;
   font-weight: 700;
 }
 
 h3 {
   font-size: 1.375em;
+  margin: 1em 0 .5em;
   font-weight: 700;
 }
 
@@ -42,7 +52,6 @@ a.no-underline {
 }
 
 a.view-source {
-  display: inline-block;
   float: right;
   color: #727272;
   text-decoration: none;
@@ -58,7 +67,7 @@ a.view-source {
 .note {
   color: #727272;
   margin-right: 5px;
-  font-size: 0.875em;
+  font-size: 14px;
   font-weight: normal;
 }
 
@@ -105,8 +114,6 @@ td, th {
 }
 
 .section-heading {
-  margin-bottom: inherit;
-
   &:hover a.hover-link {
     opacity: 1;
     text-decoration: none;
@@ -124,24 +131,9 @@ td, th {
     font-size: 16px;
     vertical-align: middle;
   }
-
-  h1, h2, h3,
-  h4, h5, h6 {
-    display: inline-block;
-  }
-
-  h1 {
-    display: inline-block;
-
-    ~ a.view-source {
-      font-size: 1.2rem;
-      margin-top: 3rem;
-    }
-  }
 }
 
-
-.detail .section-heading h2 {
+.detail h2.section-heading {
   margin-left: 0.3em;
 }
 

diff --git a/assets/test/tooltips/hints-extraction.spec.js b/assets/test/tooltips/hints-extraction.spec.js
@@ -4,27 +4,21 @@ import $ from 'jquery'
 describe('hints extraction', () => {
   describe('extractModuleHint', () => {
     var modulePageObject = $($.parseHTML(`
-      <div id="content" class="content-inner">
-        <div class="section-headeing">
-          <h1>
-            Some module <small class="app-vsn">(ExDoc v0.0.1)</small>
-          </h1>
+      <div>
+        <h1>
+          Some module <small class="app-vsn">(ExDoc v0.0.1)</small>
 
           <a href="https://github.com/" title="View Source" class="view-source" rel="help">
             <span class="icon-code" aria-hidden="true"></span>
             <span class="sr-only">View Source</span>
           </a>
-        </div>
-
+        </h1>
         <section id="moduledoc">
           <p>
             Module <strong>description</strong> here
           </p>
         </section>
-
-        <section id="summary" class="details-list">
-          List of functions with summaries
-        </section>
+        <section id="summary">List of functions with summaries</section>
       </div>
     `))
 

diff --git a/lib/ex_doc/formatter/epub/templates/module_template.eex b/lib/ex_doc/formatter/epub/templates/module_template.eex
@@ -17,28 +17,26 @@
 
     <%= if Enum.any?(summary, fn {_, v} -> v != [] end) do %>
       <section id="summary" class="details-list">
-        <div class="section-heading">
+        <h1 class="section-heading">
           <a class="hover-link" href="#summary">
             <span class="icon-link" aria-hidden="true"></span>
             <span class="sr-only">Anchor for this section</span>
           </a>
-
-          <h1>Summary</h1>
-        </div>
+          Summary
+        </h1>
         <%= for {name, nodes} <- summary, do: H.summary_template(name, nodes) %>
       </section>
     <% end %>
 
     <%= for {name, nodes} <- summary, nodes != [], key = HTML.text_to_id(name) do %>
       <section id="<%= key %>" class="details-list">
-        <div class="section-heading">
+        <h1 class="section-heading">
           <a class="hover-link" href="#<%= key %>">
             <span class="icon-link" aria-hidden="true"></span>
             <span class="sr-only">Anchor for this section</span>
           </a>
-
-          <h1><%= name %></h1>
-        </div>
+          <%= name %>
+        </h1>
         <div class="<%= key %>-list">
           <%= for node <- nodes, do: H.detail_template(node, module) %>
         </div>

diff --git a/lib/ex_doc/formatter/html/templates.ex b/lib/ex_doc/formatter/html/templates.ex
@@ -247,12 +247,10 @@ defmodule ExDoc.Formatter.HTML.Templates do
 
   defp link_heading(_match, tag, title, id, prefix) do
     """
-    <div class="section-heading">
+    <#{tag} id="#{prefix}#{id}" class="section-heading">
       <a href="##{prefix}#{id}" class="hover-link"><span class="icon-link" aria-hidden="true"></span></a>
-      <#{tag} id="#{prefix}#{id}">
-        #{title}
-      </#{tag}>
-    </div>
+      #{title}
+    </#{tag}>
     """
   end
 

diff --git a/lib/ex_doc/formatter/html/templates/api_reference_template.eex b/lib/ex_doc/formatter/html/templates/api_reference_template.eex
@@ -1,14 +1,10 @@
-<div class="section-heading">
-  <h1>
-    API Reference <small class="app-vsn"><%= config.project %> v<%= config.version %></small>
-  </h1>
-</div>
+<h1>
+  API Reference <small class="app-vsn"><%= config.project %> v<%= config.version %></small>
+</h1>
 
 <%= if nodes_map.modules != [] do %>
   <section class="details-list">
-    <div class="section-heading">
-      <h2 id="modules">Modules</h2>
-    </div>
+    <h2 id="modules" class="section-heading">Modules</h2>
     <div class="summary">
       <%= for module_node <- Enum.sort_by(nodes_map.modules, & &1.id) do
         api_reference_entry_template(module_node)
@@ -19,9 +15,7 @@
 
 <%= if nodes_map.tasks != [] do %>
   <section class="details-list">
-    <div class="section-heading">
-      <h2 id="tasks">Mix Tasks</h2>
-    </div>
+    <h2 id="tasks" class="section-heading">Mix Tasks</h2>
     <div class="summary">
       <%= for task_node <- nodes_map.tasks do
         api_reference_entry_template(task_node)

diff --git a/lib/ex_doc/formatter/html/templates/module_template.eex b/lib/ex_doc/formatter/html/templates/module_template.eex
@@ -1,17 +1,15 @@
     <%= head_template(config, %{title: module.title, type: module.type}) %>
     <%= sidebar_template(config, nodes_map) %>
 
-      <div class="section-heading">
-        <h1>
-          <%= module_title(module) %> <small class="app-vsn">(<%= config.project %> v<%= config.version %>)</small>
-        </h1>
+      <h1>
+        <%= module_title(module) %> <small class="app-vsn">(<%= config.project %> v<%= config.version %>)</small>
         <%= if module.source_url do %>
           <a href="<%= module.source_url %>" title="View Source" class="view-source" rel="help">
             <span class="icon-code" aria-hidden="true"></span>
             <span class="sr-only">View Source</span>
           </a>
         <% end %>
-      </div>
+      </h1>
 
       <%= if deprecated = module.deprecated do %>
         <div class="deprecated">
@@ -27,32 +25,26 @@
 
       <%= if Enum.any?(summary, fn {_, v} -> v != [] end) do %>
         <section id="summary" class="details-list">
-          <div class="section-heading">
+          <h1 class="section-heading">
             <a class="hover-link" href="#summary">
               <span class="icon-link" aria-hidden="true"></span>
               <span class="sr-only">Link to this section</span>
             </a>
-            <h1>
-              Summary
-            </h1>
-            <%= for {name, nodes} <- summary, do: summary_template(name, nodes) %>
-          </div>
+            Summary
+          </h1>
+          <%= for {name, nodes} <- summary, do: summary_template(name, nodes) %>
         </section>
       <% end %>
 
       <%= for {name, nodes} <- summary, nodes != [], key = HTML.text_to_id(name) do %>
         <section id="<%= key %>" class="details-list">
-          <div class="section-heading">
+          <h1 class="section-heading">
             <a class="hover-link" href="#<%= key %>">
               <span class="icon-link" aria-hidden="true"></span>
               <span class="sr-only">Link to this section</span>
             </a>
-
-            <h1>
-              <%= name %>
-            </h1>
-          </div>
-
+            <%= name %>
+          </h1>
           <div class="<%= key %>-list">
             <%= for node <- nodes, do: detail_template(node, module) %>
           </div>

diff --git a/lib/ex_doc/formatter/html/templates/search_template.eex b/lib/ex_doc/formatter/html/templates/search_template.eex
@@ -1,6 +1,6 @@
 <%= head_template(config, %{title: "Search", type: :search}) %>
 <%= sidebar_template(config, nodes_map) %>
-<div id="search" class="section-heading">
+<div id="search">
   <h1>Search</h1>
   <div class="loading"><div></div><div></div><div></div><div></div></div>
 </div>