From 4a4f9798c0e025e3ef45a8d53f5d846a89ac4e54 Mon Sep 17 00:00:00 2001
From: Nkeiruka <nkeiruka.whenu@canonical.com>
Date: Tue, 22 Oct 2024 15:53:49 +0100
Subject: [PATCH] feat: [WD-15078] Add skip to content button

Signed-off-by: Nkeiruka <nkeiruka.whenu@canonical.com>
---
 src/Root.tsx                    | 7 ++++++-
 src/components/BaseLayout.tsx   | 2 +-
 src/components/CustomLayout.tsx | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/Root.tsx b/src/Root.tsx
index 2c85ad282b..d1281f3660 100644
--- a/src/Root.tsx
+++ b/src/Root.tsx
@@ -1,6 +1,10 @@
 import { FC } from "react";
 import Navigation from "components/Navigation";
-import { Application, QueuedNotification } from "@canonical/react-components";
+import {
+  Application,
+  QueuedNotification,
+  SkipLink,
+} from "@canonical/react-components";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { AuthProvider } from "context/auth";
 import { EventQueueProvider } from "context/eventQueue";
@@ -33,6 +37,7 @@ const Root: FC = () => {
                 <OperationsProvider>
                   <EventQueueProvider>
                     <Application id="l-application">
+                      <SkipLink mainId="main-content" />
                       <Navigation />
                       <ErrorBoundary fallback={ErrorPage}>
                         <App />
diff --git a/src/components/BaseLayout.tsx b/src/components/BaseLayout.tsx
index 29cc94db2f..9e7cfd171c 100644
--- a/src/components/BaseLayout.tsx
+++ b/src/components/BaseLayout.tsx
@@ -17,7 +17,7 @@ const BaseLayout: FC<Props> = ({
   contentClassName,
 }: Props) => {
   return (
-    <AppMain className={mainClassName}>
+    <AppMain className={mainClassName} id="main-content">
       <Panel
         title={title}
         controls={controls}
diff --git a/src/components/CustomLayout.tsx b/src/components/CustomLayout.tsx
index 5adceb09a8..78952cfd04 100644
--- a/src/components/CustomLayout.tsx
+++ b/src/components/CustomLayout.tsx
@@ -15,7 +15,7 @@ const CustomLayout: FC<Props> = ({
   contentClassName,
 }: Props) => {
   return (
-    <AppMain className={mainClassName}>
+    <AppMain className={mainClassName} id="main-content">
       <Panel contentClassName={contentClassName} header={header}>
         {children}
       </Panel>