[Accessibility][Keyboard - Create Node]: Keyboard focus is not visible on 'Create Node' button.

[ashish315]

User Experience:
Keyboard dependent users would face difficulty if keyboard focus does not visible on the control.

Test Environment
Browser: Microsoft Edge Canary Version: 82.0.425.0 (Official build)
OS build: 2004 (19564.1005)
Screen Reader: Narrator
URL: Bot Framework Composer
Prerequisite Here

Repro Steps:

1. Open the above mentioned URL in EDGE and set the zoom at 400%.
2. Select 'Design Flow' from left navigation.
3. Now, navigate to the flow chart.
4. Navigate to "+" button available in the flow chart and observe the issue.

Actual:
The keyboard focus is not visible at "+" button i.e. create node button.

Expected:
The focus should be clearly visible to each and every control available at the page.

MAS Guideline: MAS2.4.7

Attachment:
MAS2.4.7_Focus not visible on Add node button.zip

[corinagum]

@DesignPolice Do specs already have focus for this element? If not, this may need designer input before fix. :)
Feel free to unassign yourself if no input needed.

[DesignPolice]

Brought this one up in Stand Up this morning, it a relatively minimal change, but I think it brings up a bigger focus issue in the Visual Editor.

Adding @mareekuh @a-b-r-o-w-n (they were in the stand-up)

We have Focus on items in the Visual Editor as we "tab" through items the state is a blue outline. When the blue outline is on white we hit our 4.5:1 number - with the background of F6F6F6 - it knocks us down to 4.19:1 - not passing.

So my first thought was okay we can just use a darker blue, but then looking at some of the other nodes we have some inconsistent things going on.

So I need to get some clarity on what we want to do -

The Blue will need to be darker if we are going to use it - #0078D4 would need to be #004E8C

Black is fine for the other state...

for Focus on the "+" I would like it to be a circle like this, but probably should get some consensus on that

PVA does a mix of really heavy drop shadow and a border around the "+" not a huge fan, but that might be something that Lili thinks we should align. ( PVA Below )

Let the comments begin.

thanks,
Marc

[mareekuh]

Tab = black outline Selection = blue outline For the +, the outline should be around the circle, not a square.

…

