[dev-v5] Add role attributes to button components for improved accessibility - #5073
Merged
Denis Voituron (dvoituron) merged 3 commits intoAug 4, 2026
Conversation
Denis Voituron (dvoituron)
requested a review
from Vincent Baaij (vnbaaij)
as a code owner
August 4, 2026 10:18
Denis Voituron (dvoituron)
enabled auto-merge (squash)
August 4, 2026 10:20
Contributor
There was a problem hiding this comment.
Pull request overview
Adds explicit role attributes to several Fluent UI Blazor button-related components to improve assistive-technology semantics, and updates the bUnit/Verify snapshot baselines to reflect the new rendered markup.
Changes:
- Added
role="button"/role="link"attributes to core button component render trees. - Updated Verify snapshot
.verified.razor.htmloutputs across Paginator, MessageBar, Layout, DataGrid, and Button tests to match the new attributes.
Reviewed changes
Copilot reviewed 24 out of 24 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/Core/Components/Paginator/FluentPaginatorTests.FluentPaginator_SetItemsPerPage.verified.razor.html | Snapshot updated: paginator navigation buttons now include role="button". |
| tests/Core/Components/Paginator/FluentPaginatorTests.FluentPaginator_Renders_WithDefaultState.verified.razor.html | Snapshot updated: paginator navigation buttons now include role="button". |
| tests/Core/Components/Paginator/FluentPaginatorTests.FluentPaginator_Renders_CustomSummaryTemplate.verified.razor.html | Snapshot updated: paginator navigation buttons now include role="button". |
| tests/Core/Components/Paginator/FluentPaginatorTests.FluentPaginator_Renders_CustomPaginationTextTemplate.verified.razor.html | Snapshot updated: paginator navigation buttons now include role="button". |
| tests/Core/Components/MessageBar/FluentMessageBarTests.FluentMessageBar_Layout_Notification.verified.razor.html | Snapshot updated: dismiss button now includes role="button". |
| tests/Core/Components/MessageBar/FluentMessageBarTests.FluentMessageBar_Layout_Line-SingleLine.verified.razor.html | Snapshot updated: dismiss button now includes role="button". |
| tests/Core/Components/MessageBar/FluentMessageBarTests.FluentMessageBar_Layout_Line-MultiLine.verified.razor.html | Snapshot updated: dismiss button now includes role="button". |
| tests/Core/Components/MessageBar/FluentMessageBarTests.FluentMessageBar_Intent-Warning.verified.razor.html | Snapshot updated: dismiss button now includes role="button". |
| tests/Core/Components/MessageBar/FluentMessageBarTests.FluentMessageBar_Intent-Success.verified.razor.html | Snapshot updated: dismiss button now includes role="button". |
| tests/Core/Components/MessageBar/FluentMessageBarTests.FluentMessageBar_Intent-Info.verified.razor.html | Snapshot updated: dismiss button now includes role="button". |
| tests/Core/Components/MessageBar/FluentMessageBarTests.FluentMessageBar_Intent-Error.verified.razor.html | Snapshot updated: dismiss button now includes role="button". |
| tests/Core/Components/MessageBar/FluentMessageBarTests.FluentMessageBar_Intent-Custom.verified.razor.html | Snapshot updated: dismiss button now includes role="button". |
| tests/Core/Components/MessageBar/FluentMessageBarTests.FluentMessageBar_ActionsTemplate.verified.razor.html | Snapshot updated: dismiss button now includes role="button". |
| tests/Core/Components/Layout/FluentLayoutTests.FluentLayout_Hamburger_OutsideLayout.verified.razor.html | Snapshot updated: hamburger/close buttons now include role="button". |
| tests/Core/Components/Layout/FluentLayoutTests.FluentLayout_Hamburger_Default.verified.razor.html | Snapshot updated: hamburger/close buttons now include role="button". |
| tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_HeaderCellAsButtonWithMenu.verified.razor.html | Snapshot updated: header sort/menu trigger now includes role="button". |
| tests/Core/Components/Button/FluentSplitButtonTests.FluentSplitButton_IconStart.verified.razor.html | Snapshot updated: menu trigger now includes role="button". |
| tests/Core/Components/Button/FluentCompoundButtonTests.FluentCompoundButton_Title.verified.razor.html | Snapshot updated: compound button now includes role="button". |
| tests/Core/Components/Button/FluentButtonTests.FluentButton_Title.verified.razor.html | Snapshot updated: button now includes role="button". |
| src/Core/Components/Button/FluentToggleButton.razor | Adds conditional role="button" rendering to <fluent-toggle-button>. |
| src/Core/Components/Button/FluentMenuButton.razor | Adds conditional role="button" rendering to <fluent-menu-button>. |
| src/Core/Components/Button/FluentCompoundButton.razor | Adds conditional role="button" rendering to <fluent-compound-button>. |
| src/Core/Components/Button/FluentButton.razor | Adds conditional role="button" rendering to <fluent-button>. |
| src/Core/Components/Button/FluentAnchorButton.razor | Adds conditional role="link" rendering to <fluent-anchor-button>. |
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.8%
Microsoft.FluentUI.AspNetCore.Components.Charts - 100%
|
Denis Voituron (dvoituron)
disabled auto-merge
August 4, 2026 10:29
Denis Voituron (dvoituron)
enabled auto-merge (squash)
August 4, 2026 10:32
Vincent Baaij (vnbaaij)
approved these changes
Aug 4, 2026
Denis Voituron (dvoituron)
deleted the
users/dvoituron/dev-v5/accessibility/button-role
branch
August 4, 2026 13:46
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
[dev-v5] Add role attributes to button components for improved accessibility
Enhance accessibility by adding appropriate role attributes to button components. This change ensures that screen readers and other assistive technologies can better interpret the button elements, improving the overall user experience for individuals with disabilities.