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

[zanivan]

Search keywords

demo toolbar

Latest version

• I have tested the 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

Screen.Recording.2024-05-01.at.09.45.27.mov

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]

I have a hunch the problem could be living here:

material-ui/docs/src/modules/components/DemoToolbar.js

Line 250 in 571d504

tabIndex: index === activeControlIndex ? 0 : -1,

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]

This was broken in #37319.

Off-topic. Maybe an issue to create from #37319 (comment), 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.