External links (GSA#44)

* Added external link icon to certain links. * Using CSS for external link icon. Added USWDS svg icon file. * Updated index page buttons. * Added target blank to all external links with hidden warning. * Removed xlink. * Fixed test and updated new window text.
CivicActions · Feb 4, 2022 · b614469 · b614469
1 parent 7fcc29f
commit b614469
Show file tree

Hide file tree

Showing 14 changed files with 89 additions and 44 deletions.
diff --git a/cypress/integration/report.test.js b/cypress/integration/report.test.js
@@ -74,8 +74,8 @@ describe("Report", () => {
     cy.get(".validation").should("contain", "Valid!");
 
     cy.get("#content").should(
-      "contain",
-      "This content is licensed under a Creative Commons Attribution Share Alike 4.0 International."
+      "contain.text",
+      "This content is licensed under a Creative Commons Attribution Share Alike 4.0 International"
     );
   });
 

diff --git a/public/images/external-link.svg b/public/images/external-link.svg
diff --git a/src/components/DTWithAnchor.svelte b/src/components/DTWithAnchor.svelte
@@ -56,11 +56,11 @@
   <slot />
   <a href="#{id}{extraId}" class="header-anchor" aria-labelledby="{id}{extraId}">
     <span class="anchor-icon" aria-hidden="true">
-        <svg
+      <svg
         focusable="false"
         aria-hidden="true"
         class="icon-link">
-        <use xlink:href={`${vars.pathPrefix}/images/icons.svg#link`} />
+        <use href={`${vars.pathPrefix}/images/icons.svg#link`} />
       </svg>
     </span>
     <span class="visuallyhidden">Anchor link</span>

diff --git a/src/components/LinkToGuidance.svelte b/src/components/LinkToGuidance.svelte
@@ -20,13 +20,16 @@
   .link-to-guidance svg {
     margin-right: 0.25em;
   }
+  .link-to-guidance:after {
+    margin-top: 0;
+  }
 </style>
 
 <a
   {href}
   class="link-to-guidance button button-small button-secondary"
   target="_blank"
-  rel="noopener roreferrer">
+  rel="noopener noreferrer">
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -46,5 +49,5 @@
   </svg>
   <span>
     <slot />
-  </span>
+  </span> <span class="visuallyhidden">(opens in a new window or tab)</span>
 </a>
diff --git a/src/components/PagerLink.svelte b/src/components/PagerLink.svelte
@@ -19,14 +19,14 @@
         focusable="false"
         aria-hidden="true"
         class="icon-arrow-right pager--item-icon">
-        <use xlink:href={`${vars.pathPrefix}/images/icons.svg#icon-arrow-left`} />
+        <use href={`${vars.pathPrefix}/images/icons.svg#icon-arrow-left`} />
       </svg>
     {:else if direction === 'next'}
       <svg
         focusable="false"
         aria-hidden="true"
         class="icon-arrow-right pager--item-icon">
-        <use xlink:href={`${vars.pathPrefix}/images/icons.svg#icon-arrow-right`} />
+        <use href={`${vars.pathPrefix}/images/icons.svg#icon-arrow-right`} />
       </svg>
     {/if}
     <span class="pager--item-text">

diff --git a/src/components/report/ReportChapterTableResult.svelte b/src/components/report/ReportChapterTableResult.svelte
@@ -37,8 +37,8 @@
 
 <tr class="result-row" id="{catalogCriteria.alt_id}{extraId}">
   <td>
-    <a target="_blank" rel="noopener roreferrer" href="{standard.url}#{catalogCriteria.alt_id}">
-      {criteria.num} {catalogCriteria.handle}
+    <a href="{standard.url}#{catalogCriteria.alt_id}" target="_blank">
+      {criteria.num} {catalogCriteria.handle} <span class="visuallyhidden">(opens in a new window or tab)</span>
     </a>
   </td>
   <td>

diff --git a/src/components/report/ReportHTMLDownload.svelte b/src/components/report/ReportHTMLDownload.svelte
@@ -130,7 +130,7 @@
       <div class="grid-container">
         <div class="grid-row grid-gap">
           <div class="grid-col">
-            <a href="https://github.com/GSA/openacr">OpenACR</a> is a format maintained by the <a href="https://gsa.gov/">GSA</a>. The content is the responsibility of the author.
+            <a href="https://github.com/GSA/openacr" target="_blank">OpenACR <span class="visuallyhidden">(opens in a new window or tab)</span></a> is a format maintained by the <a href="https://gsa.gov/" target="_blank">GSA <span class="visuallyhidden">(opens in a new window or tab)</span></a>. The content is the responsibility of the author.
           </div>
           <div class="grid-col">
             <ReportLicense />

diff --git a/src/components/report/ReportHeader.svelte b/src/components/report/ReportHeader.svelte
@@ -32,9 +32,9 @@ Based on {catalog.title}
     {#if $evaluation["author"]["name"]}<li>Name: {$evaluation["author"]["name"]}</li>{/if}
     {#if $evaluation["author"]["company_name"]}<li>Company: {$evaluation["author"]["company_name"]}</li>{/if}
     {#if $evaluation["author"]["address"]}<li>Address: {$evaluation["author"]["address"]}</li>{/if}
-    {#if $evaluation["author"]["email"]}<li>Email: <a href="mailto:{$evaluation['author']['email']}">{$evaluation["author"]["email"]}</a></li>{/if}
+    {#if $evaluation["author"]["email"]}<li>Email: <a href="mailto:{$evaluation['author']['email']}" target="_blank">{$evaluation["author"]["email"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a></li>{/if}
     {#if $evaluation["author"]["phone"]}<li>Phone: {$evaluation["author"]["phone"]}</li>{/if}
-    {#if $evaluation["author"]["website"]}<li>Website: <a href="{$evaluation['author']['website']}">{$evaluation["author"]["website"]}</a></li>{/if}
+    {#if $evaluation["author"]["website"]}<li>Website: <a href="{$evaluation['author']['website']}" target="_blank">{$evaluation["author"]["website"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a></li>{/if}
   </ul>
 {/if}
 {#if $evaluation["vendor"]}
@@ -43,9 +43,9 @@ Based on {catalog.title}
     {#if $evaluation["vendor"]["name"]}<li>Name: {$evaluation["vendor"]["name"]}</li>{/if}
     {#if $evaluation["vendor"]["company_name"]}<li>Company: {$evaluation["vendor"]["company_name"]}</li>{/if}
     {#if $evaluation["vendor"]["address"]}<li>Address: {$evaluation["vendor"]["address"]}</li>{/if}
-    {#if $evaluation["vendor"]["email"]}<li>Email: <a href="mailto:{$evaluation['vendor']['email']}">{$evaluation["vendor"]["email"]}</a></li>{/if}
+    {#if $evaluation["vendor"]["email"]}<li>Email: <a href="mailto:{$evaluation['vendor']['email']}" target="_blank">{$evaluation["vendor"]["email"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a></li>{/if}
     {#if $evaluation["vendor"]["phone"]}<li>Phone: {$evaluation["vendor"]["phone"]}</li>{/if}
-    {#if $evaluation["vendor"]["website"]}<li>Website: <a href="{$evaluation['vendor']['website']}">{$evaluation["vendor"]["website"]}</a></li>{/if}
+    {#if $evaluation["vendor"]["website"]}<li>Website: <a href="{$evaluation['vendor']['website']}" target="_blank">{$evaluation["vendor"]["website"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a></li>{/if}
   </ul>
 {/if}
 
@@ -72,7 +72,7 @@ This report covers the degree of conformance for the following accessibility sta
   <tbody>
     {#each catalog.standards as standard }
       <tr>
-        <td><a href="{standard.url}">{standard.label}</a></td>
+        <td><a href="{standard.url}" target="_blank">{standard.label} <span class="visuallyhidden">(opens in a new window or tab)</span></a></td>
         <td>{@html standardsIncluded(standard.chapters)}</td>
       </tr>
     {/each}

diff --git a/src/components/report/ReportSummary.svelte b/src/components/report/ReportSummary.svelte
@@ -14,18 +14,18 @@
 {/if}
 {#if $evaluation["repository"]}
   <HeaderWithAnchor id="repository" level=2 {download}>Repository</HeaderWithAnchor>
-  <a href="{$evaluation["repository"]}">{$evaluation["repository"]}</a>
+  <a href="{$evaluation["repository"]}" target="_blank">{$evaluation["repository"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a>
 {/if}
 {#if $evaluation["feedback"]}
   <HeaderWithAnchor id="feedback" level=2 {download}>Feedback</HeaderWithAnchor>
-  <a href="{$evaluation["feedback"]}">{$evaluation["feedback"]}</a>
+  <a href="{$evaluation["feedback"]}" target="_blank">{$evaluation["feedback"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a>
 {/if}
 {#if $evaluation["related_openacrs"] && $evaluation["related_openacrs"].length > 0}
   <HeaderWithAnchor id="related-openacrs" level=2 {download}>Related OpenACRs</HeaderWithAnchor>
   <ul>
     {#each $evaluation["related_openacrs"] as related}
       {#if related.url}
-        <li><a href="{related.url}">{related.url} ({related.type})</a></li>
+        <li><a href="{related.url}" target="_blank">{related.url} ({related.type}) <span class="visuallyhidden">(opens in a new window or tab)</span></a></li>
       {/if}
     {/each}
   </ul>

diff --git a/src/components/report/ReportZipDownload.svelte b/src/components/report/ReportZipDownload.svelte
@@ -138,7 +138,7 @@
       <div class="grid-container">
         <div class="grid-row grid-gap">
           <div class="grid-col">
-            <a href="https://github.com/GSA/openacr">OpenACR</a> is a format maintained by the <a href="https://gsa.gov/">GSA</a>. The content is the responsibility of the author.
+            <a href="https://github.com/GSA/openacr" target="_blank">OpenACR <span class="visuallyhidden">(opens in a new window or tab)</span></a> is a format maintained by the <a href="https://gsa.gov/" target="_blank">GSA <span class="visuallyhidden">(opens in a new window or tab)</span></a>. The content is the responsibility of the author.
           </div>
           <div class="grid-col">
             <ReportLicense />

diff --git a/src/index.html b/src/index.html
@@ -36,6 +36,18 @@
       h4 {
         color: #162e51;
       }
+      a[target="_blank"]:after {
+        background: 0 0;
+        background-color: currentColor;
+        -webkit-mask: url("{{{ pathPrefix }}}/images/external-link.svg")
+          no-repeat center/contain;
+        width: 1.75ex;
+        content: "";
+        display: inline-block;
+        height: 1.75ex;
+        margin-left: 2px;
+        margin-top: 0.7ex;
+      }
       summary > :first-child:before {
         border-color: #162e51;
       }
@@ -57,6 +69,9 @@
         border-color: #1e6ad6;
         color: var(--pure-white);
       }
+      a.button:after {
+        margin-top: 0;
+      }
       /* End placeholder styling. */
       :target {
         scroll-margin-top: 5rem;
@@ -185,9 +200,7 @@
       >
         <header class="box-h box-h-icon box-h-space-above box-h-icon">
           <svg focusable="false" aria-hidden="true" class="icon-comments">
-            <use
-              xlink:href="{{{ pathPrefix }}}/images/icons.svg#icon-comments"
-            ></use>
+            <use href="{{{ pathPrefix }}}/images/icons.svg#icon-comments"></use>
           </svg>
           <h2>Help improve this page</h2>
         </header>
@@ -198,15 +211,28 @@ <h2>Help improve this page</h2>
             or via GitHub.
           </p>
           <div class="button-group">
-            <a href="mailto:[email protected]" class="button"
-              ><span>E-mail</span></a
+            <a href="mailto:[email protected]" class="button" target="_blank"
+              ><span>E-mail</span>
+              <span class="visuallyhidden"
+                >(opens in a new window or tab)</span
+              ></a
             >
-            <a href="https://github.com/GSA/openacr-editor" class="button"
-              ><span>Fork &amp; Edit on GitHub</span></a
+            <a
+              href="https://github.com/GSA/openacr-editor"
+              class="button"
+              target="_blank"
+              ><span>Fork &amp; Edit on GitHub</span>
+              <span class="visuallyhidden"
+                >(opens in a new window or tab)</span
+              ></a
             ><a
               href="https://github.com/GSA/openacr-editor/issues/new"
               class="button"
-              ><span>New GitHub Issue</span></a
+              target="_blank"
+              ><span>New GitHub Issue</span>
+              <span class="visuallyhidden"
+                >(opens in a new window or tab)</span
+              ></a
             >
           </div>
         </div>
@@ -226,20 +252,36 @@ <h2>Help improve this page</h2>
         <p><strong>Date:</strong> Published December 2021.</p>
         <p><strong>Version:</strong> v0.1.0</p>
         <p>
-          <a href="https://github.com/GSA/openacr">OpenACR</a>
+          <a href="https://github.com/GSA/openacr" target="_blank"
+            >OpenACR
+            <span class="visuallyhidden"
+              >(opens in a new window or tab)</span
+            ></a
+          >
           is a format maintained by the
-          <a href="https://gsa.gov/"
-            >U.S. General Services Administration (GSA)</a
+          <a href="https://gsa.gov/" target="_blank"
+            >U.S. General Services Administration (GSA)
+            <span class="visuallyhidden"
+              >(opens in a new window or tab)</span
+            ></a
           >. The content is the responsibility of the author.
         </p>
         <p>
           This software includes material copied from or derived from
-          <a href="https://github.com/w3c/wai-atag-report-tool"
-            >W3C ATAG Report Tool (ART)</a
+          <a href="https://github.com/w3c/wai-atag-report-tool" target="_blank"
+            >W3C ATAG Report Tool (ART)
+            <span class="visuallyhidden"
+              >(opens in a new window or tab)</span
+            ></a
           >
           and Copyright © 2021 W3C® (MIT, ERCIM, Keio, Beihang).
-          <a href="https://www.w3.org/Consortium/Legal/copyright-software"
-            >W3C Software notice and license</a
+          <a
+            href="https://www.w3.org/Consortium/Legal/copyright-software"
+            target="_blank"
+            >W3C Software notice and license
+            <span class="visuallyhidden"
+              >(opens in a new window or tab)</span
+            ></a
           >.
         </p>
       </div>

diff --git a/src/routes/Acknowledgements.svelte b/src/routes/Acknowledgements.svelte
@@ -22,7 +22,7 @@
 <Header>Acknowledgements</Header>
 
 <p>
-  The OpenACR Editor was developed by <a href="https://civicactions.com/">CivicActions</a> and <a href="https://www.gsa.gov/">U.S. General Services Administration (GSA)</a>
+  The OpenACR Editor was developed by <a href="https://civicactions.com/" target="_blank">CivicActions <span class="visuallyhidden">(opens in a new window or tab)</span></a> and <a href="https://www.gsa.gov/" target="_blank">U.S. General Services Administration (GSA) <span class="visuallyhidden">(opens in a new window or tab)</span></a>
 </p>
 
 <HeaderWithAnchor id="project-team" level=2>Project Team</HeaderWithAnchor>

diff --git a/src/routes/Overview.svelte b/src/routes/Overview.svelte
@@ -26,7 +26,7 @@
 <Header>Overview</Header>
 
 <p>
-  This web editor helps evaluators build Accessibility Conformance Reports in the <a href="https://github.com/gsa/openacr">OpenACR format</a>.
+  This web editor helps evaluators build Accessibility Conformance Reports in the <a href="https://github.com/gsa/openacr" target="_blank">OpenACR format <span class="visuallyhidden">(opens in a new window or tab)</span></a>.
   It is designed to help accessibility subject matter experts create machine-readable OpenACR documents. Authors will be guided in creating an
   accessible report for the digital product or service that they are documenting. Conformance for each requirement can be documented as required
   to generate a Section 508 report.
@@ -49,7 +49,7 @@
     to edit the report the future without the YAML file.
   </li>
   <li>
-    You can add limited formatting to your report with <a href="https://en.wikipedia.org/wiki/Markdown">Markdown</a>. This allows you to add
+    You can add limited formatting to your report with <a href="https://en.wikipedia.org/wiki/Markdown" target="_blank">Markdown <span class="visuallyhidden">(opens in a new window or tab)</span></a>. This allows you to add
     lists, links and code examples.
   </li>
 </ul>
@@ -76,10 +76,7 @@
     will make it easier to provide feedback to vendors. Comparisons will make it easier to update reports.
   </p>
   <p>
-    For more information, see
-    <a href="https://github.com/GSA/openacr">
-      OpenACR
-    </a>
+    For more information, see <a href="https://github.com/GSA/openacr" target="_blank">OpenACR <span class="visuallyhidden">(opens in a new window or tab)</span></a>.
   </p>
 </details>
 

diff --git a/src/utils/license.js b/src/utils/license.js
@@ -3,9 +3,11 @@ import spdxLicenseList from "spdx-license-list";
 export function license(evaluation, templateType) {
   if (evaluation.license) {
     if (templateType === "html") {
-      return `<a href="${spdxLicenseList[evaluation.license].url}">${
+      return `<a href="${
+        spdxLicenseList[evaluation.license].url
+      }" target="_blank">${
         spdxLicenseList[evaluation.license].name
-      }</a>`;
+      } <span class="visuallyhidden">(opens in a new window or tab)</span></a>`;
     } else {
       return `[${spdxLicenseList[evaluation.license].name}](${
         spdxLicenseList[evaluation.license].url