chore(links): update visited links colors w/ a11y considerations (#1740)

* chore(links): update visited links colors and application (#1735) * fix(links): make visited dark mode links purple-500 * Update color for .s-link__visited * Fix link visited selector, anchor visited selector * minor formatting fix * Prevent changes from impacting input messages I'd like to punt on implementing visited styles for links within `.s-input-message` since the link colors do not follow our standard 400/500/600 pattern for default/hover/visited. @CGuindon thoughts? * Implement style for hover + visited links * formatting * Use purple-600 for visited+hover * exclude all `.s-*` elements from default visited styles (with exception) * fix typo * Revert unneeded breadcrumb visited override * whitespace fix * Add an underline to .s-link elements within p tag * Add visual test for s-link within paragraph * Implement similar link underline for docs pages * Add comment for visited class targeting Addresses #1740 (comment)
StackExchange · Aug 1, 2024 · 4db47a6 · 4db47a6
1 parent b29aef4
commit 4db47a6
Show file tree

Hide file tree

Showing 179 changed files with 643 additions and 61 deletions.
diff --git a/docs/assets/less/stacks-documentation.less b/docs/assets/less/stacks-documentation.less
@@ -208,6 +208,11 @@
  strong {
  color: var(--fc-dark);
  }
+
+ a:not([class]),
+ .s-link {
+ text-decoration: underline;
+ }
 }
 
 .stacks-copy__lg {
@@ -239,6 +244,11 @@
  font-size: var(--fs-body3);
  line-height: var(--lh-lg);
  color: var(--fc-medium);
+
+ a:not([class]),
+ .s-link {
+ text-decoration: underline;
+ }
 }
 
 
@@ -348,7 +358,6 @@
  }
 
  max-height: var(--_tb-searchbar-popover-content-mxh);
