BotFramework-WebChat [Supporting the platform-AskHR Virtual Assistant]: In High Contrast Black mode, emojis are not clearly visible in the 'Feedback' section present in the page.

PWD Impact:

Color sensitive users who rely on high contrast modes (Black) are getting impacted as emojis are not clearly visible in the 'Feedback' section present in the page.

Test Environment:

OS: Windows 10 version 21H1 (OS Build 19043.1110)
Browser: New Edge Version 92.0.902.62 (Official build) (64-bit)
URL: AskHR Virtual Assistant (azureedge.net)

Prerequisite:

Go to Ease of Accessibility settings-> Navigate to 'Turn high contrast On or off' in system settings -> Toggle On the 'Turn on high contrast' button -> Choose High Contrast Black/White themes.(Edge Browser).

Repro Steps:

Step 1: Open the above URL in the Edge Browser using valid credentials. Step 2: 'AskHR Virtual Assistant' Home page gets opened. Step 3: Navigation: Select Benefits--> Laya-->Select Yes. Now observe emojis present in the Feedback section in High Contrast Black modes. Step 4 : Verify whether while navigating in High Contrast Black mode, emojis are clearly visible in the 'Feedback' section or not.

Actual Result:

While navigating in High Contrast Black mode, emojis are not clearly visible in the 'Feedback' section present in the page.

Expected Result:

While navigating in High Contrast Black mode, emojis should clearly visible in the 'Feedback' section present in the page.

MAS Reference link:

MAS 4.3.1 – No Disruption of Accessibility Features

Jun 28 '22 13:06 KattaBhargav

#A11yMAS;#A11ySev2;#HCL;#WCAG4.3.1;#Accessibility;#Win10-Edge(Chromium);#BotFrameworkWebChat-Aug21;#Linked:Bug8005236;#LinkedBug;

Jun 28 '22 13:06 KattaBhargav

Bug copied from Azurebot team Bug id:-BUG 8005236

Jun 28 '22 13:06 KattaBhargav

@compulim - Could you please share any updates to this issue? Thanks!

Jul 13 '22 17:07 msomanathan

@compulim are there any updates on this issues?

Jul 18 '22 18:07 axelsrz

The AC card that have the emoji looks like the following. Note these are not emojis provided by the OS/platform.

Looking into the AC JSON that generate the emoji. The emoji is actually a SVG embedded into the card via Data URLs. Decoded and copied below.

