Skip to content

MudDataGrid: Add default and customizable ARIA semantics to select column#12911

Merged
danielchalmers merged 18 commits intoMudBlazor:devfrom
versile2:codex/add-default-aria-labels
Apr 10, 2026
Merged

MudDataGrid: Add default and customizable ARIA semantics to select column#12911
danielchalmers merged 18 commits intoMudBlazor:devfrom
versile2:codex/add-default-aria-labels

Conversation

@versile2
Copy link
Copy Markdown
Contributor

@versile2 versile2 commented Mar 27, 2026

Overview

This PR improves accessibility for row selection in MudDataGrid by:

  • Providing built-in, localized ARIA labels for select-all and row selection checkboxes.
  • Allowing per-row ARIA label customization via the new AriaLabelFunc parameter on SelectColumn.
  • Exposing aria-selected only for rows that participate in SelectColumn-based selection, and omitting it for disabled rows.

Key Changes

  • Default ARIA Labels:
    • Row selection checkboxes use a localized "Select row" label by default.
    • Header/footer select-all checkboxes use a localized "Select all rows" label.
  • Customizable Labels:
    • SelectColumn accepts AriaLabelFunc for custom per-row accessible names.
    • If AriaLabelFunc returns null/empty, the default label is used.
  • Selection Semantics:
    • aria-selected is rendered only for selectable rows when a SelectColumn is present.
    • Disabled rows do not expose selection state.
  • Documentation:
    • Docs updated to describe the new ARIA behavior and demonstrate AriaLabelFunc.
  • Testing:
    • Unit tests added for default/custom labels, fallback logic, and aria-selected behavior.

Motivation

Previously, DataGrid selection checkboxes lacked accessible names and did not expose selection state, making them difficult to use with assistive technology. This PR ensures all selection controls are accessible by default and easily customizable.

Example Usage

<MudDataGrid T="Element" Items="@Elements.Take(10)" MultiSelection="true" SelectedItemsChanged="@SelectedItemsChanged">
    <Columns>
        <SelectColumn DisabledFunc="@(item => item.Number % 5 == 0)" AriaLabelFunc="@(item => $\"Select {item.Name}\")" />
        <PropertyColumn Property="x => x.Number" Title="Nr" />
        <PropertyColumn Property="x => x.Sign" />
        <PropertyColumn Property="x => x.Name" />
        <PropertyColumn Property="x => x.Position" />
        <PropertyColumn Property="x => x.Molar" Title="Molar mass" />
    </Columns>
</MudDataGrid>

Checklist

  • Accessible ARIA labels for all selection checkboxes
  • Customizable per-row ARIA labels
  • aria-selected only for selectable rows
  • Docs and tests updated

This PR brings MudDataGrid selection controls up to modern accessibility standards while remaining easy to use and extend.

@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 localization Translations, locale formats, RTL layout, calendars labels Mar 28, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Adds built-in and customizable ARIA semantics for SelectColumn-based row selection in MudDataGrid, improving accessible naming for selection checkboxes and exposing selection state via aria-selected only when checkbox selection controls are present.

Changes:

  • Added localized default labels for row and select-all selection checkboxes, plus AriaLabelFunc for per-row customization.
  • Derived default row checkbox labels from visible value-bearing columns and disambiguated duplicates.
  • Rendered aria-selected on data rows only when a SelectColumn is present and the row is selectable; expanded unit tests and updated docs.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
src/MudBlazor/Resources/LanguageResource.resx Adds new localization keys for “Select row” / “Select all rows”.
src/MudBlazor/Components/DataGrid/SelectColumn.razor.cs Adds AriaLabelFunc + localizer-backed label resolution helpers.
src/MudBlazor/Components/DataGrid/SelectColumn.razor Wires default/custom ARIA labels into row and select-all checkboxes.
src/MudBlazor/Components/DataGrid/MudDataGrid.razor.cs Adds row label derivation/disambiguation + selection-state helpers.
src/MudBlazor/Components/DataGrid/MudDataGrid.razor Plumbs per-row label data into cell creation.
src/MudBlazor/Components/DataGrid/DataGridVirtualizeRow.razor Adds aria-selected row attributes + computes/passes row checkbox labels.
src/MudBlazor/Components/DataGrid/CellContext.cs Carries per-row checkbox label through CellContext.
src/MudBlazor/Components/DataGrid/Cell.cs Creates CellContext with optional per-row checkbox label.
src/MudBlazor.UnitTests/Components/DataGridTests.cs Adds coverage for default/custom labels, duplicates, and aria-selected behavior.
src/MudBlazor.Docs/Pages/Components/DataGrid/Examples/DataGridSelectionExample.razor Updates example to demonstrate AriaLabelFunc.
src/MudBlazor.Docs/Pages/Components/DataGrid/DataGridPage.razor Documents the new ARIA label behavior and customization hook.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/MudBlazor/Components/DataGrid/MudDataGrid.razor.cs Outdated
Comment thread src/MudBlazor/Components/DataGrid/MudDataGrid.razor.cs Outdated
Comment thread src/MudBlazor/Components/DataGrid/MudDataGrid.razor.cs Outdated
Comment thread src/MudBlazor/Components/DataGrid/DataGridVirtualizeRow.razor Outdated
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated no new comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@versile2 versile2 marked this pull request as ready for review April 7, 2026 19:40
@mudbot mudbot Bot changed the title Add default and customizable ARIA semantics to DataGrid select column MudDataGrid: Add default and customizable ARIA semantics to select column Apr 7, 2026
@versile2 versile2 requested a review from danielchalmers April 7, 2026 20:49
@danielchalmers
Copy link
Copy Markdown
Member

I'll have to save this for the next release so I have more time to review it

@danielchalmers
Copy link
Copy Markdown
Member

Simplifications suggested by GPT-5.4:

  • Keep the semantics, drop the heuristics. Default row checkbox label is always localized "Select row", header/footer stay "Select all rows", and AriaLabelFunc remains the escape hatch. This deletes the row-label scan, duplicate tracking, and the Cell/CellContext plumbing entirely.
  • Keep the behavior, but move ownership into SelectColumn. Let SelectColumn ask the grid for a single default label for context.Item, instead of precomputing a dictionary in the row renderer. Same feature set, much less cross-component plumbing.
  • Replace implicit inference with an explicit API. A RowLabelFunc or SelectionTextFunc is much easier to explain, test, and maintain than “first visible PropertyColumn, skip templates, dedupe duplicates, fallback if blank”.
  • Reuse visible cell content instead of rebuilding strings. Give the first label-bearing cell an id and point the checkbox at it with aria-labelledby or aria-describedby. That keeps the accessible text aligned with rendered content and avoids CellContent(item)?.ToString() drift.
  • If you want the smallest possible PR, question whether aria-selected belongs here yet. I didn’t find grid roles on the DataGrid, so row-level aria-selected may be less valuable than just giving the checkboxes good names and checked state. That would cut the row-attribute logic down to almost nothing.
  • If duplicate disambiguation is the main source of churn, consider dropping it. Repeated accessible names are usually tolerable; the checkbox is already inside a row with visible context. B-1 / B-2 feels more like over-specification than core accessibility value.
  • If duplicate disambiguation must stay, use row index directly instead of a two-pass duplicate scan. "Select row B (row 2)" is cheaper than counting duplicate labels first.
  • Pull label inference into a small pure helper and test that helper directly. Right now the bUnit tests are asserting a lot of implementation detail, which is making the PR feel larger than the feature.

I simplified the DataGrid selection ARIA implementation to the leaner model you asked for. SelectColumn now uses only two default labels, "Select row" and "Select all rows", with AriaLabelFunc still available to override per-row labels. The row-content inference pipeline was removed from SelectColumn.razor.cs, MudDataGrid.razor.cs, MudDataGrid.razor, DataGridVirtualizeRow.razor, Cell.cs, and CellContext.cs. aria-selected behavior stayed scoped to SelectColumn selection semantics, and disabled rows still omit it.

I also collapsed the tests in DataGridTests.cs to match the simpler behavior and updated the docs wording in DataGridPage.razor so it no longer claims labels are derived from row content.
@danielchalmers
Copy link
Copy Markdown
Member

🤖💬 e48c593 keeps the key accessibility improvements but removes the parts that were doing too much guessing.

What stays:

  • built-in labels for row and select-all checkboxes
  • AriaLabelFunc for explicit per-row customization
  • aria-selected only when selection semantics come from SelectColumn
  • no aria-selected for disabled rows

What changed:

  • the default row label is always the localized "Select row" instead of trying to infer text from visible row content

Why this is better:

  • it preserves the accessibility win without adding a heuristic system
  • it removes the extra plumbing through MudDataGrid, row rendering, Cell, and CellContext
  • it avoids brittle behavior around TemplateColumn, hidden columns, duplicate values, formatting, and future column types
  • it leaves richer labeling available through the explicit API instead of guesswork
  • it makes the code, tests, and docs much smaller and easier to maintain

Copy link
Copy Markdown
Contributor Author

@versile2 versile2 left a comment

Choose a reason for hiding this comment

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

Verdict:

The ARIA implementation is valid and accessible.
For optimal user experience, row-specific labels are preferred, but "Select row" is an acceptable fallback and meets minimum accessibility requirements.

Final Verdict & Feedback:

The PR is focused, well-documented, and thoroughly tested.
Accessibility is improved and customizable.
No critical issues found; all review checklist items are satisfied.****

@danielchalmers danielchalmers merged commit 2397984 into MudBlazor:dev Apr 10, 2026
11 checks passed
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 localization Translations, locale formats, RTL layout, calendars

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants