MudButton: fix focus style button when open dialog

[LiZzeira]

Description

The style file for the MudButton components has been updated to include the :focus and :focus-visible pseudo-classes, applying them to the respective buttons.

How Has This Been Tested?

I made a style modification to ensure that the focus on the button is correctly applied when the dialog opens.

This modification addresses several issues, such as:
#4283
#8451

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Before:

Dialog.-.MudBlazor.-.Google.Chrome.2024-04-04.22-42-50.mp4

After:
https://github.com/MudBlazor/MudBlazor/assets/79289665/e0609b70-9899-48c0-90de-61f2d585b468
https://github.com/MudBlazor/MudBlazor/assets/79289665/6877c9d1-dd11-496f-bdbf-9cd41498c8b5
https://github.com/MudBlazor/MudBlazor/assets/79289665/07386ced-3695-427b-bacd-10e03e15cabd

Checklist:

• The PR is submitted to the correct branch (dev).
• My code follows the code style of this project.
• I've added relevant tests.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 89.77%. Comparing base (e44b9f3) to head (7147839).

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #8575      +/-   ##
==========================================
+ Coverage   89.75%   89.77%   +0.02%     
==========================================
  Files         411      411              
  Lines       11817    11817              
  Branches     2362     2362              
==========================================
+ Hits        10606    10609       +3     
+ Misses        683      681       -2     
+ Partials      528      527       -1     

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

[danielchalmers]

Just fyi your sound is on in the clips

[LiZzeira]

lol
Sorry, I hadn't seen it but it's okay

[danielchalmers]

Nice work, again. Thanks for looking into this.

I do wonder why focus-visible is used alone in so many controls though? Must be a reason. @Garderoben may know.
https://github.com/search?q=repo%3AMudBlazor%2FMudBlazor%20focus-visible&type=code

[henon]

I want @Garderoben to double check this to be sure.

[LiZzeira]

When using the :focus-visible pseudo-class, the applied style will only be visible if the focused element is via keyboard, such as when pressing the "Tab" key to toggle between buttons.

[danielchalmers]

@LiZzeira Do you think we should be looking at any of the other components that use focus-visible, or is the button enough? https://github.com/search?q=repo%3AMudBlazor%2FMudBlazor%20focus-visible&type=code

[LiZzeira]

@danielchalmers I'll conduct some tests on these additional components, and if needed, I'll update and push a new PR