Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Rating] Improve a11y support #2978

Merged
merged 5 commits into from
Nov 26, 2024
Merged

[Rating] Improve a11y support #2978

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5dad466
Fix #2976
vnbaaij Nov 26, 2024
3d43c19
More changes
vnbaaij Nov 26, 2024
4b1f91c
Merge branch 'dev' into users/vnbaaij/FIX-ISSUE-#2976
vnbaaij Nov 26, 2024
4d74b3d
Fix test
vnbaaij Nov 26, 2024
3a968d5
Merge branch 'dev' into users/vnbaaij/FIX-ISSUE-#2976
dvoituron Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8270,7 +8270,7 @@
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentRating.IconColor">
<summary>
Gets or sets the icon drawing and fill color.
Gets or sets the icon drawing and fill color.
Value comes from the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.Color"/> enumeration. Defaults to Accent.
</summary>
</member>
Expand Down
1 change: 1 addition & 0 deletions examples/Demo/Shared/Pages/Rating/Examples/RatingDefault.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@

<FluentStack VerticalAlignment="VerticalAlignment.Center">
<FluentRating Max="5"
Label="Rate me!"
@bind-Value="@SelectedValue"
OnHoverValueChanged="@(i => HoverValue = i)" />
<FluentLabel>@LabelText</FluentLabel>
Expand Down
5 changes: 3 additions & 2 deletions src/Core/Components/Rating/FluentRating.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@

@if (!string.IsNullOrEmpty(Label) || LabelTemplate is not null)
{
<FluentInputLabel ForId="@Id" Label="@Label" AriaLabel="@AriaLabel" Required="@Required">@LabelTemplate</FluentInputLabel>
<FluentInputLabel ForId="@Id" Label="@Label" Required="@Required">@LabelTemplate</FluentInputLabel>
_labelUsed = true;
}

<div Id="@Id"
class="@ClassValue"
style="@StyleValue"
role="radiogroup"
aria-readonly="@(ReadOnly ? "true" : null)"
aria-label="@(AriaLabel ?? Label ?? null)"
@onmouseleave="@OnMouseLeaveAsync">

