Skip to content

Commit f72a31b

Browse files
SteveSandersonMSSteveSandersonMS
authored
Improve accessibility in Blazor templates (#33470)
1 parent bbc675f commit f72a31b

File tree

18 files changed

+71
-71
lines changed

18 files changed

+71
-71
lines changed

‎src/ProjectTemplates/BlazorTemplates.Tests/BlazorServerTemplateTest.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ private async Task TestBasicNavigation(Project project, IPage page)
148148
await socket.WaitForEventAsync(WebSocketEvent.FrameReceived);
149149
await socket.WaitForEventAsync(WebSocketEvent.FrameSent);
150150

151-
await page.WaitForSelectorAsync("ul");
151+
await page.WaitForSelectorAsync("nav");
152152
// <title> element gets project ID injected into it during template execution
153153
Assert.Equal(project.ProjectName.Trim(), (await page.GetTitleAsync()).Trim());
154154

‎src/ProjectTemplates/BlazorTemplates.Tests/BlazorWasmTemplateTest.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -449,7 +449,7 @@ protected async Task BuildAndRunTest(string appName, Project project, BrowserKin
449449

450450
private async Task TestBasicNavigation(string appName, IPage page, bool usesAuth = false, bool skipFetchData = false)
451451
{
452-
await page.WaitForSelectorAsync("ul");
452+
await page.WaitForSelectorAsync("nav");
453453

454454
// <title> element gets project ID injected into it during template execution
455455
Assert.Equal(appName.Trim(), (await page.GetTitleAsync()).Trim());

‎src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/App.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</Found>
66
<NotFound>
77
<LayoutView Layout="@typeof(MainLayout)">
8-
<p>Sorry, there's nothing at this address.</p>
8+
<p role="alert">Sorry, there's nothing at this address.</p>
99
</LayoutView>
1010
</NotFound>
1111
</Router>
@@ -17,7 +17,7 @@
1717
</Found>
1818
<NotFound>
1919
<LayoutView Layout="@typeof(MainLayout)">
20-
<p>Sorry, there's nothing at this address.</p>
20+
<p role="alert">Sorry, there's nothing at this address.</p>
2121
</LayoutView>
2222
</NotFound>
2323
</Router>

‎src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Pages/Counter.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<h1>Counter</h1>
44

5-
<p>Current count: @currentCount</p>
5+
<p role="status">Current count: @currentCount</p>
66

77
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
88

‎src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Shared/MainLayout.Auth.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
<NavMenu />
66
</div>
77

8-
<div class="main">
8+
<main>
99
<div class="top-row px-4 auth">
1010
<LoginDisplay />
1111
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
1212
</div>
1313

14-
<div class="content px-4">
14+
<article class="content px-4">
1515
@Body
16-
</div>
17-
</div>
16+
</article>
17+
</main>
1818
</div>

‎src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Shared/MainLayout.NoAuth.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
<NavMenu />
66
</div>
77

8-
<div class="main">
8+
<main>
99
<div class="top-row px-4">
1010
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
1111
</div>
1212

13-
<div class="content px-4">
13+
<article class="content px-4">
1414
@Body
15-
</div>
16-
</div>
15+
</article>
16+
</main>
1717
</div>

‎src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Shared/MainLayout.razor.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
flex-direction: column;
55
}
66

7-
.main {
7+
main {
88
flex: 1;
99
}
1010

@@ -63,7 +63,7 @@
6363
z-index: 1;
6464
}
6565

66-
.main > div {
66+
.top-row, article {
6767
padding-left: 2rem !important;
6868
padding-right: 1.5rem !important;
6969
}

‎src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Shared/NavMenu.CallsMicrosoftGraph.razor‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
<div class="top-row pl-4 navbar navbar-dark">
22
<a class="navbar-brand" href="">BlazorServerWeb-CSharp</a>
3-
<button class="navbar-toggler" @onclick="ToggleNavMenu">
3+
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
44
<span class="navbar-toggler-icon"></span>
55
</button>
66
</div>
77

88
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
9-
<ul class="nav flex-column">
10-
<li class="nav-item px-3">
9+
<nav class="flex-column">
10+
<div class="nav-item px-3">
1111
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
1212
<span class="oi oi-home" aria-hidden="true"></span> Home
1313
</NavLink>
14-
</li>
15-
<li class="nav-item px-3">
14+
</div>
15+
<div class="nav-item px-3">
1616
<NavLink class="nav-link" href="counter">
1717
<span class="oi oi-plus" aria-hidden="true"></span> Counter
1818
</NavLink>
19-
</li>
20-
<li class="nav-item px-3">
19+
</div>
20+
<div class="nav-item px-3">
2121
<NavLink class="nav-link" href="fetchdata">
2222
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
2323
</NavLink>
24-
</li>
25-
<li class="nav-item px-3">
24+
</div>
25+
<div class="nav-item px-3">
2626
<NavLink class="nav-link" href="showprofile">
2727
<span class="oi oi-list-rich" aria-hidden="true"></span> Show profile
2828
</NavLink>
29-
</li>
30-
</ul>
29+
</div>
30+
</nav>
3131
</div>
3232

3333
@code {

‎src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Shared/NavMenu.CallsWebApi.razor‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
<div class="top-row pl-4 navbar navbar-dark">
22
<a class="navbar-brand" href="">BlazorServerWeb-CSharp</a>
3-
<button class="navbar-toggler" @onclick="ToggleNavMenu">
3+
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
44
<span class="navbar-toggler-icon"></span>
55
</button>
66
</div>
77

88
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
9-
<ul class="nav flex-column">
10-
<li class="nav-item px-3">
9+
<nav class="flex-column">
10+
<div class="nav-item px-3">
1111
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
1212
<span class="oi oi-home" aria-hidden="true"></span> Home
1313
</NavLink>
14-
</li>
15-
<li class="nav-item px-3">
14+
</div>
15+
<div class="nav-item px-3">
1616
<NavLink class="nav-link" href="counter">
1717
<span class="oi oi-plus" aria-hidden="true"></span> Counter
1818
</NavLink>
19-
</li>
20-
<li class="nav-item px-3">
19+
</div>
20+
<div class="nav-item px-3">
2121
<NavLink class="nav-link" href="fetchdata">
2222
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
2323
</NavLink>
24-
</li>
25-
<li class="nav-item px-3">
24+
</div>
25+
<div class="nav-item px-3">
2626
<NavLink class="nav-link" href="callwebapi">
2727
<span class="oi oi-list-rich" aria-hidden="true"></span> Call Web API
2828
</NavLink>
29-
</li>
30-
</ul>
29+
</div>
30+
</nav>
3131
</div>
3232

3333
@code {

‎src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Shared/NavMenu.NoGraphOrApi.razor‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
<div class="top-row pl-4 navbar navbar-dark">
22
<a class="navbar-brand" href="">BlazorServerWeb-CSharp</a>
3-
<button class="navbar-toggler" @onclick="ToggleNavMenu">
3+
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
44
<span class="navbar-toggler-icon"></span>
55
</button>
66
</div>
77

88
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
9-
<ul class="nav flex-column">
10-
<li class="nav-item px-3">
9+
<nav class="flex-column">
10+
<div class="nav-item px-3">
1111
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
1212
<span class="oi oi-home" aria-hidden="true"></span> Home
1313
</NavLink>
14-
</li>
15-
<li class="nav-item px-3">
14+
</div>
15+
<div class="nav-item px-3">
1616
<NavLink class="nav-link" href="counter">
1717
<span class="oi oi-plus" aria-hidden="true"></span> Counter
1818
</NavLink>
19-
</li>
20-
<li class="nav-item px-3">
19+
</div>
20+
<div class="nav-item px-3">
2121
<NavLink class="nav-link" href="fetchdata">
2222
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
2323
</NavLink>
24-
</li>
25-
</ul>
24+
</div>
25+
</nav>
2626
</div>
2727

2828
@code {

0 commit comments

Comments
 (0)