fix: Accessibility issue in FluentButton

[efinder2]

🐛 Bug Report

In contrast to the "pure" FluentUI the output of screen readers is wrong. I tested with NVDA and Windows Narrator.

English isn't my native language so be aware of some issues.

💻 Repro or Code Sample

When using a screen reader the Type Button is read multiple times. I tested it with Microsoft Narrator and NVDA.
The following example is from the "Loading" Button on the Blazor FluentUi example page.

🤔 Expected Behavior

The expected Behavior the following text:

German:
Schalter    anklickbar  Loading

English:
Button clickable Loading

😯 Current Behavior

Cause my PC is configured to use german it isn't easy to switch NVDA to englisch. So here is the german output from the NVDA logger. For better understanding I translated it to english:

German:
Schalter    anklickbar
Schalter    anklickbar  Loading
Schalter    anklickbar

English:
Button clickable
Button clickable Loading
Button clickable

💁 Possible Solution

I don't know if this is a specific FluentUI Blazor problem or from FluentUI itself. If the type="button" is defined for the <fluent-button> it is rendered into the generated button. So there are a type=button in a button from type="button". This wrapped structure causes the described problem. The default value for the parameter Type is ButtonType.Button. so there is no way to remove the value.

Our workaround is to set an aria-label for the button so the complete Content isn't read. This is not ideal because changes to the content must be reflected in the content and the label. There is a risk a developer miss it when they change it.

🔦 Context

There are some laws requiring accessibility of UIs. So this is an important point.

🌍 Your Environment

OS: Windows 10
Browser: Edge, Chrome, Firefox
Screenreader: NVDA 2023.3.3, Windows Narrator for Windows 10
FluentUI 4.9.3
.NET 8

[vnbaaij]

I don't get the same when using Narrator. For me it announces:

Colored: Example Tab panel -> button -> Colored
Loading: button -> Fluent UI Blazor components

These components are being used in the Aspire Dashboard and that has been tested vigorously on a11y.

The loading button is a bit of an odd one out as we have made some changes in comparison to the other buttons. I'll take a closer look