Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

After clicking on suggested actions, focus should not land on document body even for a brief moment #5050

Closed
compulim opened this issue Mar 14, 2024 · 0 comments · Fixed by #5097 · 4 remaining pull requests
Closed

After clicking on suggested actions, focus should not land on document body even for a brief moment #5050

compulim opened this issue Mar 14, 2024 · 0 comments · Fixed by #5097 · 4 remaining pull requests
Labels
area-accessibility bug Indicates an unexpected problem or an unintended behavior. p0 Must Fix. Release-blocker

Comments

@compulim
Copy link
Contributor

Is it an issue related to Adaptive Cards?

No.

What is the PWD impact?

Focus landing on document body confuse screen reader user.

Despite we specifically set the focus to send box, there is a very brief moment the focus jump to the document.body.

After clicking on one of the suggested action button, today:

  1. Remove/unmount suggested actions
  2. Focus to send box

The brief moment between point 1 and 2 send the focus to the document body. Instead, we should do:

  1. Focus to send box
  2. Remove/unmount suggested actions

What browsers and screen readers do this issue affect?

Windows: Edge with Windows Narrator, Windows: Chrome with NVDA, iOS/iPadOS: Safari with VoiceOver

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?

Suggested action

What is the public URL for the website?

No response

How to reproduce the issue?

  1. Talk to MockBot
  2. Paste the following code in the console let lastActiveElement;setInterval(function() {const activeElement = document.activeElement;if (lastActiveElement !== activeElement) {console.log(activeElement);lastActiveElement = activeElement;}}, 10);
  3. Type "suggested-actions"
  4. Click on a suggested action

What do you expect?

The console will list focus changes. The change should not include document.body.

What actually happened?

The console list focus changes and it includes document.body.

Following screenshot show the focus change list.

image

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

No response

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

No response

MAS reference

No response

WCAG reference

No response

WAI-ARIA reference

No response

Adaptive Card JSON

No response

Additional context

No response

@compulim compulim added bug Indicates an unexpected problem or an unintended behavior. area-accessibility customer-reported Required for internal Azure reporting. Do not delete. Bot Services Required for internal Azure reporting. Do not delete. Do not change color. p0 Must Fix. Release-blocker and removed customer-reported Required for internal Azure reporting. Do not delete. Bot Services Required for internal Azure reporting. Do not delete. Do not change color. labels Mar 14, 2024
This was referenced Aug 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment