search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.68k stars 351 forks source link

fix: Accessibility issue in FluentButton #2671

Open efinder2 opened 3 days ago

efinder2 commented 3 days ago

🐛 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.

image

🤔 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 commented 3 days ago

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