microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
17.87k stars 2.66k forks source link

[Bug] [Accessibility] [dropdown] [combobox] : TAB and Shift+TAB doesn't work properly on docsite #31351

Open kolaps33 opened 2 weeks ago

kolaps33 commented 2 weeks ago

Library

V9

System Info

System:
    OS: Windows 10 10.0.22631
    CPU: (12) x64 Intel(R) Xeon(R) E-2176M  CPU @ 2.70GHz
    Memory: 16.36 GB / 31.74 GB
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

yes

Reproduction

https://stackblitz.com/run?file=src%2Fexample.tsx

Bug Description

Dropdown sandbox: https://stackblitz.com/edit/nqfk2s?file=src%2Fexample.tsx Combobox sandbox: https://stackblitz.com/edit/biayya?file=src%2Fexample.tsx

Steps

  1. Open dropdown or combobox
  2. Navigate to some option (other then selected already)
  3. Press TAB key or Shift+TAB key

Actual Behavior

on the docsite: for combobox: https://react.fluentui.dev/?path=/docs/components-combobox--default TAB works as expected Shift+TAB doesn't select the option from list...

for dropdown: https://react.fluentui.dev/?path=/docs/components-dropdown--default TAB doesn't select option from the list.... Shift+TAB is even not working and user cannot navigate backwards

Expected Behavior

option is selected from dropdown or from the combobox This behavior works like this on the simple sandbox, but on the docsite. If someone try this on the docsite, then they see wrong behavior.

Logs

No response

Requested priority

Normal

Products/sites affected

docsite

Are you willing to submit a PR to fix?

no

Validations