Skip to content

Restore nav link underlines in Forced Colors mode - #464

Merged
chris-lawton merged 1 commit into
migration-2026from
fix/nav-forced-colors-underline
Sep 28, 2026
Merged

chris-lawton merged 1 commit into
migration-2026from
fix/nav-forced-colors-underline

Conversation

@chris-lawton

@chris-lawton chris-lawton commented Sep 28, 2026 •

Copy link
Copy Markdown
Member

In Forced Colors mode, the top-level nav links and the dropdown links weren't underlined.

  • Top-level links: a text-decoration: none placed after the high-contrast-text-decoration mixin was overriding its underline.
  • Dropdown row and card links: these never included the mixin.

The fix gives the mixin an optional $remove-underline: true argument. With it, the mixin removes the default underline before adding the forced-colors one, so the order is always right and stylelint still passes.

To test: turn on Forced Colors mode and check that the top-level nav and dropdown links are underlined. Outside Forced Colors mode, they should look the same as before.

Link to Ticket

Description of Changes Made

How to Test

Screenshots

Expand to see more Screenshot 2026-09-28 at 16 10 53 Screenshot 2026-09-28 at 16 10 57 Screenshot 2026-09-28 at 16 11 03

MR Checklist

  • Add a description of your pull request and instructions for the reviewer to verify your work.
  • If your pull request is for a specific ticket, link to it in the description.
  • Stay on point and keep it small so the merge request can be easily reviewed.
  • Tests and linting passes.

Unit tests

  • Added
  • Not required

Documentation

Browser testing

  • I have tested in the following browsers and environments (edit the list as required)
    • Latest version of Chrome on mac
    • Latest version of Firefox on mac
    • Latest version of Safari on mac
    • Safari on last two versions of iOS
    • Chrome on last two versions of Android
  • Not required

Data protection

  • Not relevant
  • This adds new sources of PII and documents it and modifies Birdbath processors accordingly

Light and dark mode

  • I have tested the changes in both light and dark mode
  • The change is not relevant to dark and light mode

Accessibility

  • Automated WCAG 2.1 tests pass
  • HTML validation passes
  • Manual WCAG 2.1 tests completed
  • I have tested in a screen reader
  • I have tested in high-contrast mode
  • Any animations removed for prefers-reduced-motion
  • Not required

Sustainability

  • Images are optimised and lazy-loading used where appropriate
  • SVGs have been optimised
  • Performance and transfer of data considered
  • If JavaScript is needed alternatives have been considered
  • Not required

Pattern library

  • The pattern library component for this template displays correctly, and does not break parent templates
  • The styleguide is updated if relevant
  • Changes are not relevant the pattern library

The top-level nav links lost their forced colors underline because a
later text-decoration: none overrode the mixin. The dropdown row and
card links never had it. Add a $remove-underline option to
high-contrast-text-decoration so the reset always comes first.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

@jhancock532 jhancock532 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested locally, LGTM!

@chris-lawton
chris-lawton merged commit 673cb85 into migration-2026 Sep 28, 2026
8 checks passed
@chris-lawton
chris-lawton deleted the fix/nav-forced-colors-underline branch September 28, 2026 16:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants