Repository navigation
Give QuickGrid paginator navigation an accessible name - #70002
snemeckayova wants to merge 2 commits into
Conversation
There was a problem hiding this comment.
🔵 Needs a closer look
No blocking defects were identified, but browser validation remains unverified and the available review evidence does not establish readiness for automated approval.
No open issues 🎉
What changed in this PR
This PR gives QuickGrid paginator navigation landmarks a default accessible name and lets applications provide localized or grid-specific names.
Changes:
- Adds the default navigation label “Pagination” and an
AdditionalAttributesparameter for application overrides. - Documents and records the new public parameter.
- Adds accessible-name assertions for link navigation, compatibility button mode, and static server rendering.
| File | Description |
|---|---|
| src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/QuickGrid/QuickGridInteractive.razor | Adds custom-summary and application-supplied naming scenarios. |
| src/Components/test/E2ETest/Tests/QuickGridNoInteractivityTest.cs | Checks the default accessible name in static rendering. |
| src/Components/test/E2ETest/Tests/QuickGridInteractiveTest.cs | Checks default and overridden names in link mode. |
| src/Components/test/E2ETest/Tests/QuickGridInteractiveCompatTest.cs | Checks the same naming scenarios in compatibility mode. |
| src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/PublicAPI.Unshipped.txt | Records the new parameter’s public accessors. |
| src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/Pagination/Paginator.razor.cs | Declares and documents AdditionalAttributes. |
| src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/Pagination/Paginator.razor | Applies the default label and supplied attributes to the navigation element. |
Review effort: Balanced
| <div class="labelled-paginator"> | ||
| <Paginator State="@pagination2" aria-labelledby="people-pages" /> | ||
| </div> |
There was a problem hiding this comment.
Do we need to have this third paginator with the aria-labelledby? If yes, then can we have it similarly to what Virtualize does with the anchor mode tests with buttons?
There was a problem hiding this comment.
I would go even further: why do we need the 2nd paginator? It is a bit more convenient for the user but we're shipping basic components. I think it's fine to have only one paginator. E.g. FluentUI has only one https://github.com/microsoft/fluentui-blazor/blob/3549cf4ed44629a6169cd46ae75b3011b8e21326/examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridTypical.razor#L55
There was a problem hiding this comment.
@ilonatommy this test particularly tests that two paginators work with one quickgrid with the url-based navigation, while it wasn't possible previously
There was a problem hiding this comment.
I see now that we used to ship 2 even before accessibility fix. Then 2 is fine.
| [Theory] | ||
| [InlineData(".first-paginator", "Pagination")] | ||
| [InlineData(".top-paginator", "Pagination")] | ||
| [InlineData(".bottom-paginator", "People pages")] | ||
| [InlineData(".labelled-paginator", "More people pages")] | ||
| public void PaginatorNavigationHasAccessibleName(string selector, string expectedName) | ||
| { | ||
| Navigate($"{ServerPathBase}/quickgrid-interactive"); | ||
|
|
||
| Browser.Equal(expectedName, () => Assert.IsAssignableFrom<WebElement>(Browser.FindElement(By.CssSelector($"{selector} .paginator nav"))).ComputedAccessibleLabel); | ||
| } |
There was a problem hiding this comment.
nit: Can have one long E2E test that will test all paginators instead of having 4?
Name Paginator navigation landmarks and support application-supplied names.
Description
Paginator currently renders a navigation landmark without an accessible name,
making it difficult to distinguish from other navigation regions on a page.
This change:
aria-label or aria-labelledby, including localized names or names that
distinguish paginators for different grids.
aria-label overrides, and aria-labelledby in both link and compatibility
button modes, plus default naming in static server rendering.
Pagination behavior, control labels, styling, and layout remain unchanged.
Fixes dotnet/aspnetcore-scenario-tests#152