Create tests for screen reader

uswds · thisisdano · May 10, 2023 · Mar 1, 2023 · Mar 6, 2023 · Mar 6, 2023
commit e56e0b31df6acd8f0333d912c8016044c62c57e0
diff --git a/packages/usa-link/src/test/test-patterns/test-external-sr.twig b/packages/usa-link/src/test/test-patterns/test-external-sr.twig
@@ -0,0 +1,29 @@
+<p>External link with screen reader label in square brackets. <a class="usa-link usa-link--external usa-link--external-1" href="https://i.giphy.com/media/WPzQF6ruiIIVzHNlwX/source.gif">CDC recommends using sunscreen when you're outside</a>. to reduce your risk of skin damage and skin cancer</p>
+
+<p>External link with screen reader label with a colon. To ensure food safety during an emergency, <a class="usa-link usa-link--external usa-link--external-2" href="https://i.giphy.com/media/WPzQF6ruiIIVzHNlwX/source.gif">the Red Cross recommends you do not open the refrigerator or freezer</a>.</p>
+
+<p>External link with screen reader label without punctuation. For more information on how to boil water, <a class="usa-link usa-link--external usa-link--external-3" href="https://i.giphy.com/media/WPzQF6ruiIIVzHNlwX/source.gif">see video resource</a>.</p>
+
+<style>
+  /* Global styles */
+  .usa-link--external::before {
+    position: absolute;
+    left: -999em;
+    right: auto;
+  }
+
+  /* Brackets */
+  .usa-link--external-1::before {
+    content: "[External link]";
+  }
+
+  /* Colon */
+  .usa-link--external-2::before {
+    content: "External link:";
+  }
+
+  /* No punctuation */
+  .usa-link--external-3::before {
+    content: "External link";
+  }
+</style>
diff --git a/packages/usa-link/src/usa-link.stories.js b/packages/usa-link/src/usa-link.stories.js
@@ -1,9 +1,13 @@
 import Component from "./usa-link.twig";
+import TestComponent from "./test/test-patterns/test-external-sr.twig";
 
 export default {
   title: "Components/Link",
 };
 
 const Template = (args) => Component(args);
+const TestTemplate = (args) => TestComponent(args);
 
 export const Link = Template.bind({});
+
+export const Test = TestTemplate.bind({});
diff --git a/packages/uswds-core/src/styles/mixins/general/external-link.scss b/packages/uswds-core/src/styles/mixins/general/external-link.scss
@@ -1,7 +1,9 @@
 @use "./icon" as *;
 @use "../../functions" as *;
+@use "./screen-reader" as *;
 
 $external-link-size: 1.75ex;
+$external-link-label: "External link";
 
 $icon-object: (
   "name": "launch",
@@ -16,6 +18,12 @@ $icon-object: (
   padding-right: $external-link-size;
   position: relative;
 
+  // Screen reader label
+  // &::before {
+    // @include sr-only;
+  //   content: "[#{$external-link-label}]";
+  // }
+
   &::after {
     @include add-color-icon($icon-object, $contrast-bg);
     background-position: center;