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

Accessibility: TAB into keyboard help screen should focus on close button #4476

Closed
1 of 2 tasks
compulim opened this issue Oct 29, 2022 · 0 comments · Fixed by #4479
Closed
1 of 2 tasks

Accessibility: TAB into keyboard help screen should focus on close button #4476

compulim opened this issue Oct 29, 2022 · 0 comments · Fixed by #4479
Assignees
Labels
area-accessibility bug Indicates an unexpected problem or an unintended behavior.

Comments

@compulim
Copy link
Contributor

Is it an issue related to Adaptive Cards?

  • Yes, this is an Adaptive Card issue but it is specific to Web Chat.

Do you have any screenshots?

image

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

Unrelated

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

Browser: Edge (latest), Browser: Chrome (latest), Browser: Firefox (latest), Browser: Safari (latest), Browser: IE Mode (latest), Platform: Windows, Platform: macOS

Which area does this issue affect?

Others/unrelated

Is this an accessibility issue?

  • Yes, this is an accessibility issue.

Please describe the bug

When press TAB to focus on Web Chat, a keyboard help screen will be shown.

Although it looks like the focus is on the close button, the actual focus is on the dialog itself.

It should focus on the close button. However, we might have some reasons on why we are doing this.

Do you see any errors in console log?

No response

How to reproduce the issue?

  1. Open Web Chat Loader
  2. Press TAB

What is the expected and actual behavior?

Expected:

The focus (document.activeElement) should be on the close button, which has the following DOM:

<button aria-label="Close" class="webchat__keyboard-help__close-button" tabindex="-1" type="button">

Actual:

The focus (document.activeElement) is on the dialog DOM element:

<div aria-hidden="false" class="webchat__keyboard-help webchat--css-xpubm-1kp5mon webchat__keyboard-help--shown" role="dialog" tabindex="0">

Adaptive Card JSON

No response

Additional context

@beyackle2 this is the bug you mentioned this week

@compulim compulim added bug Indicates an unexpected problem or an unintended behavior. 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 Oct 29, 2022
@compulim compulim self-assigned this Oct 29, 2022
@compulim compulim added area-accessibility 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 Oct 29, 2022
@compulim compulim added this to the release-4.15.5 milestone Oct 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-accessibility bug Indicates an unexpected problem or an unintended behavior.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant