@Garderoben @LiZzeira

The button :focus styles were added in #8575 to show a visual style when the dialog calls Focus, but the :focus effect is visible after you click the button until you click somewhere else. We need to apply :focus-visible instead so it behaves like if you tabbed onto it and not use :focus.

I'm not aware of a JavaScript way of doing that and Blazor only has the plain Focus method.

See the current (faulty) behavior in action on dev.mudblazor.com after you click a button.

Goal: Apply the :focus-visible class when the dialog applies focus instead of :focus so we get the same style as if you tabbed onto the element. This means the same approach will work for all elements since we already use the :focus-visible styles.

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.08%. Comparing base (28bc599) to head (ab9c38c).
Report is 90 commits behind head on dev.

@@            Coverage Diff             @@
##              dev    #8767      +/-   ##
==========================================
+ Coverage   89.82%   90.08%   +0.25%     
==========================================
  Files         412      419       +7     
  Lines       11878    12178     +300     
  Branches     2364     2397      +33     
==========================================
+ Hits        10670    10970     +300     
+ Misses        681      668      -13     
- Partials      527      540      +13     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@henon I couldn't find a better solution so I believe this total reversion should be merged until we discover something else. Otherwise the button will have a sticky style (unlike any other components).

@LiZzeira FYI, this will revert your PR.