search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
91.86k stars 31.57k forks source link

[docs-infra] Demo toolbar buttons can't be accessed via keyboard #42083

Open zanivan opened 2 weeks ago

zanivan commented 2 weeks ago

Search keywords

demo toolbar

Latest version

Steps to reproduce

Steps:

  1. Go to any doc's page with a demo container
  2. Try to navigate using only the keyboard

Current behavior

https://github.com/mui/material-ui/assets/37222944/38aa4a8a-25b8-4cbb-b9b8-8188f65cb980

Expected behavior

The toolbar needs to be accessible for keyboard users. Right now, if you're only using a keyboard, you can't expand, reset, or edit any demos. This is essential for ensuring all users can fully interact with the toolbar's features.

Your environment

npx @mui/envinfo ``` System: OS: macOS 14.3 CPU: (10) arm64 Apple M1 Pro Memory: 125.86 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm pnpm: 8.14.0 - /usr/local/bin/pnpm Managers: Homebrew: 4.0.18 - /opt/homebrew/bin/brew pip3: 21.2.4 - /usr/bin/pip3 RubyGems: 3.0.3.1 - /usr/bin/gem Utilities: Make: 3.81 - /usr/bin/make GCC: 15.0.0 - /usr/bin/gcc Git: 2.40.1 - /opt/homebrew/bin/git Clang: 15.0.0 - /usr/bin/clang Curl: 8.4.0 - /usr/bin/curl Servers: Apache: 2.4.56 - /usr/sbin/apachectl IDEs: VSCode: 1.86.0 - /usr/local/bin/code Vim: 9.0 - /usr/bin/vim Xcode: /undefined - /usr/bin/xcodebuild Languages: Bash: 3.2.57 - /bin/bash Perl: 5.30.3 - /usr/bin/perl Python3: 3.9.6 - /usr/bin/python3 Ruby: 2.6.10 - /usr/bin/ruby Databases: SQLite: 3.43.2 - /usr/bin/sqlite3 Browsers: Chrome: 124.0.6367.93 Safari: 17.3 Monorepos: Lerna: 8.1.2 ```

Search keywords: demo toolbar

danilo-leal commented 2 weeks ago

I have a hunch the problem could be living here:

https://github.com/mui/material-ui/blob/571d5046e26aa07605cb1e01ca99b2eb0b04d009/docs/src/modules/components/DemoToolbar.js#L250

Changing this line to tabIndex: index === activeControlIndex && 0 fixes the problem, but I'm unsure whether that has unintended consequences because the concept of an "active" control in the context of the toolbar buttons is a bit blurry to me. I think all of these buttons, as Victor states, should indeed be focusable. @alexfauquette + @bharatkashyap + @siriwatknp any insights? 😬

oliviertassinari commented 2 weeks ago

This was broken in #37319.

Off-topic. Maybe an issue to create from https://github.com/mui/material-ui/pull/37319#issuecomment-1685413613, it's annoying to have this crop into the docs when opening the dev tools. We could fix this with Next.js App Router, I guess.