Fix accessibility of "back to top" link

src/core/structure.js

@@ -307,8 +307,10 @@ function createTableOfContents(ol) {
     }
   }
 
-  const link = html`<p role="navigation" id="back-to-top">
-    <a href="#title"><abbr title="${l10n.back_to_top}">&uarr;</abbr></a>
+  const link = html`<p id="back-to-top">
+    <a href="#title"
+      ><span aria-hidden="true">&uarr;</span> ${l10n.back_to_top}</a
+    >
   </p>`;
   document.body.append(link);
 }

src/styles/respec.css.js

@@ -184,10 +184,24 @@ aside.example .marker > a.self-link {
   }
 }
 
+#back-to-top {
+  text-align: end;
+}
+
+#back-to-top a {
+  display: inline-block;
+  padding: 0.5em 1em;
+  text-decoration: none;
+}
+
 @media print {
   .removeOnSave {
     display: none;
   }
+
+  #back-to-top {
+    display: none;
+  }
 }
 
 /**

tests/spec/core/structure-spec.js

@@ -296,6 +296,19 @@ describe("Core - Structure", () => {
     expect(anchor).toBeTruthy();
   });
 
+  it("does not use role=navigation and has accessible text for back to top link", async () => {
+    const ops = {
+      config: makeBasicConfig(),
+      body,
+    };
+    const doc = await makeRSDoc(ops);
+    const backToTop = doc.getElementById("back-to-top");
+    expect(backToTop).toBeTruthy();
+    expect(backToTop.getAttribute("role")).toBeNull();
+    const anchor = backToTop.querySelector("a");
+    expect(anchor.textContent.trim()).toContain("Back to Top");
+  });
+
   it("localizes table of contents", async () => {
     const ops = {
       config: makeBasicConfig(),
@@ -352,9 +365,9 @@ describe("Core - Structure", () => {
     };
     const doc = await makeRSDoc(ops);
     expect(doc.documentElement.lang).toBe("fr");
-    const abbr = doc.querySelector("#back-to-top abbr");
-    expect(abbr).toBeTruthy();
-    expect(abbr.title).toBe("Retourner en haut");
+    const link = doc.querySelector("#back-to-top a");
+    expect(link).toBeTruthy();
+    expect(link.textContent).toContain("Retourner en haut");
   });
 
   it("finds and updates empty anchors correctly", async () => {