From 8dcdbbdbe4de1e0c0da63fcfafd62c1d4672d922 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 6 Feb 2025 09:59:10 +0100
Subject: [PATCH 1/3] fix(1-3295): move skip link target, swap main -> div and
 div -> main

---
 frontend/src/component/layout/MainLayout/MainLayout.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
index f37789d0a967..f743bdc40dbf 100644
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx
@@ -33,7 +33,7 @@ const MainLayoutContainer = styled(Grid)(() => ({
     position: 'relative',
 }));
 
-const MainLayoutContentWrapper = styled('main')(({ theme }) => ({
+const MainLayoutContentWrapper = styled('div')(({ theme }) => ({
     margin: theme.spacing(0, 'auto'),
     flexGrow: 1,
     width: '100%',
@@ -80,7 +80,7 @@ const StyledImg = styled('img')(() => ({
     userSelect: 'none',
 }));
 
-const MainLayoutContentContainer = styled('div')(({ theme }) => ({
+const MainLayoutContentContainer = styled('main')(({ theme }) => ({
     height: '100%',
     padding: theme.spacing(0, 0, 6.5, 0),
     position: 'relative',
@@ -110,7 +110,6 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                     show={<Header />}
                 />
 
-                <SkipNavTarget />
                 <MainLayoutContainer>
                     <MainLayoutContentWrapper>
                         <ConditionallyRender
@@ -154,6 +153,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                                 <MainLayoutEventTimeline />
 
                                 <MainLayoutContent>
+                                    <SkipNavTarget />
                                     <MainLayoutContentContainer ref={ref}>
                                         <BreadcrumbNav />
                                         <Proclamation toast={uiConfig.toast} />

From 87cea75155e8c04a66a34c0cd177c044cac590c7 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 6 Feb 2025 09:59:38 +0100
Subject: [PATCH 2/3] fix(1-3295): make skip link more useful and accessible

---
 .../common/SkipNavLink/SkipNavTarget.tsx      | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/common/SkipNavLink/SkipNavTarget.tsx b/frontend/src/component/common/SkipNavLink/SkipNavTarget.tsx
index feeff614fe59..48c8c60972fe 100644
--- a/frontend/src/component/common/SkipNavLink/SkipNavTarget.tsx
+++ b/frontend/src/component/common/SkipNavLink/SkipNavTarget.tsx
@@ -1,5 +1,38 @@
+import { styled } from '@mui/material';
+
 export const SKIP_NAV_TARGET_ID = 'skip-nav-target-id';
 
+const SkipLinkTarget = styled('a')(({ theme }) => ({
+    clipPath: 'polygon(0 0, 0 0, 0 0, 0 0)',
+    boxSizing: 'border-box',
+    position: 'absolute',
+    margin: 0,
+    padding: 0,
+
+    top: 0,
+    left: 0,
+    width: '100%',
+
+    ':focus': {
+        clipPath: 'none',
+        zIndex: 999,
+        height: '80px',
+        lineHeight: '80px',
+        fontSize: '1.2rem',
+        textDecoration: 'none',
+        textAlign: 'center',
+
+        background: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+
+        outline: 'none',
+    },
+}));
+
 export const SkipNavTarget = () => {
-    return <div id={SKIP_NAV_TARGET_ID} />;
+    return (
+        <SkipLinkTarget href={`#${SKIP_NAV_TARGET_ID}`} id={SKIP_NAV_TARGET_ID}>
+            Start of main content
+        </SkipLinkTarget>
+    );
 };

From 314a57a60a8cc98ccade9ceb46d9fd4623acae87 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 6 Feb 2025 10:09:59 +0100
Subject: [PATCH 3/3] fix(1-3295): use theme font size

---
 frontend/src/component/common/SkipNavLink/SkipNavTarget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/component/common/SkipNavLink/SkipNavTarget.tsx b/frontend/src/component/common/SkipNavLink/SkipNavTarget.tsx
index 48c8c60972fe..c5882ffa385b 100644
--- a/frontend/src/component/common/SkipNavLink/SkipNavTarget.tsx
+++ b/frontend/src/component/common/SkipNavLink/SkipNavTarget.tsx
@@ -18,7 +18,7 @@ const SkipLinkTarget = styled('a')(({ theme }) => ({
         zIndex: 999,
         height: '80px',
         lineHeight: '80px',
-        fontSize: '1.2rem',
+        fontSize: theme.typography.body1.fontSize,
         textDecoration: 'none',
         textAlign: 'center',