Add an underline to .s-link elements within p tag

StackExchange · Jul 29, 2024 · da3e34a · da3e34a
1 parent 0d75fc5
commit da3e34a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/docs/product/components/links.html b/docs/product/components/links.html
@@ -56,6 +56,11 @@
  </div>
  </div>
  </div>
+
+ {% header "h3", "Accessibility" %}
+
+ <p class="stacks-copy">Any link with adjacent static text cannot use color alone to differentiate it as a link. If a link is next to static text and the only visual indication that it’s a link is the color of the text (often <code class="stacks-code">blue-400</code>), it will require an underline in addition to the color. Reference <a href="https://www.w3.org/WAI/WCAG22/Techniques/failures/F73">WCAG SC 1.4.1</a> for more details.</p>
+
 </section>
 
 <section class="stacks-section">

diff --git a/lib/components/link/link.less b/lib/components/link/link.less
@@ -126,4 +126,8 @@ a,
  padding: 0;
  user-select: auto;
  }
+
+ p & {
+ text-decoration: underline;
+ }
 }