Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Markdown external link icon styling issue within Live chat Widget #566

Open
yelz03 opened this issue Dec 19, 2024 · 0 comments
Open

Markdown external link icon styling issue within Live chat Widget #566

yelz03 opened this issue Dec 19, 2024 · 0 comments
Labels
a11y bug Something isn't working

Comments

@yelz03
Copy link

yelz03 commented Dec 19, 2024

Describe the bug
The !important tag applied to the CSS for the markdown external link icon causes the icon to appear white, blending into the white background. This makes the icon invisible. Removing the !important tag or the overriding CSS resolves the issue by restoring the expected behavior.

To Reproduce

  • Navigate to: reach out @yelz03 for a link
  • Click the "Click to Chat" button to launch the chat interface.
  • Type "careplan enquiry" and wait for the Virtual Assistant (VA) response with quick reply options.
  • Select the option "What payment methods do you have available?" and then click "Online" in the next prompt.
  • The VA response will include a link labeled "click here." Next to the link, observe the markdown icon, which is white and blends into the background.
  • Inspect the CSS using browser developer tools to confirm the issue.

Observed Behavior
The white markdown icon is barely visible against the white background due to CSS overriding the default styling with the !important tag.

Expected Behavior
Disabling the overriding CSS allows the default markdown icon styling to display correctly. This ensures the icon is visible against the background.

Screenshots
Issue: White icon blending with the background
Image

CSS inspection showing the overriding styles
Image

Expected behavior
Disabling the CSS that is overriding the default markdown icon, shows the expected behaviour:

Image

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Chrome
  • Version: 131.0

Additional Information
This issue affects all browsers. Please let me know if further details are required.

Kind regards,

Yele Alade

@yelz03 yelz03 added a11y bug Something isn't working labels Dec 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant