fix: Title becomes the accessible name in FluentButton

Closed Beginner friendly
  • Is something wrong?
#5,590 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

A pull request for this has already been merged.

  • #5591 by @p6laris — merged

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
74/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
csharp
Domain
accessibility, frontend

Research direction

Start with FluentButton.razor, where the issue says aria-label="@Title" is set, and inspect the icon-only check mentioned in the report. Then check how the same behavior is applied in the five other named button components and look for the FluentButton_Title snapshot. Done when Title remains a tooltip, the accessible name includes the visible text, and the affected snapshot reflects the expected output.

Written by the indexing model from the issue text.

Description

a11y community:contribution

🐛 Bug Report

If a FluentButton has both text and a Title, the Title ends up as the aria-label, so the accessible name no longer contains the visible text. FluentAnchorButton, FluentCompoundButton, FluentMenuButton, FluentSplitButton and FluentToggleButton do the same.

💻 Repro or Code Sample

<FluentButton Title="Write a query first.">Run</FluentButton>

🤔 Expected Behavior

The accessible name stays "Run" and Title stays a tooltip.

😯 Current Behavior

It renders this on 5.0.0 and 5.0.1:

<fluent-button role="button" aria-label="Write a query first." title="Write a query first." ...>Run</fluent-button>

That fails WCAG 2.5.3 (Label in Name). Someone using voice control who says "click Run" won't hit the button, and a screen reader reads the tooltip instead of "Run".

💁 Possible Solution

It comes from aria-label="@Title" in FluentButton.razor. Maybe only set it when there's no Label or ChildContent, the same check icon-only already uses. Icon-only buttons would keep their name, and the FluentButton_Title snapshot would change. I'm happy to send a PR if that sounds right to you. Until then, passing aria-label explicitly works around it.

🔦 Context

I was adding explanatory tooltips to disabled buttons and noticed the button name changed to the tooltip text.

🌍 Your Environment

  • OS & Device: Windows 11 on PC
  • Browser: not relevant, the attributes come from the server render (checked with bUnit)
  • .NET and Fluent UI Blazor library Version: .NET 10.0.401 and Microsoft.FluentUI.AspNetCore.Components 5.0.0 and 5.0.1
Dominant language
C#
Stars
4.9k
Forks
495
Avg merge
1d 4h
Merged PRs (30d)
69

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/fluentui-blazor

All issues in microsoft/fluentui-blazor

Similar issues

More C# issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.