Ensure consistent link underline and color on hover

[s596757]

Made CSS changes in order to ensure all links are visually distinct:

All links are now underlined as standard expectation based on:
https://www.w3.org/TR/html401/struct/links.html
When you hover over a link, the link is both bold and underlined
Link that has been visited changes to a grey color
Tested visually
Based on feedback from UX engineer

Ticket based on issue #9399 Text issue number 2

Please provide additional feedback and notes on your definition of visually distinct

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[krassowski]

All links are now underlined as standard expectation based on: https://www.w3.org/TR/html401/struct/links.html

This is not what the document linked to says - it says for example underlined

When you hover over a link, the link is both bold and underlined

I do not agree with this design direction. All of the web uses underline on hover. Using bold on hover will lead to layout shifts. So this is -1 from me here.

Link that has been visited changes to a grey color

Changing colour to indicate visited links is probably fine, but I would request to add a semantic variable so that themes (and users) can override it easily.

[s596757]

All links are now underlined as standard expectation based on: https://www.w3.org/TR/html401/struct/links.html

This is not what the document linked to says - it says for example underlined

When you hover over a link, the link is both bold and underlined

I do not agree with this design direction. All of the web uses underline on hover. Using bold on hover will lead to layout shifts. So this is -1 from me here.

Link that has been visited changes to a grey color

Changing colour to indicate visited links is probably fine, but I would request to add a semantic variable so that themes (and users) can override it easily.

• I have done as suggested: I have created 2 semantic variables to make different stages of links different. I have applied these variables to the links as can be seen. Please review and provide feedback on whether you agree with changes or suggest something else

[krassowski]

My previous opinion that we should not switch to underline/bold still stands. However, I do think that maybe it could be opt-in via a setting (which would involve creating a dedicated accessibility package).

[krassowski]

@s596757 the lint job is failing can you run jlpm run prettier?

[s596757]

jlpm run prettier

@krassowski I have run it :)

[krassowski]

@s596757 did you commit and push changes? The lint check is still failing with:

Checking formatting...
[warn] packages/rendermime/style/base.css
[warn] packages/theme-dark-extension/style/variables.css
[warn] Code style issues found in 2 files. Run Prettier to fix.
+ echo 'Please run `jlpm run prettier` locally and push changes'
Please run `jlpm run prettier` locally and push changes

[krassowski]

@s596757 I addressed the lint failure for you, can you add before/after screenshots in both light and dark mode to the top-level comment, please?

[krassowski]

Closing in favour of #15181.