<svg width="53" height="64" viewBox="0 0 53 64" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M26 4C27.6523 4 29.2461 4.2168 30.7812 4.65039C32.3164 5.07227 33.752 5.67578 35.0879 6.46094C36.4238 7.23438 37.6367 8.17187 38.7266 9.27344C39.8281 10.3633 40.7656 11.5762 41.5391 12.9121C42.3242 14.248 42.9277 15.6836 43.3496 17.2188C43.7832 18.7539 44 20.3477 44 22C44 23.6523 43.7832 25.2461 43.3496 26.7812C42.9277 28.3164 42.3242 29.752 41.5391 31.0879C40.7656 32.4238 39.8281 33.6426 38.7266 34.7441C37.6367 35.834 36.4238 36.7715 35.0879 37.5566C33.752 38.3301 32.3164 38.9336 30.7812 39.3672C29.2461 39.7891 27.6523 40 26 40C24.3477 40 22.7539 39.7891 21.2188 39.3672C19.6836 38.9336 18.248 38.3301 16.9121 37.5566C15.5762 36.7715 14.3574 35.834 13.2559 34.7441C12.166 33.6426 11.2285 32.4238 10.4434 31.0879C9.66992 29.752 9.06641 28.3223 8.63281 26.7988C8.21094 25.2637 8 23.6641 8 22C8 20.3477 8.21094 18.7539 8.63281 17.2188C9.06641 15.6836 9.66992 14.248 10.4434 12.9121C11.2285 11.5762 12.166 10.3633 13.2559 9.27344C14.3574 8.17187 15.5762 7.23438 16.9121 6.46094C18.248 5.67578 19.6777 5.07227 21.2012 4.65039C22.7363 4.2168 24.3359 4 26 4ZM26 37.75C27.4414 37.75 28.8301 37.5625 30.166 37.1875C31.5137 36.8125 32.7676 36.2852 33.9277 35.6055C35.0996 34.9141 36.166 34.0879 37.127 33.127C38.0879 32.166 38.9082 31.1055 39.5879 29.9453C40.2793 28.7734 40.8125 27.5195 41.1875 26.1836C41.5625 24.8359 41.75 23.4414 41.75 22C41.75 20.5586 41.5625 19.1699 41.1875 17.834C40.8125 16.4863 40.2793 15.2324 39.5879 14.0723C38.9082 12.9004 38.0879 11.834 37.127 10.873C36.166 9.91211 35.0996 9.0918 33.9277 8.41211C32.7676 7.7207 31.5137 7.1875 30.166 6.8125C28.8301 6.4375 27.4414 6.25 26 6.25C24.5586 6.25 23.1641 6.4375 21.8164 6.8125C20.4805 7.1875 19.2266 7.7207 18.0547 8.41211C16.8945 9.0918 15.834 9.91211 14.873 10.873C13.9121 11.834 13.0859 12.9004 12.3945 14.0723C11.7148 15.2324 11.1875 16.4863 10.8125 17.834C10.4375 19.1699 10.25 20.5586 10.25 22C10.25 23.4414 10.4375 24.8359 10.8125 26.1836C11.1875 27.5195 11.7148 28.7734 12.3945 29.9453C13.0859 31.1055 13.9121 32.166 14.873 33.127C15.834 34.0879 16.8945 34.9141 18.0547 35.6055C19.2266 36.2852 20.4805 36.8125 21.8164 37.1875C23.1641 37.5625 24.5586 37.75 26 37.75ZM19.25 13C19.5664 13 19.8594 13.0586 20.1289 13.1758C20.3984 13.293 20.6328 13.457 20.832 13.668C21.043 13.8672 21.207 14.1016 21.3242 14.3711C21.4414 14.6406 21.5 14.9336 21.5 15.25H17C17 14.9336 17.0586 14.6406 17.1758 14.3711C17.293 14.1016 17.4512 13.8672 17.6504 13.668C17.8613 13.457 18.1016 13.293 18.3711 13.1758C18.6406 13.0586 18.9336 13 19.25 13ZM32.75 13C33.0664 13 33.3594 13.0586 33.6289 13.1758C33.8984 13.293 34.1328 13.457 34.332 13.668C34.543 13.8672 34.707 14.1016 34.8242 14.3711C34.9414 14.6406 35 14.9336 35 15.25H30.5C30.5 14.9336 30.5586 14.6406 30.6758 14.3711C30.793 14.1016 30.9512 13.8672 31.1504 13.668C31.3613 13.457 31.6016 13.293 31.8711 13.1758C32.1406 13.0586 32.4336 13 32.75 13ZM33.875 17.5C34.3438 17.5 34.7832 17.5879 35.1934 17.7637C35.6035 17.9395 35.9609 18.1797 36.2656 18.4844C36.5703 18.7891 36.8105 19.1465 36.9863 19.5566C37.1621 19.9668 37.25 20.4062 37.25 20.875V22C37.25 23.5586 36.957 25.0234 36.3711 26.3945C35.7852 27.7539 34.9824 28.9434 33.9629 29.9629C32.9434 30.9824 31.748 31.7852 30.377 32.3711C29.0176 32.957 27.5586 33.25 26 33.25C24.4414 33.25 22.9766 32.957 21.6055 32.3711C20.2461 31.7852 19.0566 30.9824 18.0371 29.9629C17.0176 28.9434 16.2148 27.7539 15.6289 26.3945C15.043 25.0234 14.75 23.5586 14.75 22C14.75 21.4375 14.7969 20.8867 14.8906 20.3477C14.9844 19.8086 15.1543 19.3281 15.4004 18.9062C15.6465 18.4844 15.9863 18.1445 16.4199 17.8867C16.8652 17.6289 17.4336 17.5 18.125 17.5C18.9922 17.5 19.748 17.6172 20.3926 17.8516C21.0371 18.0859 21.6465 18.3438 22.2207 18.625C22.8066 18.9062 23.3926 19.1641 23.9785 19.3984C24.5762 19.6328 25.25 19.75 26 19.75C26.75 19.75 27.418 19.6328 28.0039 19.3984C28.6016 19.1641 29.1875 18.9062 29.7617 18.625C30.3477 18.3438 30.9629 18.0859 31.6074 17.8516C32.252 17.6172 33.0078 17.5 33.875 17.5ZM35 20.875C35 20.5703 34.8887 20.3066 34.666 20.084C34.4434 19.8613 34.1797 19.75 33.875 19.75C33.3711 19.75 32.9082 19.8086 32.4863 19.9258C32.0645 20.0312 31.6543 20.166 31.2559 20.3301C30.8691 20.4941 30.4824 20.6758 30.0957 20.875C29.7207 21.0742 29.3223 21.2559 28.9004 21.4199C28.4902 21.584 28.0449 21.7246 27.5645 21.8418C27.0957 21.9473 26.5742 22 26 22C25.4258 22 24.8984 21.9473 24.418 21.8418C23.9492 21.7246 23.5039 21.584 23.082 21.4199C22.6719 21.2559 22.2734 21.0742 21.8867 20.875C21.5117 20.6758 21.125 20.4941 20.7266 20.3301C20.3398 20.166 19.9355 20.0312 19.5137 19.9258C19.0918 19.8086 18.6289 19.75 18.125 19.75C17.8203 19.75 17.5566 19.8613 17.334 20.084C17.1113 20.3066 17 20.5703 17 20.875V22C17 23.2422 17.2344 24.4082 17.7031 25.498C18.1836 26.5879 18.8281 27.543 19.6367 28.3633C20.457 29.1719 21.4121 29.8164 22.502 30.2969C23.5918 30.7656 24.7578 31 26 31C27.2422 31 28.4082 30.7656 29.498 30.2969C30.5879 29.8164 31.5371 29.1719 32.3457 28.3633C33.166 27.543 33.8105 26.5879 34.2793 25.498C34.7598 24.4082 35 23.2422 35 22V20.875Z"
    fill="#002050"
  />
  <path
    d="M7.795 56H3.34188V47.5977H7.6075V48.4883H4.32625V51.2832H7.36141V52.168H4.32625V55.1094H7.795V56ZM13.9061 50L11.8905 53.0352L13.8709 56H12.7518L11.5741 54.0547C11.4998 53.9336 11.412 53.7812 11.3104 53.5977H11.287C11.2674 53.6328 11.1756 53.7852 11.0116 54.0547L9.81039 56H8.70297L10.7479 53.0586L8.79086 50H9.91L11.0702 52.0508C11.1561 52.2031 11.2401 52.3594 11.3221 52.5195H11.3455L12.8455 50H13.9061ZM19.3609 55.7246C18.9 56.002 18.3531 56.1406 17.7203 56.1406C16.8648 56.1406 16.1734 55.8633 15.6461 55.3086C15.1227 54.75 14.8609 54.0273 14.8609 53.1406C14.8609 52.1523 15.1441 51.3594 15.7105 50.7617C16.277 50.1602 17.0328 49.8594 17.9781 49.8594C18.5055 49.8594 18.9703 49.957 19.3727 50.1523V51.1367C18.9273 50.8242 18.4508 50.668 17.943 50.668C17.3297 50.668 16.8258 50.8887 16.4312 51.3301C16.0406 51.7676 15.8453 52.3438 15.8453 53.0586C15.8453 53.7617 16.0289 54.3164 16.3961 54.7227C16.7672 55.1289 17.2633 55.332 17.8844 55.332C18.4078 55.332 18.9 55.1582 19.3609 54.8105V55.7246ZM25.8763 53.2402H21.64C21.6556 53.9082 21.8353 54.4238 22.1791 54.7871C22.5228 55.1504 22.9955 55.332 23.597 55.332C24.2728 55.332 24.8939 55.1094 25.4603 54.6641V55.5664C24.933 55.9492 24.2357 56.1406 23.3685 56.1406C22.5209 56.1406 21.8548 55.8691 21.3705 55.3262C20.8861 54.7793 20.6439 54.0117 20.6439 53.0234C20.6439 52.0898 20.9076 51.3301 21.4349 50.7441C21.9662 50.1543 22.6244 49.8594 23.4095 49.8594C24.1947 49.8594 24.8021 50.1133 25.2318 50.6211C25.6615 51.1289 25.8763 51.834 25.8763 52.7363V53.2402ZM24.892 52.4258C24.888 51.8711 24.7533 51.4395 24.4877 51.1309C24.2259 50.8223 23.8607 50.668 23.392 50.668C22.9388 50.668 22.5541 50.8301 22.2377 51.1543C21.9212 51.4785 21.7259 51.9023 21.6517 52.4258H24.892ZM28.5362 56H27.5753V47.1172H28.5362V56ZM31.6825 56H30.7216V47.1172H31.6825V56ZM38.6901 53.2402H34.4537C34.4694 53.9082 34.6491 54.4238 34.9928 54.7871C35.3366 55.1504 35.8092 55.332 36.4108 55.332C37.0866 55.332 37.7077 55.1094 38.2741 54.6641V55.5664C37.7467 55.9492 37.0495 56.1406 36.1823 56.1406C35.3346 56.1406 34.6686 55.8691 34.1842 55.3262C33.6998 54.7793 33.4577 54.0117 33.4577 53.0234C33.4577 52.0898 33.7213 51.3301 34.2487 50.7441C34.7799 50.1543 35.4381 49.8594 36.2233 49.8594C37.0084 49.8594 37.6159 50.1133 38.0455 50.6211C38.4752 51.1289 38.6901 51.834 38.6901 52.7363V53.2402ZM37.7057 52.4258C37.7018 51.8711 37.567 51.4395 37.3014 51.1309C37.0397 50.8223 36.6745 50.668 36.2057 50.668C35.7526 50.668 35.3678 50.8301 35.0514 51.1543C34.735 51.4785 34.5397 51.9023 34.4655 52.4258H37.7057ZM45.3695 56H44.4086V52.5781C44.4086 51.3047 43.9437 50.668 43.0141 50.668C42.5336 50.668 42.1352 50.8496 41.8187 51.2129C41.5062 51.5723 41.35 52.0273 41.35 52.5781V56H40.3891V50H41.35V50.9961H41.3734C41.8266 50.2383 42.4828 49.8594 43.3422 49.8594C43.9984 49.8594 44.5004 50.0723 44.848 50.498C45.1957 50.9199 45.3695 51.5312 45.3695 52.332V56ZM50.2091 55.9414C49.9826 56.0664 49.6837 56.1289 49.3127 56.1289C48.2619 56.1289 47.7365 55.543 47.7365 54.3711V50.8203H46.7052V50H47.7365V48.5352L48.6974 48.2246V50H50.2091V50.8203H48.6974V54.2012C48.6974 54.6035 48.7658 54.8906 48.9025 55.0625C49.0392 55.2344 49.2658 55.3203 49.5822 55.3203C49.8244 55.3203 50.0334 55.2539 50.2091 55.1211V55.9414Z"
    fill="#1F2126"
  />
</svg>

The SVG has the fill set to a value (dark bluish gray or #002050/#1F2126) that doesn't work on high contrast mode.

Please consult with Adaptive Cards team on image support under high contrast mode.

Jul 20 '22 19:07 compulim

Closing as this is for Adaptive Cards than Web Chat.

Sep 13 '22 21:09 compulim