search

microsoft / BotFramework-WebChat

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

Extra tab key stroke is encountered when focus is on "Top question for my role" button. #4937

Closed Kirank915 closed 8 months ago

Kirank915 commented 10 months ago

Is it an issue related to Adaptive Cards?

No.

What is the PWD impact?

Keyboard users will be impacted if the keyboard focus order is not logical after sending/ selecting the 'top questions for my role ' control. Keyboard users cannot understand where the focus is and user efforts will be increased as they need to navigate from start to reach the received response

What browsers and screen readers do this issue affect?

Windows: Chrome with NVDA

Are there any code-based customization done to Web Chat?

No, I am using Web Chat without any customizations except "styleOptions".

What version of Web Chat are you using?

Latest production

Which area does this issue affect?

Focus management, Others or unrelated

What is the public URL for the website?

No response

How to reproduce the issue?

  1. Hit the URL: https://servicesuat.microsoft.com/#/opdashboard/ log in with v-id.
  2. TAB till "Iris bot" button in header and press ENTER key.
  3. TAB till "top question for my role" message and press ENTER focus will be on "Top question for my role" button Press ENTER.
  4. Press TAB key to navigate.
  5. You will observe that keyboard focus is not visible.

What do you expect?

When focus is on "Top question for my role" button we press ENTER key keyboard focus should appear to "top question for my role" newly appear message or else on next pressing TAB key, keyboard focus should be visible on top question for my role newly appear message.

What actually happened?

When focus is on "Top question for my role" button we press ENTER, keyboard focus does not appear on to "top question for my role" newly appear message and on pressing TAB key twice, keyboard focus is visible on top question for my role newly appear message.

Environment Details:

Do you have any screenshots or recordings to repro the issue?

https://github.com/microsoft/BotFramework-WebChat/assets/117266902/f752b442-e852-4297-a9c4-6b9b65b85890

Did you find any DOM elements that might have caused the issue?

No response

MAS reference

MAS 2.4.3 – Focus Order

WCAG reference

No response

WAI-ARIA reference

No response

Adaptive Card JSON

No response

Additional context

No response

Kirank915 commented 10 months ago

A11yMAS;#A11ySev2;#MAS2.4.3;#HCL;#Accessibility;#FeatureBotframeworkwebchat-Apr23;

Kirank915 commented 10 months ago

Bug Copied from TCS team: 11449740

Kirank915 commented 9 months ago

@compulim Could you please provide fix ETA for this bug, as the partner team blocking the compliance for this bug.

compulim commented 8 months ago

This is by design.

After focused in the Adaptive Cards (the bubble with 5 buttons, e.g. Top questions for my role), the focus will be trapped inside that Adaptive Cards.

Pressing TAB will focus on the next button inside that card.

To focus on another card, the user need to press ESCAPE to escape from the focus trap, then press DOWN to move the focus to another bubble, then press ENTER again to focus the most recent Adaptive Cards.

v-prahu commented 8 months ago

Hi @compulim,

We discussed this issue with Accessibility SME and it looks like this is not an issue for Focus trap. Here Visual focus indicator is not available/extra tab is encountered on the chat window. Let's discuss this bug on call for further discussion and take this back to SME for final Say.

v-prahu commented 7 months ago

Hi @compulim , Looking for update on this.