[Bug]: Difficult to determine if text is a link or not in High Contrast Mode (hcm)

[TGiles]

Describe the bug

When in High Contrast Mode on Windows 10 or 11, it is difficult to determine if certain text is an interactive link or not. For example, hovering over the settings cog will change the cursor to a pointer and change the background color, while focusing the settings cog will display an outline around the button.

When hovering or keyboard navigating through the docs, components, and stories in the sidebar, the only indication that these items are interactive is the cursor to pointer change.

Reproduction link

https://github.com/TGiles/storybook-test

Reproduction steps

1. Given a newly created Storybook instance and a machine running Windows 10 or Windows 11
2. Enable High Contrast Mode
3. Navigate through the sidebar (either hovering or keyboard navigation)

Expected result:

• Links have an indicator, other than the cursor turning into a pointer, that distinguishes the text as a link.

Actual result:

• Links only have the cursor to pointer change, making it difficult to determine if the item is a button or a link that can be interacted with.

System

Storybook Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (24) x64 AMD Ryzen 9 9900X 12-Core Processor
  Binaries:
    Node: 22.13.0 - C:\nvm4w\nodejs\node.EXE
    Yarn: 1.22.22 - C:\nvm4w\nodejs\yarn.CMD
    npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD <----- active
  Browsers:
    Chrome: 131.0.6778.206
    Edge: Chromium (127.0.2651.98)
  npmPackages:
    @storybook/addon-essentials: ^8.5.0-beta.8 => 8.5.0-beta.8
    @storybook/blocks: ^8.5.0-beta.8 => 8.5.0-beta.8
    @storybook/test: ^8.5.0-beta.8 => 8.5.0-beta.8
    @storybook/web-components: ^8.5.0-beta.8 => 8.5.0-beta.8
    @storybook/web-components-vite: ^8.5.0-beta.8 => 8.5.0-beta.8
    chromatic: ^11.22.1 => 11.22.1
    storybook: ^8.5.0-beta.8 => 8.5.0-beta.8

Additional context

Having the cursor: pointer is helpful, but having some form of underline on links is extremely beneficial in HCM. There are a few ways to handle this:

• Make underlines appear on hover and focus. This strategy is what Wikipedia uses for their links.

• Always show underlines but make them disappear on hover and focus. MDN uses this for links in the main content of articles.

• Always show underlines regardless of hover and focus. This is the default user agent styling in Firefox, seen in this demo on MDN