Suggested actions navigation arrows should indicate focus visually

[ljubomirsinadinovski]

After clicking on the horizontal navigation arrow in the quick answer area, if you don't click anything else and move the cursor away we get this behavior:

1. The CLICKED arrow doesn't disappear (still visible)
2. The other arrow disappears (becomes invisible)

For better understanding I am including this screenshot:

And forgot to add that the change in styleSet doesn't affect these arrows

ANOTHER BUG:
Another bug (that is included in version: "botframework-webchat": "^4.2.1-master.0dffd85",) is that the actions have quotes around them (you can notice them on the picture above) , while I am receiving them without quotes from directLine (checked in the json that I received).

BTW: I know that 4.2.1 is not official yet, but 4.2.0 is too broken for my implementation, sry.

[corinagum]

Confirmed repro of this bug on MockBot:

Related to your second comment, we already have #1586 open for tracking this issue.

Your last bug has been resolved and can be utilized in the latest bits. #1602 Otherwise the fix will be released with 4.3

Note to fixer:

This bug should be fixed at the same time as #1586

[compulim]

If the button is focused, it won't slide away, for accessibility reason. That's why the button is still there.

Maybe we use a non-keyboard gesture to click on it, we should blur the focus. Need to investigate a good and reliable solution to differentiate between keyboard focus and mouse click focus.

[corinagum]

Provide better focus indication on this element

[DesignPolice]

@compulim @corinagum @tdurnford

Hello, @tdurnford tagged me on this, I'm not clear from this thread if we have figured out a fix for this or not? @compulim last comment seems to imply we need to research a better solution for Accessibility or do I just need some heavier focus lines to make it more obvious?? @corinagum looks like you "tapped" out on this one?

[corinagum]

Yeah, @tdurnford is taking over this one. Right now there is no focus indication on the flippers, so he tagged you I guess to get your input. We discussed the possibility of adding distinction between a keyboard and mouse event, but @cwhitten is satisfied with us having focus indication to improve the UX. This will sufficiently indicate why the button doesn't immediately disappear.

[DesignPolice]

Thanks @corinagum - @compulim do we have any Focus traits in WebChat currently? My MockBot isn't working to verify.

[corinagum]

You can look at our sample bots to hunt around for focus indicators. Click the 'Try out MockBot' link on the sample.

[corinagum]

the design specs above do not factor in the shape of the focus indicator, which is a circle.

[tdurnford]

Bumping the react-film dependency to the next version and adding the flipperBlurFocusOnClick to the suggested actions and attachment carousel film strip should resolve this issue.

[corinagum]

react-film has been updated, now we need release and bump.