________________________________ From: Marc Bostian <notifications@github.com> Sent: Thursday, February 27, 2020 12:53 PM To: microsoft/BotFramework-Composer <BotFramework-Composer@noreply.github.com> Cc: Marieke Iwema <mariekei@microsoft.com>; Mention <mention@noreply.github.com> Subject: Re: [microsoft/BotFramework-Composer] [Accessibility][Keyboard - Create Node]: Keyboard focus is not visible on 'Create Node' button. (#2061) Brought this one up in Stand Up this morning, it a relatively minimal change, but I think it brings up a bigger focus issue in the Visual Editor. Adding @mareekuh<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmareekuh&data=02%7C01%7Cmariekei%40microsoft.com%7Ced7f20ac9c8a4e1156ed08d7bbc72741%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637184336344854250&sdata=0d4IOu9vn8JADq9TQ73oxfftjg%2BqkSoP0j43VXIWgL8%3D&reserved=0> @a-b-r-o-w-n<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fa-b-r-o-w-n&data=02%7C01%7Cmariekei%40microsoft.com%7Ced7f20ac9c8a4e1156ed08d7bbc72741%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637184336344854250&sdata=QY%2BzQRnlQPj1ymc%2Fp%2B017J%2BqG5sSXR%2BLa9tVh3FADw8%3D&reserved=0> (they were in the stand-up) We have Focus on items in the Visual Editor as we "tab" through items the state is a blue outline. When the blue outline is on white we hit our 4.5:1 number - with the background of F6F6F6 - it knocks us down to 4.19:1 - not passing. So my first thought was okay we can just use a darker blue, but then looking at some of the other nodes we have some inconsistent things going on. [Screen Shot 2020-02-27 at 12 29 01 PM]<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F45223620%2F75484118-02adda00-595d-11ea-8455-4d830b9fc7a1.png&data=02%7C01%7Cmariekei%40microsoft.com%7Ced7f20ac9c8a4e1156ed08d7bbc72741%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637184336344864244&sdata=YuHqiJgTfuyIiTSqw%2FU6A7k9Z0TiBGdEGmi%2FJG6ILUc%3D&reserved=0> [Screen Shot 2020-02-27 at 12 28 55 PM]<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F45223620%2F75484123-03df0700-595d-11ea-996a-f117d883232a.png&data=02%7C01%7Cmariekei%40microsoft.com%7Ced7f20ac9c8a4e1156ed08d7bbc72741%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637184336344864244&sdata=SJvdH6DCqbsxYPraXkAR8%2Fy8OdgW05lXJf6FOp2t%2B%2B4%3D&reserved=0> So I need to get some clarity on what we want to do - The Blue will need to be darker if we are going to use it - #0078D4 would need to be #004E8C Black is fine for the other state... for Focus on the "+" I would like it to be a circle like this, but probably should get some consensus on that [Screen Shot 2020-02-27 at 12 37 29 PM]<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F45223620%2F75484641-055cff00-595e-11ea-934b-799f060bdf08.png&data=02%7C01%7Cmariekei%40microsoft.com%7Ced7f20ac9c8a4e1156ed08d7bbc72741%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637184336344874247&sdata=JPGrdUDK6lq4rdxFdLt9txmfCp5nT6rEmSbeA8lqPFQ%3D&reserved=0> [Screen Shot 2020-02-27 at 12 37 43 PM]<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F45223620%2F75484639-042bd200-595e-11ea-8078-e729afa0ba10.png&data=02%7C01%7Cmariekei%40microsoft.com%7Ced7f20ac9c8a4e1156ed08d7bbc72741%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637184336344874247&sdata=lenn41C5gRtQoHWaUv9BN6AEFZ1If42YfipIZWNwoqg%3D&reserved=0> PVA does a mix of really heavy drop shadow and a border around the "+" not a huge fan, but that might be something that Lili thinks we should align. ( PVA Below ) [Screen Shot 2020-02-27 at 12 51 36 PM]<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F45223620%2F75485769-2292cd00-5960-11ea-8a4d-4b38ea9ff255.png&data=02%7C01%7Cmariekei%40microsoft.com%7Ced7f20ac9c8a4e1156ed08d7bbc72741%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637184336344884239&sdata=ggJYwBBGopH4eC3%2FKcaTSNAHVFTAaIqXPZn2%2BLAlGU4%3D&reserved=0> Let the comments begin. thanks Marc — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmicrosoft%2FBotFramework-Composer%2Fissues%2F2061%3Femail_source%3Dnotifications%26email_token%3DALSBVCTGPDVYGLVYBQMIJRDRFAR6BA5CNFSM4KZ2V2HKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENF5FNI%23issuecomment-592171701&data=02%7C01%7Cmariekei%40microsoft.com%7Ced7f20ac9c8a4e1156ed08d7bbc72741%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637184336344884239&sdata=GZjcPCbkHl31lgvmgZ4zbEnBQtwpfAC9svNdaFo%2Bhxc%3D&reserved=0>, or unsubscribe<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FALSBVCXODROLJDD7JKN2MDLRFAR6BANCNFSM4KZ2V2HA&data=02%7C01%7Cmariekei%40microsoft.com%7Ced7f20ac9c8a4e1156ed08d7bbc72741%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637184336344894233&sdata=Qn4jm9fsEBRSFyg92BjA5VaNlDzaSHepqJJcclSfUE0%3D&reserved=0>.

[DesignPolice]

Okay that works. @corinagum do we need to alter the blue color to hit contrast? It does fall a little short on the #F6F6F6 background.

[corinagum]

I would say play it safe and pick the darker color, if that's alright with you guys.

[DesignPolice]

okay... then go with this. That would affect anything on the Visual Canvas then... so all of the nodes.

The Blue will need to be darker if we are going to use it - #0078D4 would need to be #004E8C

[yeze322]

@alanlong9278 let's solve it along with other 'tab navigation' issues

[ashish315]

As checked the issue is fixed now. So, HCL is closing the issue.