[Accessibility][Supporting the Platform- Homepage]: Layout of few controls on Homepage is not properly visible after applying high contrast black/white theme.

[ShellySoni]

User Experience:
User with vision disability will not get to know what exactly the control is if it will not properly visible after applying high contrast white mode.

Test Environment:
Environment: Chromium Edge (Anaheim) + Narrator
Build Version: 2004 (OS Build 19564.1005)​​
Microsoft Edge Version: 82.0.425.0 (Official build) canary (64-bit)​
Test URL: http://localhost:3000/home

Repro Steps:

1. Open URL: http://localhost:3000/home
2. "Bot Framework Composer" homepage will gets opened.
3. Apply High contrast black/white theme through system settings and observe the issue on "New" button.
4. Now, "New" button and observe the issue on pane opened.

Actual Result:
Layout of few controls on Homepage is not properly visible after applying high contrast black/white theme.

Expected Result:
Layout of few controls on Homepage should be properly visible after applying high contrast black/white theme.

MAS Reference:
https://microsoft.sharepoint.com/:w:/r/teams/msenable/_layouts/15/WopiFrame.aspx?sourcedoc=%7B672c8a8b-ed4f-463f-868f-e8131caf9b74%7D

Attachment:
MAS4.3.1_Homepage.zip

[corinagum]

[liweitian]

Hi @DesignPolice, can you have a look on this? We probably need another color.

[DesignPolice]

oh my... yes you are correct.

I will try and give you some guidance on that by the end of my day... it is a very full one.

thanks M

[DesignPolice]

@cwhitten just to take verify.

[liweitian]

Hi @DesignPolice, is there anything updated? BTW we have changed the UI, we just need to take care of the two buttons showed in the first picture above.

[DesignPolice]

Hi @lei9444 I will work on that this morning :-)))))))

[DesignPolice]

Okay - I noticed in the new build that we have been able to remove the tiles for create new and just use a list! so that takes care of that issue.

I went ahead and did a pass of the New and Last Bot on the home page, based on the new Fluent Dark theme.
I'm not really sure how to do this, with two color tiles, but I sampled as much as I could from them, Hight Contrast is a tricky one, I don't know if I can use gray or not, some examples have a color or two that is really bright, but not sure how that works.

So here is a look at it, if it comes up again.

https://www.figma.com/file/Ux0vucOvaLL2xH22WpFgV65X/MarcB_Composer-UI?node-id=5584%3A0

Thanks
marc

[liweitian]

@DesignPolice hmm... I do not quite understand this new design. At least, the color 'blue' #0078d4 is the same as before. It cannot be seen in high contrast mode black/white theme. It seems you test it in new Fluent Dark theme? Or do you mean this issue is tricky, we cannot find a blue color to replace. If use gray, we should discuss with other UI designers?

[DesignPolice]

Hi @liweitian, sorry to cause confusion.

I have made designs for both buttons (New and Last Bot)

The first column is how they appear in Normal view mode, second column is High Contrast and third is Dark Theme. I will follow up with Fluent team on if we can use Gray, they use it in normal and dark, but not sure on HC - I will follow up today.

thanks
m

[ashish315]

As checked the issue is resolved so HCL is closing the issue.