search

microsoft / BotFramework-WebChat

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

MICROSOFT Carousel visibility (horizontal scroll behaviour) #4310

Closed KattaBhargav closed 2 years ago

KattaBhargav commented 2 years ago

PWD Impact:

Can cause significant disruption. When a sighted keyboard user navigates through the carousel options the focus only recentres on new messages if the buttons were not visible on the screen at all. This leads to some options which are partially visible not being moved into clear view and users only ever being presented with part text. For example the options on the left and right of the screenshot below. This only occurs on Chrome and NVDA. This does not occur with Safari and VoiceOver pairing, which recentres on each item as would be expected

Repro Steps:

  1. Open URL https://leedssis.flexsocial.co.uk/smartchat.
  2. Open the chat pane
  3. Type question "Is there a gym at the university"
  4. Press Enter.
  5. Shift + tab to focus on the transcript
  6. Shift + tab to focus on the carousel
  7. Press Enter to interact with the carousel
  8. Tab to the first card's first button
  9. Tab to the first card's second button
  10. Tab to the second card
  11. At this point we expected the carousel to scroll to center the second card in the display but it did not.

Actual results

At this point we expected the carousel to scroll to center the second card in the display but it did not. Tabbing onwards scrolls the carousel only when the focus hits the third card which is out of view. This means the user was unable to fully see the second card while it had the focus and may have missed seeing it altogether unless they used the left and right arrow keys to horizontally scroll the carousel manually.

Expected Results

The focused card should be centered so that card is not obscured.

MAS Reference:

MAS 2.1.1 – Keyboard

Test Environment:

OS: Windows 11 Version 21H2 Build 22000.675 URL: https://leedssis.flexsocial.co.uk/smartchat. Tools: NVDA version 2021.3.5

KattaBhargav commented 2 years ago

A11yMAS;#A11ySev2;#A11yeDAD;#WCAG2.1.1#HCL;#Accessibility;#BotFrameworkWebChat-Aug21;#Linked:Bug193998;#LinkedBug;

KattaBhargav commented 2 years ago

Bug copied from EDAD VSO Bug id:-BUG 193998

compulim commented 2 years ago

I have done some experiments on how browser behave when a widget is focused, and I found Web Chat is consistent with browser behavior, which <button> are not scrolled into view.

This experiment is done completely outside of Web Chat and Adaptive Cards, https://github.com/compulim/experiment-horizontal-scroll-into-view/.

The "scroll focused element into view" functionality is provided by the browser. Web Chat did not intervene or modified this behavior.

Thus, if the scroll behavior is not expected, please file bugs to browser vendors.

The following videos are recording from the experiment on Edge 105 and Firefox 103.

https://user-images.githubusercontent.com/1622400/182953179-25779a24-0052-4846-8796-9b75db775299.mp4

https://user-images.githubusercontent.com/1622400/182953182-f362cdcb-2597-4f63-9841-5f3c77d47e54.mp4