From 6a5d495a8f7c4dc8ff6744594e13be2d8243ef3a Mon Sep 17 00:00:00 2001
From: Luke Latham <1622880+guardrex@users.noreply.github.com>
Date: Thu, 15 Jul 2021 05:48:26 -0500
Subject: [PATCH 1/3] FocusOnNavigate for Blazor Router

---
 aspnetcore/blazor/fundamentals/routing.md | 26 +++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/aspnetcore/blazor/fundamentals/routing.md b/aspnetcore/blazor/fundamentals/routing.md
index 91e2a08a19b3..9805fbbc05a0 100644
--- a/aspnetcore/blazor/fundamentals/routing.md
+++ b/aspnetcore/blazor/fundamentals/routing.md
@@ -66,6 +66,32 @@ Components support multiple route templates using multiple [`@page` directives](
 > [!NOTE]
 > The <xref:Microsoft.AspNetCore.Components.Routing.Router> doesn't interact with query string values. To work with query strings, see the [Query string and parse parameters](#query-string-and-parse-parameters) section.
 
+::: moniker range=">= aspnetcore-6.0"
+
+## Focus an element on navigation
+
+Use the `FocusOnNavigate` component to set the UI focus to an element based on a CSS selector after navigating from one page to another. You can see the `FocusOnNavigate` component in use by the `App` component of an app generated from the Blazor project template.
+
+`App.razor`:
+
+```razor
+<Router AppAssembly="@typeof(Program).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+    </Found>
+    <NotFound>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p role="alert">Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>
+```
+
+When the `Router` component navigates to a new page, the `FocusOnNavigate` component sets the focus to the page's top-level header (`<h1>`). This is a common strategy for ensuring that page navigations are announced when using a screen reader.
+
+::: moniker-end
+
 ## Provide custom content when content isn't found
 
 The <xref:Microsoft.AspNetCore.Components.Routing.Router> component allows the app to specify custom content if content isn't found for the requested route.

From 336b74b7525cc21b1b50873a17a1d3e6ff1296dd Mon Sep 17 00:00:00 2001
From: Luke Latham <1622880+guardrex@users.noreply.github.com>
Date: Thu, 15 Jul 2021 05:51:02 -0500
Subject: [PATCH 2/3] Updates

---
 aspnetcore/toc.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/aspnetcore/toc.yml b/aspnetcore/toc.yml
index 0c85284b5e92..ce7228617623 100644
--- a/aspnetcore/toc.yml
+++ b/aspnetcore/toc.yml
@@ -465,6 +465,8 @@
               href: blazor/components/cascading-values-and-parameters.md#cascadingvalue-component
             - name: ErrorBoundary
               href: blazor/fundamentals/handle-errors.md#error-boundaries
+            - name: FocusOnNavigate
+              href: blazor/fundamentals/routing.md#focus-an-element-on-navigation
             - name: InputCheckbox
               href: blazor/forms-validation.md#built-in-form-components
             - name: InputDate

From 9a1d576258245296818ec3af53a2afe7dd40e640 Mon Sep 17 00:00:00 2001
From: Luke Latham <1622880+guardrex@users.noreply.github.com>
Date: Thu, 15 Jul 2021 05:54:59 -0500
Subject: [PATCH 3/3] Updates

---
 aspnetcore/blazor/fundamentals/routing.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/aspnetcore/blazor/fundamentals/routing.md b/aspnetcore/blazor/fundamentals/routing.md
index 9805fbbc05a0..fa7e1f0d4411 100644
--- a/aspnetcore/blazor/fundamentals/routing.md
+++ b/aspnetcore/blazor/fundamentals/routing.md
@@ -70,7 +70,7 @@ Components support multiple route templates using multiple [`@page` directives](
 
 ## Focus an element on navigation
 
-Use the `FocusOnNavigate` component to set the UI focus to an element based on a CSS selector after navigating from one page to another. You can see the `FocusOnNavigate` component in use by the `App` component of an app generated from the Blazor project template.
+Use the `FocusOnNavigate` component to set the UI focus to an element based on a CSS selector after navigating from one page to another. You can see the `FocusOnNavigate` component in use by the `App` component of an app generated from a Blazor project template.
 
 `App.razor`:
 
@@ -88,7 +88,7 @@ Use the `FocusOnNavigate` component to set the UI focus to an element based on a
 </Router>
 ```
 
-When the `Router` component navigates to a new page, the `FocusOnNavigate` component sets the focus to the page's top-level header (`<h1>`). This is a common strategy for ensuring that page navigations are announced when using a screen reader.
+When the preceding `Router` component navigates to a new page, the `FocusOnNavigate` component sets the focus to the page's top-level header (`<h1>`). This is a common strategy for ensuring that page navigations are announced when using a screen reader.
 
 ::: moniker-end