@foreach (var index in Enumerable.Range(1, Max))
Expand All @@ -28,7 +30,6 @@
{
<input type="radio" checked="@(index == Value)" name="@GroupName"
value="@index"
aria-label="@Label"
@onfocus="@(() => OnClickAsync(index, fromFocus: true))" />

<FluentIcon Value="@GetIcon(index)"
Expand Down
3 changes: 2 additions & 1 deletion src/Core/Components/Rating/FluentRating.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
{
private bool _updatingCurrentValue = false;
private int? _hoverValue = null;
private bool _labelUsed;

Check warning on line 12 in src/Core/Components/Rating/FluentRating.razor.cs

View workflow job for this annotation

GitHub Actions / Build and Test Core Lib 

The field 'FluentRating._labelUsed' is assigned but its value is never used

Check warning on line 12 in src/Core/Components/Rating/FluentRating.razor.cs

View workflow job for this annotation

GitHub Actions / Build and Test Core Lib 

The field 'FluentRating._labelUsed' is assigned but its value is never used

Check warning on line 12 in src/Core/Components/Rating/FluentRating.razor.cs

View workflow job for this annotation

GitHub Actions / Build and Test Core Lib 

The field 'FluentRating._labelUsed' is assigned but its value is never used

Check warning on line 12 in src/Core/Components/Rating/FluentRating.razor.cs

View workflow job for this annotation

GitHub Actions / Build and Test Core Lib 

The field 'FluentRating._labelUsed' is assigned but its value is never used

Check warning on line 12 in src/Core/Components/Rating/FluentRating.razor.cs

View workflow job for this annotation

GitHub Actions / Build and Deploy Demo site 

The field 'FluentRating._labelUsed' is assigned but its value is never used

Check warning on line 12 in src/Core/Components/Rating/FluentRating.razor.cs

View workflow job for this annotation

GitHub Actions / Build and Test Core Lib 

The field 'FluentRating._labelUsed' is assigned but its value is never used

Check warning on line 12 in src/Core/Components/Rating/FluentRating.razor.cs

View workflow job for this annotation

GitHub Actions / Build and Test Core Lib 

The field 'FluentRating._labelUsed' is assigned but its value is never used

Check warning on line 12 in src/Core/Components/Rating/FluentRating.razor.cs

View workflow job for this annotation

GitHub Actions / Build and Test Core Lib 

The field 'FluentRating._labelUsed' is assigned but its value is never used

Check warning on line 12 in src/Core/Components/Rating/FluentRating.razor.cs

View workflow job for this annotation

GitHub Actions / Build and Test Core Lib 

The field 'FluentRating._labelUsed' is assigned but its value is never used

/// <summary />
protected override string? ClassValue => new CssBuilder(base.ClassValue)
Expand Down Expand Up @@ -37,7 +38,7 @@
public Icon IconOutline { get; set; } = new CoreIcons.Regular.Size20.Star();

/// <summary>
/// Gets or sets the icon drawing and fill color.
/// Gets or sets the icon drawing and fill color.
/// Value comes from the <see cref="Color"/> enumeration. Defaults to Accent.
/// </summary>
[Parameter]
Expand Down
42 changes: 21 additions & 21 deletions tests/Core/Rating/FluentRatingTests.FluentRating_Label.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@

<label for="xxx" class="fluent-input-label" b-hum22yrq17="">My Label
</label>
<div id="xxx" class="fluent-rating" role="radiogroup" blazor:onmouseleave="1" b-9p46vl6e0d="">
<input type="radio" name="xxx" value="1" aria-label="My Label" blazor:onfocus="2" b-9p46vl6e0d="">
<svg style="width: 28px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" blazor:onkeydown="7" blazor:onclick="8" blazor:onmouseleave="9" blazor:onmouseenter="10" aria-hidden="true">
<path d="M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Zm.9.44L8.07 7.25a1 1 0 0 1-.75.55L3 8.43l3.12 3.04a1 1 0 0 1 .3.89l-.75 4.3 3.87-2.03a1 1 0 0 1 .93 0l3.86 2.03-.74-4.3a1 1 0 0 1 .29-.89L17 8.43l-4.32-.63a1 1 0 0 1-.75-.55L10 3.35Z"></path>
</svg>
<input type="radio" name="xxx" value="2" aria-label="My Label" blazor:onfocus="3" b-9p46vl6e0d="">
<svg style="width: 28px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" blazor:onkeydown="11" blazor:onclick="12" blazor:onmouseleave="13" blazor:onmouseenter="14" aria-hidden="true">
<path d="M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Zm.9.44L8.07 7.25a1 1 0 0 1-.75.55L3 8.43l3.12 3.04a1 1 0 0 1 .3.89l-.75 4.3 3.87-2.03a1 1 0 0 1 .93 0l3.86 2.03-.74-4.3a1 1 0 0 1 .29-.89L17 8.43l-4.32-.63a1 1 0 0 1-.75-.55L10 3.35Z"></path>
</svg>
<input type="radio" name="xxx" value="3" aria-label="My Label" blazor:onfocus="4" b-9p46vl6e0d="">
<svg style="width: 28px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" blazor:onkeydown="15" blazor:onclick="16" blazor:onmouseleave="17" blazor:onmouseenter="18" aria-hidden="true">
<path d="M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Zm.9.44L8.07 7.25a1 1 0 0 1-.75.55L3 8.43l3.12 3.04a1 1 0 0 1 .3.89l-.75 4.3 3.87-2.03a1 1 0 0 1 .93 0l3.86 2.03-.74-4.3a1 1 0 0 1 .29-.89L17 8.43l-4.32-.63a1 1 0 0 1-.75-.55L10 3.35Z"></path>
</svg>
<input type="radio" name="xxx" value="4" aria-label="My Label" blazor:onfocus="5" b-9p46vl6e0d="">
<svg style="width: 28px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" blazor:onkeydown="19" blazor:onclick="20" blazor:onmouseleave="21" blazor:onmouseenter="22" aria-hidden="true">
<path d="M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Zm.9.44L8.07 7.25a1 1 0 0 1-.75.55L3 8.43l3.12 3.04a1 1 0 0 1 .3.89l-.75 4.3 3.87-2.03a1 1 0 0 1 .93 0l3.86 2.03-.74-4.3a1 1 0 0 1 .29-.89L17 8.43l-4.32-.63a1 1 0 0 1-.75-.55L10 3.35Z"></path>
</svg>
<input type="radio" name="xxx" value="5" aria-label="My Label" blazor:onfocus="6" b-9p46vl6e0d="">
<svg style="width: 28px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" blazor:onkeydown="23" blazor:onclick="24" blazor:onmouseleave="25" blazor:onmouseenter="26" aria-hidden="true">
<path d="M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Zm.9.44L8.07 7.25a1 1 0 0 1-.75.55L3 8.43l3.12 3.04a1 1 0 0 1 .3.89l-.75 4.3 3.87-2.03a1 1 0 0 1 .93 0l3.86 2.03-.74-4.3a1 1 0 0 1 .29-.89L17 8.43l-4.32-.63a1 1 0 0 1-.75-.55L10 3.35Z"></path>
</svg>
<div id="xxx" class="fluent-rating" role="radiogroup" aria-label="My Label" blazor:onmouseleave="1" b-9p46vl6e0d="">
<input type="radio" name="xxx" value="1" blazor:onfocus="2" b-9p46vl6e0d="">
<svg style="width: 28px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" blazor:onkeydown="7" blazor:onclick="8" blazor:onmouseleave="9" blazor:onmouseenter="10" aria-hidden="true">
<path d="M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Zm.9.44L8.07 7.25a1 1 0 0 1-.75.55L3 8.43l3.12 3.04a1 1 0 0 1 .3.89l-.75 4.3 3.87-2.03a1 1 0 0 1 .93 0l3.86 2.03-.74-4.3a1 1 0 0 1 .29-.89L17 8.43l-4.32-.63a1 1 0 0 1-.75-.55L10 3.35Z"></path>
</svg>
<input type="radio" name="xxx" value="2" blazor:onfocus="3" b-9p46vl6e0d="">
<svg style="width: 28px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" blazor:onkeydown="11" blazor:onclick="12" blazor:onmouseleave="13" blazor:onmouseenter="14" aria-hidden="true">
<path d="M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Zm.9.44L8.07 7.25a1 1 0 0 1-.75.55L3 8.43l3.12 3.04a1 1 0 0 1 .3.89l-.75 4.3 3.87-2.03a1 1 0 0 1 .93 0l3.86 2.03-.74-4.3a1 1 0 0 1 .29-.89L17 8.43l-4.32-.63a1 1 0 0 1-.75-.55L10 3.35Z"></path>
</svg>
<input type="radio" name="xxx" value="3" blazor:onfocus="4" b-9p46vl6e0d="">
<svg style="width: 28px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" blazor:onkeydown="15" blazor:onclick="16" blazor:onmouseleave="17" blazor:onmouseenter="18" aria-hidden="true">
<path d="M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Zm.9.44L8.07 7.25a1 1 0 0 1-.75.55L3 8.43l3.12 3.04a1 1 0 0 1 .3.89l-.75 4.3 3.87-2.03a1 1 0 0 1 .93 0l3.86 2.03-.74-4.3a1 1 0 0 1 .29-.89L17 8.43l-4.32-.63a1 1 0 0 1-.75-.55L10 3.35Z"></path>
</svg>
<input type="radio" name="xxx" value="4" blazor:onfocus="5" b-9p46vl6e0d="">
<svg style="width: 28px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" blazor:onkeydown="19" blazor:onclick="20" blazor:onmouseleave="21" blazor:onmouseenter="22" aria-hidden="true">
<path d="M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Zm.9.44L8.07 7.25a1 1 0 0 1-.75.55L3 8.43l3.12 3.04a1 1 0 0 1 .3.89l-.75 4.3 3.87-2.03a1 1 0 0 1 .93 0l3.86 2.03-.74-4.3a1 1 0 0 1 .29-.89L17 8.43l-4.32-.63a1 1 0 0 1-.75-.55L10 3.35Z"></path>
</svg>
<input type="radio" name="xxx" value="5" blazor:onfocus="6" b-9p46vl6e0d="">
<svg style="width: 28px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" blazor:onkeydown="23" blazor:onclick="24" blazor:onmouseleave="25" blazor:onmouseenter="26" aria-hidden="true">
<path d="M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Zm.9.44L8.07 7.25a1 1 0 0 1-.75.55L3 8.43l3.12 3.04a1 1 0 0 1 .3.89l-.75 4.3 3.87-2.03a1 1 0 0 1 .93 0l3.86 2.03-.74-4.3a1 1 0 0 1 .29-.89L17 8.43l-4.32-.63a1 1 0 0 1-.75-.55L10 3.35Z"></path>
</svg>
</div>
Loading