fix: Rating component does not respect AriaLabel property. Should carry on to underlying radiogroup div.

[arazni]

🐛 Bug Report

<Fluent-Rating> component ignores AriaLabel property.

💻 Repro or Code Sample

<FluentRating MaxValue="5" AriaLabel="Rate us" />

🤔 Expected Behavior

One of the component's child components should have an aria-label property with the appropriate value in the html. The ideal location would be the div with a role of radiogroup, so that the entire rating has an appropriate context.

Expected html: <div id="f44a2381d" class="fluent-rating blade-rating" role="radiogroup" b-9p46vl6e0d="" aria-label="Rate us">

NVDA:

Rate us grouping
radio button checked 2 of 9

😯 Current Behavior

<div id="f44a2381d" class="fluent-rating blade-rating" role="radiogroup" b-9p46vl6e0d="">

NVDA:

radio button checked 2 of 9

💁 Possible Solution

Pass the AriaLabel property down to the div with the role of radiogroup.

🔦 Context

I want to be able to use a rating component and have it make sense to a screen reader without necessarily providing a visible label adjacent to it.

🌍 Your Environment

• OS & Device: Windows 11
• Browser Firefox and Edge
• .NET 9.0
• Fluent UI Blazor library Version 4.10.4

[arazni]

https://github.com/arazni/blazor-fluent-ui-slider-bug/blob/main/Components/HackRating.razor

Seems like a simple fix could be done here by just putting the aria-label="@AriaLabel" line in the radiogroup div.

(on the razor.cs side, I had to do workarounds for the internal classes. those can be ignored).

This may be a matter of taste, so I would consult with your accessibility experts first, but I think having the aria-label that's copied from the Label property (not AriaLabel property) on the individual radio buttons will be overkill after this fix is implemented.

As you iterate through the ratings, you'll hear these things in these cases:

Current behavior without Label and with or without AriaLabel:

radio button checked 1 of 5
radio button checked 2 of 5
radio button checked 3 of 5
...

Current behavior with Label="Rate me!" and with or without AriaLabel:

Rate me! radio button checked 1 of 5
Rate me! radio button checked 2 of 5
Rate me! radio button checked 3 of 5
...

Suggested behavior with AriaLabel="Rate me! and without Label:

Rate me! grouping
radio button checked 1 of 5
radio button checked 2 of 5
radio button checked 3 of 5
...

Behavior I would personally think would be overkill after suggested behavior, with AriaLabel="Rate me!" and with Label="Rate me!"

Rate me! grouping
Rate me! radio button checked 1 of 5
Rate me! radio button checked 2 of 5
Rate me! radio button checked 3 of 5
...

I think in this case I would suggest that the role="radiogroup" div take an aria-label property from the component's Label property if the AriaLabel is not specified, and would still suggest removing the aria-label from the individual radio buttons in favor of the radio group as a whole.

That would make it have screen-reader behavior that's very similar to a slider. (Though, I don't believe there's any way to avoid the "radio button checked" wording, or to put the x of n words first, since those are the ways radio buttons are read regardless of label. So I think that's as good as it can be without being a slider.)