Skip to content

MudTable: Add AriaLabel parameter for accessibility#11995

Merged
danielchalmers merged 4 commits intoMudBlazor:devfrom
dev-KingMaster:feat/11929-aria-label-add-to-table
Nov 1, 2025
Merged

MudTable: Add AriaLabel parameter for accessibility#11995
danielchalmers merged 4 commits intoMudBlazor:devfrom
dev-KingMaster:feat/11929-aria-label-add-to-table

Conversation

@dev-KingMaster
Copy link
Contributor

@dev-KingMaster dev-KingMaster commented Oct 24, 2025

Summary

  • Adds an AriaLabel parameter to MudTable to render an aria-label on the underlying HTML table for improved accessibility.
  • Updates the Table docs with an Accessibility section and example.
  • Adds a unit test to verify the attribute is rendered.

Motivation

  • Addresses accessibility gap requested in issue MudTable - Allow adding aria-label to the <table> element #11929.
  • Screen readers rely on an accessible name to identify the purpose of the table. This makes MudTable more usable with assistive technologies.
  • Default behavior remains unchanged; when not set, no attribute is rendered.

Changes

  • New parameter
    • Adds public string? AriaLabel { get; set; } on the base class so it’s available on all MudTable usages.
    • Path: src/MudBlazor/Components/Table/MudTableBase.cs
  • Table markup
    • Binds the new parameter to the element.
    • Path: src/MudBlazor/Components/Table/MudTable.razor:32
    • Change:
    • Unit test
      • Verifies that aria-label is omitted by default, then appears when set.
      • Path: src/MudBlazor.UnitTests/Components/TableTests.cs (method: TableAriaLabel_RendersOnTable)
    • Docs
      • Example: src/MudBlazor.Docs/Pages/Components/Table/Examples/TableAriaLabelExample.razor
      • Section: Adds “Accessibility” section to the Table page referencing the example.
      • Path: src/MudBlazor.Docs/Pages/Components/Table/TablePage.razor

      • Usage

      • Example:
        • …
      • Defaults to null; no markup change unless set.

      Notes

      • No visual changes; purely an accessibility enhancement.
      • No breaking changes.
      • No performance impact; single attribute render when provided.
      • Category: Table.Behavior.

      Testing

      • Added unit test: TableAriaLabel_RendersOnTable.
      • Ran tests locally; the new test passes.

      Fixes MudTable - Allow adding aria-label to the <table> element #11929

      Checklist

      • The PR is submitted to the correct branch (dev).
      • My code follows the style of this project.
      • I've added relevant tests or confirmed existing ones.

@mudbot mudbot bot changed the title 11929 issue fix with adding aria label to table MudTable: Add AriaLabel parameter for accessibility Oct 24, 2025
@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 Oct 24, 2025
gemini-code-assist[bot]
gemini-code-assist bot reviewed Oct 24, 2025
View reviewed changes
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request introduces an AriaLabel parameter to the MudTable component, enhancing accessibility by allowing developers to specify an aria-label for the underlying HTML table element. This enables screen readers to announce the purpose of the table, improving usability for users with assistive technologies. The changes include adding the new parameter to MudTableBase.cs, binding it in MudTable.razor, adding a unit test, and updating the documentation. I have provided one review comment to address a potential issue.

@dev-KingMaster
Copy link
Contributor Author

dev-KingMaster commented Oct 24, 2025

Hi @ScarletKuro Pipeline passed and waiting for approval. Thanks

@mudbot mudbot bot added the awaiting triage Needs maintainer review or assistance label Oct 24, 2025
@danielchalmers
Copy link
Member

danielchalmers commented Oct 24, 2025

Would we want labelledby too in the case of text already visible on screen? Should we consider support for <caption>?

@mudbot mudbot bot added needs: changes A maintainer has asked for further modifications to be made to this pull request and removed awaiting triage Needs maintainer review or assistance labels Oct 24, 2025
@galyni
Copy link

galyni commented Oct 25, 2025

Looks good!

