Merge pull request #244 from alphagov/accessibility-initial-focus

Don't change the focus of the page on initial load

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 - [Bump redcarpet to 3.5.1 to fix CVE-2020-26298](https://github.com/alphagov/tech-docs-gem/pull/226)
+- [244: Don't change the focus of the page on initial load](https://github.com/alphagov/tech-docs-gem/pull/244)
 
 ## 2.3.0
 

lib/assets/javascripts/_modules/in-page-navigation.js

@@ -47,14 +47,12 @@
         fragment = fragmentForFirstElementInView()
       }
 
-      handleChangeInActiveItem(fragment)
+      highlightActiveItemInToc(fragment)
     }
 
     function handleScrollEvent () {
-      handleChangeInActiveItem(fragmentForFirstElementInView())
-    }
+      var fragment = fragmentForFirstElementInView()
 
-    function handleChangeInActiveItem (fragment) {
       storeCurrentPositionInHistoryApi(fragment)
       highlightActiveItemInToc(fragment)
     }

lib/govuk_tech_docs/table_of_contents/heading.rb

@@ -13,7 +13,11 @@ def size
       end
 
       def href
-        @page_url + "#" + @attributes["id"]
+        if @page_url != "" && size == 1
+          @page_url
+        else
+          @page_url + "#" + @attributes["id"]
+        end
       end
 
       def title

spec/table_of_contents/heading_spec.rb

@@ -10,10 +10,40 @@
   end
 
   describe "#href" do
-    it "returns a fragment href" do
-      heading = described_class.new(element_name: "", text: "", attributes: { "id" => "apple-recipes" })
+    describe "when page is specified" do
+      describe "and heading is h1" do
+        it "returns an href with page and without fragment" do
+          heading = described_class.new(element_name: "h1", text: "", page_url: "index.html", attributes: { "id" => "apple-recipes" })
 
-      expect(heading.href).to eq("#apple-recipes")
+          expect(heading.href).to eq("index.html")
+        end
+      end
+
+      describe "and heading is not h1" do
+        it "returns an href with page and fragment" do
+          heading = described_class.new(element_name: "h2", text: "", page_url: "index.html", attributes: { "id" => "apple-recipes" })
+
+          expect(heading.href).to eq("index.html#apple-recipes")
+        end
+      end
+    end
+
+    describe "when page is not specified" do
+      describe "and heading is h1" do
+        it "returns a fragment href" do
+          heading = described_class.new(element_name: "h1", text: "", attributes: { "id" => "apple-recipes" })
+
+          expect(heading.href).to eq("#apple-recipes")
+        end
+      end
+
+      describe "and heading is not h1" do
+        it "returns a fragment href" do
+          heading = described_class.new(element_name: "h2", text: "", attributes: { "id" => "apple-recipes" })
+
+          expect(heading.href).to eq("#apple-recipes")
+        end
+      end
     end
   end
 

spec/table_of_contents/helpers_spec.rb

@@ -151,7 +151,7 @@ def add_children(children)
 <ul><li><a href="/index.html"><span>Index</span></a>
 <ul>
   <li>
-    <a href="/a.html#heading-one"><span>Heading one</span></a>
+    <a href="/a.html"><span>Heading one</span></a>
     <ul>
       <li>
         <a href="/a.html#heading-two"><span>Heading two</span></a>
@@ -161,7 +161,7 @@ def add_children(children)
 </ul>
 <ul>
   <li>
-    <a href="/b.html#heading-one"><span>Heading one</span></a>
+    <a href="/b.html"><span>Heading one</span></a>
     <ul>
       <li>
         <a href="/b.html#heading-two"><span>Heading two</span></a>
@@ -200,7 +200,7 @@ def add_children(children)
 <ul><li><a href="/prefix/index.html"><span>Index</span></a>
 <ul>
   <li>
-    <a href="/prefix/a.html#heading-one"><span>Heading one</span></a>
+    <a href="/prefix/a.html"><span>Heading one</span></a>
     <ul>
       <li>
         <a href="/prefix/a.html#heading-two"><span>Heading two</span></a>
@@ -210,7 +210,7 @@ def add_children(children)
 </ul>
 <ul>
   <li>
-    <a href="/prefix/b.html#heading-one"><span>Heading one</span></a>
+    <a href="/prefix/b.html"><span>Heading one</span></a>
     <ul>
       <li>
         <a href="/prefix/b.html#heading-two"><span>Heading two</span></a>
@@ -246,23 +246,23 @@ def add_children(children)
       expected_multi_page_table_of_contents = %{
 <ul>
   <li>
-    <a href="/index.html#heading-one"><span>Heading one</span></a>
+    <a href="/index.html"><span>Heading one</span></a>
     <ul>
       <li>
         <a href="/index.html#heading-two"><span>Heading two</span></a>
       </li>
     </ul>
   </li>
   <li>
-    <a href="/index.html#heading-one"><span>Heading one</span></a>
+    <a href="/index.html"><span>Heading one</span></a>
     <ul>
       <li>
         <a href="/index.html#heading-two"><span>Heading two</span></a>
       </li>
     </ul>
   </li>
   <li>
-    <a href="/index.html#heading-one"><span>Heading one</span></a>
+    <a href="/index.html"><span>Heading one</span></a>
     <ul>
       <li>
         <a href="/index.html#heading-two"><span>Heading two</span></a>