Fix focus indicator contrast in templates

[Youssef1313]

Fix focus indicator contrast in templates

This fixes the color contrast for focus indicator in Blazor, Mvc, and Razor Pages templates.

Description

This is an accessibility issue where the color contrast of the keyboard focus indicator is low.

Blazor template (before fix):

Blazor template (after fix - tested with dotnet new blazor and dotnet new blazorwasm):

Mvc and Razor Pages:

Linked issue (intentionally not closing per instructions in the issue) -> #68228

Customer Impact

New applications created from templates are more compliant to accessibility rules.

Regression?

No

Risk

Low

Fix is manually tested, and it's only an update to templates, not a real product change. So existing applications updating to newer version are not impacted. This is only when creating a new application from template which reduces the risks.

Verification

Manual

Packaging changes reviewed?

N/A

[dotnet-policy-service]

Hi @Youssef1313. Please make sure you've updated the PR description to use the Shiproom Template. Also, make sure this PR is not marked as a draft and is ready-to-merge.

To learn more about how to prepare a servicing PR click here.

[Copilot]

🟢 Approval recommended

The changes are narrowly scoped CSS overrides in templates that correctly target existing markup and improve focus visibility without introducing behavioral risk.

Pull request overview

Updates several ASP.NET Core project templates to improve keyboard focus indicator contrast for primary navigation links, addressing accessibility/visibility issues in default template styling.

Changes:

• Add a high-contrast :focus-visible outline for navbar brand and nav links in MVC/Razor Pages “StarterWeb” templates.
• Add a high-contrast :focus-visible outline for sidebar nav links in Blazor templates (WASM and Blazor Web App variants).
• Remove conflicting focus box-shadow styling where the new outline is applied to ensure the intended indicator is consistently visible.

File summaries

File	Description
src/ProjectTemplates/Web.ProjectTemplates/content/StarterWeb-FSharp/wwwroot/css/site.css	Adds high-contrast :focus-visible outline styling for navbar brand/nav links in the F# MVC template.
src/ProjectTemplates/Web.ProjectTemplates/content/StarterWeb-CSharp/wwwroot/css/site.css	Adds high-contrast :focus-visible outline styling for navbar brand/nav links in the C# MVC template.
src/ProjectTemplates/Web.ProjectTemplates/content/RazorPagesWeb-CSharp/wwwroot/css/site.css	Adds high-contrast :focus-visible outline styling for navbar brand/nav links in the Razor Pages template.
src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Layout/NavMenu.razor.css	Adds high-contrast :focus-visible outline styling for sidebar nav links in the Blazor WASM template.
src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Layout/NavMenu.razor.css	Adds high-contrast :focus-visible outline styling for sidebar nav links in the Blazor Web App template.

Review details

• Files reviewed: 5/5 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

[ilonatommy]

@Youssef1313, what about net12? Do we have a PR that merges this to main?

[Youssef1313]

@Youssef1313, what about net12? Do we have a PR that merges this to main?

We don't need to. This will automatically flow to main via automation. See #68594

[artl93]

Approved. Accessibility.

[dotnet-policy-service]

Hi @Youssef1313. This PR was just approved to be included in the upcoming servicing release. Somebody from the @dotnet/aspnet-build team will get it merged when the branches are open. Until then, please make sure all the CI checks pass and the PR is reviewed.