Skip to content

Apply BitChoiceGroup improvements (#12740) #12743

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

Open
msynk wants to merge 21 commits into
base: develop
Choose a base branch
from
Open

Apply BitChoiceGroup improvements (#12740) #12743

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
951e505
apply BitChoiceGroup improvements #12740
msynk Jul 21, 2026
904f917
resolve review comments
msynk Jul 21, 2026
4dba0c3
resolve local review findings
msynk Jul 26, 2026
fa690a8
fix local review findings
msynk Jul 26, 2026
cfd9d9d
resolve review comments 2
msynk Jul 27, 2026
6ab55aa
resolve review comments 2
msynk Jul 27, 2026
8301b60
resolve review comments 3
msynk Jul 28, 2026
eddc6e1
Merge branch 'develop' of https://github.com/bitfoundation/bitplatfor…
msynk Jul 28, 2026
f5a659f
resolve review comments 4
msynk Jul 28, 2026
9c06035
resolve review comments 5
msynk Jul 28, 2026
82c8d5a
Merge branch 'develop' into 12740-blazorui-choicegroup-improvements
msynk Jul 28, 2026
91812ac
resolve review comments 6
msynk Jul 28, 2026
c209bb5
fix tests
msynk Jul 28, 2026
6f2c88a
resolve review comments 7
msynk Jul 29, 2026
df9854b
fix tests
msynk Jul 29, 2026
1383dc6
resolve review comments 8
msynk Jul 29, 2026
fe79f40
resolve review comments 9
msynk Jul 29, 2026
89e723b
resolve review comments 9
msynk Jul 29, 2026
4788e0f
resolve review comments 10
msynk Jul 29, 2026
83d68ca
resolve review comments 11
msynk Jul 29, 2026
74545ec
resolve review comments 12
msynk Jul 29, 2026
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
56 changes: 42 additions & 14 deletions src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,56 @@
@typeparam TItem
@typeparam TValue

@* The invalid state belongs to the choice as a whole, not to the option that happens to be focused,
so the group carries the aria-invalid too and not only the individual radio inputs of the base class. *@
<div @ref="RootElement" @attributes="HtmlAttributes"
id="@_Id"
role="radiogroup"
style="@StyleBuilder.Value"
class="@ClassBuilder.Value"
dir="@Dir?.ToString().ToLower()"
aria-label="@AriaLabel"
aria-labelledby="@GetAriaLabelledBy()">
aria-labelledby="@GetAriaLabelledBy()"
aria-describedby="@GetAriaDescribedBy()"
aria-required="@(Required ? "true" : null)"
aria-invalid="@(ValueInvalid is true ? "true" : null)"
aria-readonly="@(ReadOnly ? "true" : null)"
aria-disabled="@(IsEnabled ? null : "true")"
aria-orientation="@(Horizontal ? "horizontal" : "vertical")">
Comment on lines +6 to +21

@coderabbitai coderabbitai Bot Jul 29, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== locate files =="
git ls-files | rg 'BitChoiceGroup\.razor|_BitChoiceGroupItem\.razor|BitChoiceGroup\.cs|\.csproj$' | sed -n '1,120p'

echo
echo "== BitChoiceGroup.razor =="
sed -n '1,80p' src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor

echo
echo "== _BitChoiceGroupItem.razor =="
sed -n '1,90p' src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor

echo
echo "== relevant occurrences in code-behind =="
rg -n "GetAriaDescribedBy|aria-describedby|HtmlAttributes|InputHtmlAttributes|HasDescription|IsEnabled|ReadOnly|Required" src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup -S

echo
echo "== git diff stat/name =="
git diff --stat | sed -n '1,80p'
git diff --name-only | sed -n '1,80p'
git diff -- BitChoiceGroup.razor src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor | sed -n '1,160p' || true
git diff -- _BitChoiceGroupItem.razor src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor | sed -n '1,160p' || true

echo
echo "== runtime Blazor duplicate attribute semantics probe via generated RenderTreeBuilder? not available; inspect available tooling =="
rg -n "Multiple attributes with the same name|override|duplicate attribute" $(find . -path ./bin -prune -o -path ./obj -prune -o -type f \( -name '*.cs' -o -name '*.md' \) -print) -S | sed -n '1,120p' || true

Repository: bitfoundation/bitplatform

Length of output: 48675

🌐 Web query:

Blazor rendering duplicate attribute names rightmost attribute wins @attributes explicit attribute duplicate name behavior

💡 Result:

In Blazor, when multiple attributes with the same name are present on a markup element—including those provided via explicit declaration and those "splatted" using the @attributes directive—the precedence is determined by the order in which they are processed [1][2]. The framework processes attributes from right to left (last to first) [1][3][4]. Because the framework evaluates these attributes in this order, the first attribute encountered (which is the rightmost attribute in your code) wins [1][5]. This behavior is effectively equivalent to "last one wins" when reading the code from left to right [2][5]. Key behaviors to remember: * If you place an attribute to the right of @attributes, that attribute will take precedence because it is processed first [1][6]. * If you place an attribute to the left of @attributes, the attribute contained within the @attributes collection will take precedence because it is processed after the explicit attribute [1][2]. Example: If you have <input @attributes="MyAttributes" class="my-class" />, the class attribute "my-class" is to the right of @attributes. It will be processed first, making "my-class" the final value, even if the "class" key exists within the MyAttributes dictionary [1][2]. Conversely, if you write <input class="my-class" @attributes="MyAttributes" />, the "class" value inside the dictionary will win [2]. This design allows component authors to provide default attributes while still giving consumers the flexibility to override them by correctly positioning their own attributes relative to the @attributes directive [1][2].

Citations:

Do not override consumer-supplied aria-describedby after applying HTML attributes.

Blazor right-to-left attribute precedence means the explicit aria-describedby here wins over any consumer-supplied value in HtmlAttributes, including when it evaluates to null and removes the attribute. Build the final group/item aria-describedby in code behind, only providing a generated ID when no caller-supplied value exists.

📍 Affects 2 files
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor#L6-L21 (this comment)
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor#L23-L47
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor`
around lines 6 - 21, The explicit aria-describedby attributes in
BitChoiceGroup.razor and _BitChoiceGroupItem.razor override consumer values from
HtmlAttributes; update the code-behind for both the group and item to resolve
the final aria-describedby value, using the caller-supplied value when present
and generating the internal ID only when absent, then bind the markup to that
resolved value.


<label id="@_labelId"
disabled="@(IsEnabled is false)"
style="@Styles?.LabelContainer"
class="@Classes?.LabelContainer">
@if (LabelTemplate is not null)
{
@LabelTemplate
}
else if (Label.HasValue())
{
<span style="@Styles?.Label" class="bit-chg-lbl @Classes?.Label">@Label</span>
}
</label>
@if (HasLabel)
{
@* Not a label element: with no single input to point a "for" at, a label here would label
nothing; the group is named through aria-labelledby referencing this id instead. *@
<div id="@_labelId"
style="@Styles?.LabelContainer"
class="@Classes?.LabelContainer">
@if (LabelTemplate is not null)
{
@LabelTemplate
}
else
{
<span style="@Styles?.Label" class="bit-chg-lbl @Classes?.Label">@Label</span>
}
</div>
}

@if (HasDescription)
{
<div id="@_descriptionId"
style="@Styles?.Description"
class="bit-chg-gds @Classes?.Description">
@if (DescriptionTemplate is not null)
{
@DescriptionTemplate
}
else
{
@Description
}
</div>
}

<div id="@_optionsContainerId" style="@Styles?.Container" class="bit-chg-cnt @Classes?.Container">
@if (Options is not null || ChildContent is not null)
Expand Down
Loading
Loading