fix: #438 External URL icon has strange underline

[Tishasoumya-02]

[stevepiercy]

Looks much better. Thank you!

[stevepiercy]

@Tishasoumya-02 would you please add a news item? Thank you!

[stevepiercy]

Although unrelated to this PR, there is a failing build now when it was not failing before at https://github.com/kitconcept/volto-light-theme/actions/runs/12153651828/job/33901673414#step:8:324. I have no idea how to fix that. I compared a successful build to a failed one, and see that failed builds mention this:

> @plone/[email protected] build /home/runner/work/volto-light-theme/volto-light-theme/core/packages/components
> tsup && pnpm build:css

CLI Building entry: src/index.ts
CLI Using tsconfig: tsconfig.json
CLI tsup v8.3.5
CLI Using tsup config: /home/runner/work/volto-light-theme/volto-light-theme/core/packages/components/tsup.config.ts
CLI Target: es2022
CLI Cleaning output folder
CJS Build start
ESM Build start
CJS dist/index.cjs 162.26 KB
CJS ⚡️ Build success in 149ms
ESM dist/index.js 133.94 KB
ESM ⚡️ Build success in 156ms
DTS Build start
Error: src/components/Checkbox/Checkbox.tsx(15,9): error TS2322: Type '{ children: (string | number | boolean | Element | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ((values: CheckboxRenderProps & { ...; }) => ReactNode) | null | undefined)[]; }' is not assignable to type '{ children?: ReactNode; }'.

My guess is that it is related to this change in Volto from last month, as the timing of the failure and change are pretty close. @sneridagh can you enlighten us?

[danalvrz]

@Tishasoumya-02 thanks for looking into this! It looks so much better already. Since you are working on it, could it be possible to implement the icon in a way that it can also be customized using the --link-foreground-color prop? Right now, if I want the links to behotpink the icon remains blue as specified in the data URL:

/cc @iRohitSingh @sneridagh

[Tishasoumya-02]

@Tishasoumya-02 thanks for looking into this! It looks so much better already. Since you are working on it, could it be possible to implement the icon in a way that it can also be customized using the --link-foreground-color prop? Right now, if I want the links to behotpink the icon remains blue as specified in the data URL:

/cc @iRohitSingh @sneridagh

Okay will look into it.

[Tishasoumya-02]

@danalvrz , I made the changes, but I was not able to use the --link-foreground-color prop as that's a dynamic var and was not able to interpolate with the url , instead I used a static var $icon: (some color) ,and inserted in the url. Will this be okay? If you any suggestions, please let me know.

[stevepiercy]

Aside from how to set the color, please consider accessibility with whatever colors you choose for links. Contrast is extremely important. Here's a decent guide for link color accessibility https://webaim.org/blog/wcag-2-0-and-link-colors/.

hotpink #ff69b4 on white #ffffff is too low contrast.

https://webaim.org/resources/contrastchecker/

I also think there is some guidance about having links with different colors, except of course their active, focus, hover, visited states.

I think that having two different colors for internal and external links is unusual and may cause some accessibility issues. Unless WCAG says it is definitely OK, I would avoid it.

[danalvrz]

Aside from how to set the color, please consider accessibility with whatever colors you choose for links. Contrast is extremely important. Here's a decent guide for link color accessibility https://webaim.org/blog/wcag-2-0-and-link-colors/.

hotpink #ff69b4 on white #ffffff is too low contrast.

https://webaim.org/resources/contrastchecker/

I also think there is some guidance about having links with different colors, except of course their active, focus, hover, visited states.

I think that having two different colors for internal and external links is unusual and may cause some accessibility issues. Unless WCAG says it is definitely OK, I would avoid it.

@stevepiercy yes, color contrast is very important and having a user-friendly contrast checking feature is on the list of things to work on next. Specially with the new color system. The idea is not be to have different colors for external vs internal links, but to be able to change all links to a specific color using the prop --link-color. It is particularly useful if, for example, you are building a site with a dark theme and need a more contrasting color for your links than the default blue.

[danalvrz]

@Tishasoumya-02 we should maybe update the news entry to mention the current implementation for the icon. Thanks for looking into it!