fix: Title becomes the accessible name in FluentButton

Chiusa Adatta ai principianti
  • Qualcosa non va?
#5,590 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Una pull request collegata è già stata integrata.

  • #5591 di @p6laris — integrata

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
74/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
csharp
Ambito
accessibility, frontend

Direzione di ricerca

Inizia da FluentButton.razor, dove l’issue indica che è impostato aria-label="@Title", e controlla la verifica icon-only menzionata nel rapporto. Poi verifica come viene applicato lo stesso comportamento negli altri cinque componenti button indicati e cerca lo snapshot FluentButton_Title. Il lavoro è completato quando Title rimane un tooltip, il nome accessibile include il testo visibile e lo snapshot interessato riflette il risultato previsto.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
C#
Stelle
4.9k
Fork
495
Merge medio
1g 4h
PR unite (30g)
69

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/fluentui-blazor

Tutte le issue di microsoft/fluentui-blazor

Issue simili

Altre issue su C#

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.