search

microsoft / BotFramework-WebChat

A highly-customizable web-based client for Azure Bot Services.
https://www.botframework.com/
MIT License
1.6k stars 1.55k forks source link

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

Open nfreear opened 3 years ago

nfreear commented 3 years ago

Hi,

Screenshots

Version

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.

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:

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]

gabog commented 3 years ago

Hi @compulim, can you review this issue?

compulim commented 3 years ago

You could deploy idiosyncratic styling for adding outline CSS property. I believe there will be multiple components need to have outline added.

You can look at the samples here, https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.branding-styling-and-customization/b.idiosyncratic-manual-styles.

Currently, our design team prefer to use a darker color for focus indicator, instead of border-like outlines.

corinagum commented 3 years ago

Changing this to feature request - this is by design, and has a workaround as linked above.

This is what Web Chat looks like right now for a focused button: image

Our design does not use outline styling.

nfreear commented 3 years ago

Hi @compulim and @corinagum,

Thanks for your responses ... I've gone back to double-check, with this minimal example — no outline, border, box-shadow or similar styling on focus (currently on v1.11.0 of WebChat):

You could deploy idiosyncratic styling for adding outline CSS property...

In our implementation I've used CSS box-shadow — however, I know the importance of a focus indicator to keyboard accessibility, and the average implementor may not ...

Currently, our design team prefer to use a darker color for focus indicator, instead of border-like outlines.

However, that styling isn't on by default. I'm concerned with sensible defaults so that when an average implementor plonks a WebChat-based Chat-bot on their site, they don't fall into an accessibility elephant hole.

If I were to do a pull request for the proposed fix above, are you likely to accept it please? That is where I'd like to gauge your interest/acceptance.

I hope this helps,

Nick

corinagum commented 3 years ago

Please provide repro steps for this issue, which the original issue template asks for. If you can't provide repro steps, then please attach screenshots.

I am unable to determine what you mean by 'no outline, border, box-shadow or similar styling on focus (currently on v1.11.0 of WebChat):' My screencap above shows you an instance of a button being highlighted on focus. This is default behavior. We still do not have an instance provided by you of no focus shown whatsoever.

We're always happy to review pull requests created by the community. Please follow the directions in our contributing guidelines and be sure to fill out all requested PR information when filing. Accessibility is extremely high priority for our team and we're committed to making the out-of-the-box experience as accessible as possible.

nfreear commented 3 years ago

Hi @corinagum,

Sorry, I meant version '4.11.0', and yes I appreciate a screenshot would help!

See the attached screenshot -- focus is on the "Upload" paperclip button, but as the outline has been removed, it is almost impossible to tell (the paperclip becomes slightly darker on focus -- easily missed if you don't concentrate hard, or have lower vision).

(In this example, outline is not removed on the adaptive-card buttons that appear if you type "Help", so that appears not to be an issue.)

Switching off the outline as WebChat does on the key Upload and Send buttons and the Chat input box, without providing a default replacement is bad practice.

Again, this is customizable via styling.

Which misses my point -- the developer needs to know that there is no focus indicator, and why this is important from an accessibility point of view. It makes it too easy to leave the accessibility problem.

I'm proposing that WebChat provides the styleOptions configuration so that the developer can consciously switch off the outline, and implement their own styling should they wish. But that something reasonable and accessible is used by default.

webchat-idiosyncratic--no-outline-bug_2

I hope this helps you understand the issue that I'm raising.

Yours,

Nick

nfreear commented 3 years ago

Hi @corinagum,

I acknowledge your frustration that I was slow to provide a screenshot and to clarify what I meant. In future, I'll add the "How to reproduce" steps and/or a screenshot at the outset!

Currently, our design team prefer to use a darker color for focus indicator, instead of border-like outlines.

Ah, I didn't fully understand what you meant until just now ... that is the "slightly darker on focus" that I refer to above, and which I argue is too subtle and an insufficient replacement for some sort of border-like outline.

Nick

corinagum commented 3 years ago

Thank you for providing the relevant information. I will bring this to our team's attention. However, we have yearly accessibility audits, and this has not been brought up as a deficiency. If we are violating MAS rules, then yes this would become a work item.

In the meantime, manual styling is still an option to our customers to add outline, highlight, etc, if an immediate solution is needed.

@Amit8527510735, could you take a look and let us know if this is an a11y violation?

To test:

  1. https://microsoft.github.io/BotFramework-WebChat/01.getting-started/a.full-bundle/
  2. Use keyboard to focus on the sendbox buttons (paperclip and/or paper airplane)
  3. Note that focus indicator is a darker gray than non-focus. There is no highlight or border indication for focus.

Thank you!

@compulim, I'll reassign to myself and handle tracking for this item.

nfreear commented 3 years ago

Hi @corinagum and @Amit8527510735,

@corinagum, thanks for your response.

I have not been able to find a publicly available copy of the Microsoft Accessibility Standard ("MAS") online to review.

I have gone back and reviewed the following related to WCAG 2.1:

My conclusion is that the default behavior is a fairly cut and dried case of failure F78.

Going back to my original report, note that I am only proposing a new option outlineOn or focusOutline or similar, to make it easier for implementors to maintain the default focus indicator, or to do there own thing (G165 and G195 above).

After we have concluded PR #3669, I am interested in doing a pull request for this bug. Would this be useful and possibly accepted?

Thanks,

Nick

"C15: Using CSS to change the presentation of a user interface component when it receives focus"

Amit8527510735 commented 3 years ago

As observed the upload and file buttons are getting darker when the keyboard focus moves on the controls, but as discussed with internal SME, the keyboard focus indicator(Dotted line/solid line border) should be visible on both controls.

corinagum commented 3 years ago

note to dev: Based focus indicator on fluent design

corinagum commented 3 years ago

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

nfreear commented 3 years ago

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