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] : Alt+arrow up doesn't work properly on docsite #31363

Open kolaps33 opened 2 weeks ago

kolaps33 commented 2 weeks ago

Library

React Components / v9 (@fluentui/react-components)

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?

None

Reproduction

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

Bug Description

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

Steps

  1. Open dropdown from
  2. Navigate to some option (other then selected already)
  3. Press Alt+arrow up key

Actual Behavior

On the sandbox it select the option from list (works as expected) On the docsite: https://react.fluentui.dev/?path=/docs/components-dropdown--default#default it navigates to the "drawer" component

Expected Behavior

select the option from list

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

smhigley commented 3 days ago

As context, this is because the Storybook platform uses alt+down and alt+up to navigate. I think it'd be a good contribution to Storybook to remove that behavior wholesale. Or if they're opposed to that, we'd need to find a way to opt out in our own docs site.

Their navigation in general is pretty atrocious for accessibility 😓