Skip to content

MudCheckBox, MudRadio, MudSwitch: Add or improve aria-label support#12591

Merged
danielchalmers merged 1 commit intoMudBlazor:devfrom
danielchalmers:maximum-quokka
Feb 4, 2026
Merged

MudCheckBox, MudRadio, MudSwitch: Add or improve aria-label support#12591
danielchalmers merged 1 commit intoMudBlazor:devfrom
danielchalmers:maximum-quokka

Conversation

@danielchalmers
Copy link
Member

Refactored the AriaLabel handling in MudCheckBox and extended it to MudRadio and MudSwitch following ARIA best practices and MudBlazor code standards.

Summary of Changes

  1. MudCheckBox Refactor:

    • Removed manual aria-labelledby assignment from OnInitialized in MudCheckBox.razor.cs.
    • Moved aria-labelledby attribute assignment directly to the <input> element in MudCheckBox.razor.
    • Ensured visual labels and child content are hidden from screen readers via aria-hidden when a custom AriaLabel is provided, preventing redundant verbalization.
  2. MudRadio Implementation:

    • Added AriaLabel parameter to MudRadio.razor.cs.
    • Updated MudRadio.razor to include a screen-reader-only <span> for the label and linked it to the input via aria-labelledby.
    • Applied aria-hidden to the visible label/content when AriaLabel is set.
  3. MudSwitch Implementation:

    • Added AriaLabel parameter to MudSwitch.razor.cs.
    • Updated MudSwitch.razor with the same aria-labelledby and aria-hidden pattern used in the other components.
  4. Testing:

    • Verified existing CheckBox_AriaLabel_OverRides tests pass.
    • Added Radio_AriaLabel test in RadioTests.cs and Switch_AriaLabel test in SwitchTests.cs.
    • Created new test components: RadioAriaLabelTest.razor and SwitchAriaLabelTest.razor.

All three components now consistently handle ARIA labels by declaring them in the Razor file and correctly managing visibility for screen readers.

Checklist:

  • I've read the contribution guidelines
  • My code follows the style of this project
  • I've added or updated relevant unit tests

@mudbot mudbot bot added accessibility Accessibility concerns (ARIA, keyboard, focus, screen readers, contrast) enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library labels Feb 1, 2026
@danielchalmers danielchalmers changed the title yippee MudCheckBox, MudRadio, MudSwitch: Add or improve aria-label support Feb 1, 2026
Copy link
Member

@igotinfected igotinfected left a comment

Choose a reason for hiding this comment

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

LGTM! Only thing I noticed is that we have a mix of Behavior and Appearance category attributes for different aria properties in different components. IIRC those attributes are used to group properties together in the docs?

@danielchalmers danielchalmers merged commit 64847e1 into MudBlazor:dev Feb 4, 2026
7 checks passed
@danielchalmers danielchalmers deleted the maximum-quokka branch February 4, 2026 17:40
This was referenced Feb 20, 2026
This was referenced Feb 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility Accessibility concerns (ARIA, keyboard, focus, screen readers, contrast) enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants