CSS 'outline' is missing when WebChat buttons, text fields and links receive focus [keyboard accessibility]

Hi,

• Relates to :~ #3655;

Screenshots

Version

• WebChat.js version :~ 4.10.1;
  • JS :~ https://cdn.botframework.com/botframework-webchat/4.10.1/webchat.js;
• All browsers, all browser-versions, all platforms;

Describe the bug

When I as a visual user navigate a WebChat-based Chat-bot using the keyboard, I can NOT tell which button or text-field has received focus, as the CSS outline has been set to 0 or none.

• Additional explanation on MozDev;

Steps to reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

I expect to see an outline (defaults to blue in some browsers) around the focussed element — button, text field, link, so I know where I am.

Potential fix

Do we want to give the option for the outline to be set to none, for backwards compatibility? I suggest, yes.

I propose a new property in defaultStyleOptions.js named for example, outlineOn, which should default to true. It would be used in the various components, for example:

• https://github.com/microsoft/BotFramework-WebChat/blob/v4.11.0/packages/component/src/Styles/StyleSet/SendBoxButton.js#L14;
• ...
• https://github.com/microsoft/BotFramework-WebChat/blob/v4.11.0/packages/component/src/Styles/StyleSet/SendBoxTextBox.js#L21;
• ...?

For example:

return {
    '&.webchat__icon-button': {
      backgroundColor: 'Transparent',
      border: 0,
      height: '100%',
      outline: outlineOn ? 'initial' : 'none', // <<-- Proposed fix!
      padding: 0,

Please feedback on this proposal.

Yours,

Nick

[Bug]

Start with packages/component/src/Styles/defaultStyleOptions.js and the cited StyleSet/SendBoxButton.js and StyleSet/SendBoxTextBox.js files, then reproduce keyboard focus in WebChat 4.10.1. Trace the styling for buttons, text fields, and links, and define done as making the focused element visibly identifiable while accounting for the proposed backwards-compatibility option.