A note on the validity of empty strings for aria-label: I had a doubt, since the html specs state that an empty string is different that the absence of the attribute. I feared that it causes unpredictable behaviour, like some assistive technologies shadowing an existing label, and others ignoring the attribute. But the name computation for accessible name is clear on that: an empty string must be ignored : https://w3c.github.io/accname/#computation-steps.

@dev-KingMaster
Copy link
Contributor Author

dev-KingMaster commented Oct 27, 2025

Looks good!

A note on the validity of empty strings for aria-label: I had a doubt, since the html specs state that an empty string is different that the absence of the attribute. I feared that it causes unpredictable behaviour, like some assistive technologies shadowing an existing label, and others ignoring the attribute. But the name computation for accessible name is clear on that: an empty string must be ignored : https://w3c.github.io/accname/#computation-steps.

@dev-KingMaster
Copy link
Contributor Author

dev-KingMaster commented Oct 27, 2025

Thanks! Agreed — per accname, empty aria-label is ignored. This PR follows the same pattern as MudMenu and others by binding the value directly. I’m happy to either keep it (consistent and spec-compliant) or update to omit the attribute when the value is empty/whitespace using string.IsNullOrWhiteSpace if that’s preferred. Let me know which you’d like; I can also add a brief note in the docs clarifying the empty-string behavior.

@dev-KingMaster
Copy link
Contributor Author

dev-KingMaster commented Oct 28, 2025

@danielchalmers @igotinfected Could you approve this pr?

Copilot AI reviewed Oct 30, 2025
View reviewed changes
Copy link
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

This PR adds accessibility support to MudTable by introducing an AriaLabel parameter that renders as the aria-label attribute on the HTML table element. It also includes a minor documentation correction.

  • Added AriaLabel parameter to MudTableBase class
  • Updated MudTable.razor to render the aria-label attribute
  • Added unit test to verify the AriaLabel parameter renders correctly
  • Created documentation example demonstrating accessibility usage
  • Fixed a minor text issue in documentation (removed zero-width space character)

Reviewed Changes

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

Show a summary per file
File Description
src/MudBlazor/Components/Table/MudTableBase.cs Adds AriaLabel property with XML documentation
src/MudBlazor/Components/Table/MudTable.razor Applies AriaLabel to the table element's aria-label attribute
src/MudBlazor.UnitTests/Components/TableTests.cs Adds test verifying AriaLabel renders correctly on the table element
src/MudBlazor.Docs/Pages/Components/Table/TablePage.razor Adds accessibility section to documentation and fixes text formatting
src/MudBlazor.Docs/Pages/Components/Table/Examples/TableAriaLabelExample.razor Creates example demonstrating AriaLabel usage

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

@igotinfected
Copy link
Member

igotinfected commented Oct 31, 2025

Would we want labelledby too in the case of text already visible on screen? Should we consider support for <caption>?

I think aria-labelledby and aria-describedby would be nice to have too but can always be done in a follow-up PR.

LGTM!

@mudbot mudbot bot removed the needs: changes A maintainer has asked for further modifications to be made to this pull request label Oct 31, 2025
@danielchalmers danielchalmers merged commit d7a7d5a into MudBlazor:dev Nov 1, 2025
16 checks passed
@danielchalmers
Copy link
Member

danielchalmers commented Nov 1, 2025

Thank you!

This was referenced Nov 5, 2025
Merged
Merged
This was referenced Dec 22, 2025
Closed
Closed
Closed
Closed
This was referenced Jan 3, 2026
Closed
Closed
Closed
Closed
Closed
This was referenced Jan 11, 2026
Closed
Closed
Merged
Closed
Closed
Closed
Closed
Open
This was referenced Feb 5, 2026
Closed
Open
Merged
Merged
Closed
Closed
This was referenced Feb 16, 2026
Open
Open
This was referenced Feb 23, 2026
Open
Open
Open
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@danielchalmers danielchalmers Awaiting requested review from danielchalmers

+2 more reviewers

@gemini-code-assist gemini-code-assist[bot] gemini-code-assist[bot] left review comments

@igotinfected igotinfected igotinfected approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

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

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

MudTable - Allow adding aria-label to the <table> element

5 participants

@dev-KingMaster @danielchalmers @galyni @igotinfected