-
  }
 
  .ds-dropdown-menu {

diff --git a/docs/product/components/inputs.html b/docs/product/components/inputs.html
@@ -196,7 +196,7 @@ <h1 class="fs-headline1 fw-normal mb16">
  <input class="s-input" id="example-warning" type="text" placeholder="" aria-describedby="example-warning-desc" />
  @Svg.Alert.With("s-input-icon")
  </div>
- <p id="example-warning-desc" class="flex--item s-input-message mb0">Caps lock is on! <a>Having trouble entering your username?</a></p>
+ <p id="example-warning-desc" class="flex--item s-input-message mb0">Caps lock is on! <a href="#">Having trouble entering your username?</a></p>
 </div>
 {% endhighlight %}
  <div class="stacks-preview--example">
@@ -207,7 +207,7 @@ <h1 class="fs-headline1 fw-normal mb16">
  <input class="s-input" id="example-warning" type="text" value="AA" aria-describedby="example-warning-desc" />
  {% icon "Alert", "s-input-icon" %}
  </div>
- <p id="example-warning-desc" class="flex--item s-input-message mb0">Caps lock is on! <a>Having trouble entering your username?</a></p>
+ <p id="example-warning-desc" class="flex--item s-input-message mb0">Caps lock is on! <a href="#">Having trouble entering your username?</a></p>
  </div>
  </div>
  </div>
@@ -226,7 +226,7 @@ <h1 class="fs-headline1 fw-normal mb16">
  <input class="s-input" id="example-error" type="text" placeholder="e.g. johndoe111" aria-describedby="example-error-desc" aria-invalid="true" />
  @Svg.AlertCircle.With("s-input-icon")
  </div>
- <p id="example-error-desc" class="flex--item s-input-message mb0">You must provide a username. <a>Forgot your username?</a></p>
+ <p id="example-error-desc" class="flex--item s-input-message mb0">You must provide a username. <a href="#">Forgot your username?</a></p>
 </div>
 {% endhighlight %}
  <div class="stacks-preview--example">
@@ -237,7 +237,7 @@ <h1 class="fs-headline1 fw-normal mb16">
  <input class="s-input" id="example-error" type="text" aria-describedby="example-error-desc" />
  {% icon "AlertCircle", "s-input-icon" %}
  </div>
- <p id="example-error-desc" class="flex--item s-input-message mb0">You must provide a username. <a>Forgot your username?</a></p>
+ <p id="example-error-desc" class="flex--item s-input-message mb0">You must provide a username. <a href="#">Forgot your username?</a></p>
  </div>
  </div>
  </div>
@@ -252,7 +252,7 @@ <h1 class="fs-headline1 fw-normal mb16">
  <input class="s-input" id="example-success" type="text" aria-describedby="example-success-desc" />
  @Svg.Checkmark.With("s-input-icon")
  </div>
- <p id="example-success-desc" class="flex--item s-input-message mb0">That name is available! <a>Why do we require a username?</a></p>
+ <p id="example-success-desc" class="flex--item s-input-message mb0">That name is available! <a href="#">Why do we require a username?</a></p>
 </div>
 {% endhighlight %}
  <div class="stacks-preview--example">
@@ -263,7 +263,7 @@ <h1 class="fs-headline1 fw-normal mb16">
  <input class="s-input" id="example-success" type="text" value="aaronshekey" aria-describedby="example-success-desc" />
  {% icon "Checkmark", "s-input-icon" %}
  </div>
- <p id="example-success-desc" class="flex--item s-input-message mb0">That name is available! <a>Why do we require a username?</a></p>
+ <p id="example-success-desc" class="flex--item s-input-message mb0">That name is available! <a href="#">Why do we require a username?</a></p>
  </div>
  </div>
  </div>

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/anchor/anchor.less b/lib/components/anchor/anchor.less
@@ -2,7 +2,8 @@
  // CUSTOM PROPERTIED DEFINED WITHIN VARIANTS
  // --_an-a-fc
  // --_an-a-fc-hover
- --_an-a-fc-visited: var(--_an-a-fc);
+ // --_an-a-fc-visited
+ // --_an-a-fc-hover-visited
 
  // MODIFIERS
  &&__underlined {
@@ -13,6 +14,13 @@
  }
 
  // VARIANTS
+ &&__danger,
+ &&__grayscale,
+ &&__inherit,
+ &&__muted {
+ --_an-a-fc-hover-visited: var(--_an-a-fc-hover);
+ }
+
  &&__danger {
  --_an-a-fc: var(--red-400);
  --_an-a-fc-hover: var(--red-500);
@@ -22,7 +30,8 @@
  &&__default {
  --_an-a-fc: var(--theme-link-color, var(--theme-secondary-400));
  --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
- --_an-a-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-600));
+ --_an-a-fc-visited: var(--theme-link-color-visited, var(--purple-500));
+ --_an-a-fc-hover-visited: var(--theme-link-color-hover, var(--purple-600));
  }
 
  &&__grayscale {
@@ -50,19 +59,20 @@
  &&__muted {
  a:not(.s-link),
  .s-btn.s-btn__link {
+ &:active,
+ &:hover {
+ color: var(--_an-a-fc-hover);
+ }
+
  color: var(--_an-a-fc, inherit);
+ }
 
- &:hover,
- &:active {
- &,
- &:visited {
- color: var(--_an-a-fc-hover);
- }
+ a:not(.s-link):visited {
+ &:hover {
+ color: var(--_an-a-fc-hover-visited, inherit);
  }
 
- &:visited {
- color: var(--_an-a-fc-visited, inherit);
- }
+ color: var(--_an-a-fc-visited, inherit);
  }
  }
 }
diff --git a/lib/components/button/button.less b/lib/components/button/button.less
@@ -412,7 +412,7 @@
  border-color: var(--_bu-bc-hover);
  }
 
- &:visited:not(:hover):not(:focus) {
+ &:visited:not(:active):not(:focus) {
  &.s-btn__filled {
  background-color: var(--_bu-filled-bg);
  border-color: var(--_bu-filled-bc);

diff --git a/lib/components/input-message/input-message.a11y.test.ts b/lib/components/input-message/input-message.a11y.test.ts
@@ -6,19 +6,22 @@ const states = [
  {
  class: "",
  children:
- 'This is a stateless input message. <a href="">Learn more</a>.',
+ 'This is a stateless input message. <a href="/404-unvisited">Learn more</a>.',
  },
  {
  class: "has-error",
- children: 'This is an error input message. <a href="">Learn more</a>.',
+ children:
+ 'This is an error input message. <a href="/404-unvisited">Learn more</a>.',
  },
  {
  class: "has-success",
- children: 'This is a success input message. <a href="">Learn more</a>.',
+ children:
+ 'This is a success input message. <a href="/404-unvisited">Learn more</a>.',
  },
  {
  class: "has-warning",
- children: 'This is a warning input message. <a href="">Learn more</a>.',
+ children:
+ 'This is a warning input message. <a href="/404-unvisited">Learn more</a>.',
  },
  {
  class: "disabled",

diff --git a/lib/components/input-message/input-message.less b/lib/components/input-message/input-message.less
@@ -36,10 +36,10 @@
  // CHILD ELEMENTS
  a {
  &:hover {
- color: var(--_im-a-fc-hover);
+ color: var(--_im-a-fc-hover) !important;
  }
 
- color: var(--_im-a-fc);
+ color: var(--_im-a-fc) !important;
  }
 
  color: var(--_im-fc);

diff --git a/lib/components/link-preview/link-preview.less b/lib/components/link-preview/link-preview.less
@@ -25,12 +25,10 @@
  & &--details,
  & &--footer {
  a {
- &:visited {
- color: var(--black-500);
- }
  &:hover,
  &:active,
- &:focus {
+ &:focus,
+ &:visited {
  color: var(--black-500);
  }
 
@@ -106,11 +104,8 @@
 
  & a&--title {
  &:active,
- &:hover{
- &,
- &.s-link__visited {
- color: var(--theme-link-color-hover, var(--theme-secondary-500));
- }
+ &:hover {
+ color: var(--theme-link-color-hover, var(--theme-secondary-500));
  }
 
  &:active,
@@ -125,8 +120,13 @@
  text-decoration: none;
  }
 
- &.s-link__visited:visited {
- color: var(--theme-link-color, var(--theme-secondary-600));
+ &:visited,
+ &.s-link__visited {
+ &:hover {
+ color: var(--theme-link-color, var(--purple-600));
+ }
+
+ color: var(--theme-link-color, var(--purple-500));
  }
 
  color: var(--theme-link-color, var(--theme-secondary-400));

diff --git a/lib/components/link/link.less b/lib/components/link/link.less
@@ -1,10 +1,28 @@
 // TODO we *really* shouldn't be apply styles directly onto `<a>` like this, but
 // it's tech debt that'll take some doing in consumer's code to pay down.
+a {
+ &:visited {
+ // We're target these specific selectors to avoid affecting the visited state of stacks components
+ // not specified here. See for https://github.com/StackExchange/Stacks/pull/1740#discussion_r1698389312
+ &:not([class*="s-"]),
+ &.s-link,
+ &.s-sidebarwidget--action,
+ &.s-user-card--link {
+ &:hover {
+ color: var(--_li-fc-hover-visited);
+ }
+
+ color: var(--_li-fc-visited);
+ }
+ }
+}
+
 a,
 .s-link {
  --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
  --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
- --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-600));
+ --_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
+ --_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));
 
  // CONTEXTUAL STYLES
  .highcontrast-mode({
@@ -13,21 +31,6 @@ a,
 
  // STATES
  &.s-link {
- &__danger,
- &__grayscale,
- &__inherit,
- &__muted,
- &__visited {
- &:visited {
- &:active,
- &:hover {
- color: var(--_li-fc-hover);
- }
-
- color: var(--_li-fc-visited);
- }
- }
-
  // MODIFIERS
  &__dropdown {
  &:after {
@@ -53,12 +56,20 @@ a,
  }
 
  &__visited { // TODO can we get rid of this? It's only in 3 places in Core and seems to me it doesn't even serve a purpose.
- --_li-fc: var(--theme-link-color-visited, var(--theme-secondary-500));
- --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
- --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
+ --_li-fc: var(--theme-link-color-visited, var(--purple-500));
+ --_li-fc-hover: var(--theme-link-color-hover, var(--purple-600));
+ --_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
+ --_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));
  }
 
  // VARIANTS
+ &__danger,
+ &__grayscale,
+ &__inherit,
+ &__muted {
+ --_li-fc-hover-visited: var(--_li-fc-hover);
+ }
+
  &__danger {
  --_li-fc: var(--red-400);
  --_li-fc-hover: var(--red-500);
@@ -94,7 +105,7 @@ a,
  // INTERACTION
  &:active,
  &:hover {
- color: var(--_li-fc-hover);
+ --_li-fc: var(--_li-fc-hover);
  }
 
  color: var(--_li-fc);
@@ -117,4 +128,8 @@ a,
  padding: 0;
  user-select: auto;
  }
+
+ p & {
+ text-decoration: underline;
+ }
 }
diff --git a/lib/components/link/link.visual.test.ts b/lib/components/link/link.visual.test.ts
@@ -28,4 +28,30 @@ describe("link", () => {
  <div data-testid="${testid}" class="p4 ws1">${component}</div>
  `,
  });
+
+ // Visual tests for link nested within a paragraph
+ runVisualTests({
+ baseClass: "s-link",
+ modifiers: {
+ primary: [
+ "grayscale",
+ "muted",
+ "danger",
+ "inherit",
+ "underlined",
+ "visited",
+ ],
+ secondary: ["dropdown"],
+ },
+ children: {
+ p: "s-link",
+ },
+ tag: "a",
+ attributes: {
+ href: "#",
+ },
+ template: ({ component, testid }) => html`
+ <p data-testid="${testid}" class="p4 ws1">${component}</p>
+ `,
+ });
 });