[Bug] Appearance of the check in a checked box

[daniellecorke]

Background/Issue

A user reported this issue via the Slack channel.

Something minor which I noticed: the check inside a checked checkbox seems to display oddly in Safari on the Mac (there's a gap between the joining lines). It appears differently at different zoom levels. Seems to be using an ::after pseudo-element with bottom and right borders, rotated, to form a tick. Haven't tested in Chrome, Firefox or Edge.

The user was accessing the Accordian component (open) example.

Example

Screen.Recording.2024-02-22.at.10.39.11.mov

Tasks

• Try to replicate the issue using Safari
• Try to replicate the issue using Chrome, Firefox and Edge
• Identify the cause of the issue and a potential fix
• If possible, implement the fix
• PM to update the user(s)

Acceptance Criteria

• If possible, a fix is applied to resolve the issue for all applicable web browsers
• PM has updated the user(s)

[JNATION85]

If you remove the border-radius on the pseudo element it will fix the issue. The visual aspect doesn't get compromised either so happy to implement this