Accessibility Issue | AI Chatbot Form Fields

Ask the Community General Questions
1

Howdy,

I could be wrong, but it appears Team Elfsight (i.e., developers) changed the background color of the AI Chatbot form fields. See below screenshot.

Currently, they are light gray. Due to several reasons (including accessibility), they should be white.

Kindly review and provide a fix (i.e., revert back to original, white color).

Thank you,

Petar

screenshot-elfsight-ai-chatbot-form-fields-background--color
screenshot-elfsight-ai-chatbot-form-fields-background--color600Ă—851 87.4 KB

1 Like
3

Hi there, @Petar_Dietrich :waving_hand:

Thank you so much for bringing this to our attention!

You’re right, previously the form fields were right and this issue occurred after a recent update. I’ve forwarded it to the devs and will update you once it’s fixed :slightly_smiling_face:

As a temporary solution, you can use this CSS code:

.es-fields-short-text {
  background-color: white!important;
}
.es-choice-option-choice-control {
  background-color: ...;
}
1 Like
4

Thank you, @Max. Looking forward to the fix. Standing by. :slight_smile:

2 Likes
5

Hey @Max,

Upon testing your CSS rules, it appears the CSS rule you provided (see below), will not solve the issue I initially reported.

.es-choice-option-choice-control {
  background-color: ...;
}

Reason: When I use white (#fff) as the background color and check the box, the consent box changes to gray and the checkmark is not visible. Can you please take a look at your code once again? See below.

Tip: The consent box background color should be white and the checkmark color should match the user’s theme/site font color (in my case Gray) or theme/site baseline color (in my case Blue).

Thank you!

screenshot-ai-chatbot-consent-box-white-background
screenshot-ai-chatbot-consent-box-white-background594Ă—731 67 KB

screenshot-ai-chatbot-consent-box-gray-background-checked
screenshot-ai-chatbot-consent-box-gray-background-checked602Ă—744 82 KB

1 Like
6

Hi @Petar_Dietrich :waving_hand:

Please try to add white for the background color of the checkbox:

.es-choice-option-choice-control {
  background-color: white;
}

I’ve just tested it and everything worked fine:

image
image371Ă—447 17.6 KB
image
image376Ă—341 12 KB


Could you please double-check it?

1 Like
7

Hey @Max,

Go it, thanks! I was using “background-color: white!important;”.

I need more coffee! :hot_beverage:

Enjoy your day. :sun:

2 Likes
8

No problem at all!

Have a great day :wink:

1 Like
9

Hi @Max! Has this been fixed? (via core update)

1 Like
10

Hi there, @Petar_Dietrich :waving_hand:

Unfortunately, this issue hasn’t been fixed on the widget level. Our devs are trying to come up with the best solution for this case. As soon as we have more news, we’ll update you here :slightly_smiling_face:

1 Like