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]

[nfreear]

Hi @Amit8527510735,

Thank you for your response regarding the subject matter expert’s (SME’s) advise (I mis-read it a few days ago!)

@corinagum … If I can get PR #3669 sorted quickly, I’m happy to contribute a pull request for this.

Thanks again,

Nick

[corinagum]

I’m adding this to our front-burner to hopefully be addressed in our next milestone.