[docs] Use focus-visible instead of focus for Menu demos

[michaldudak]

As spotted in #36400 (review).
This PR changes the :focus to :focus-visible (or .Mui-focusVisible) styles on menu button.

[mui-bot]

Netlify deploy preview

https://deploy-preview-36847--material-ui.netlify.app/

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against c301ab3

[danilo-leal]

Looks great! I still find it a bit unclear when to use focus vs focus-visible... 🤔 I know the latter is explicitly for when the component is focused through tabbing, right? But it seems to also do the same thing as just the focus (which would be focusing through click/tap). Is this a correct interpretation? Just for the sake of learning.

[michaldudak]

Yup, focus-visible is only applied when an element receives focus as an effect of user interaction with the keyboard. In the case of Menu demos, we had the weird state where you clicked the trigger button, the menu opened and was focused, you clicked on a menu item that closed the menu, and only then you could see the focus ring on the button.
Having the ring applied only on focus-visible does look more consistent.