From 7e0f558fbc37554eb3433ac970d748dc266f208b Mon Sep 17 00:00:00 2001
From: snehaljos <joyalsnehal3421@gmail.com>
Date: Sat, 24 Jun 2023 09:51:16 +0530
Subject: [PATCH 1/2] #1804 issue fix

Signed-off-by: snehaljos <joyalsnehal3421@gmail.com>
---
 .changeset/purple-feet-approve.md                      |  5 +++++
 .../core-components/src/layout/Content/Content.tsx     |  5 -----
 packages/core-components/src/layout/Header/Header.tsx  | 10 +++++++++-
 3 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/purple-feet-approve.md

diff --git a/.changeset/purple-feet-approve.md b/.changeset/purple-feet-approve.md
new file mode 100644
index 0000000000..3d4fae478c
--- /dev/null
+++ b/.changeset/purple-feet-approve.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+The 'Skip to content' button on click focus on the main article tag and skip the h1 tag. Users are not able to identify which page they are currently. Now this minor fix will change the behaviour o the button and focus on the h1 tag on the page
diff --git a/packages/core-components/src/layout/Content/Content.tsx b/packages/core-components/src/layout/Content/Content.tsx
index a26f74710d..f949e0d3fc 100644
--- a/packages/core-components/src/layout/Content/Content.tsx
+++ b/packages/core-components/src/layout/Content/Content.tsx
@@ -17,7 +17,6 @@
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
-import { useContent } from '../Sidebar';
 
 /** @public */
 export type BackstageContentClassKey = 'root' | 'stretch' | 'noPadding';
@@ -64,13 +63,9 @@ type Props = {
 export function Content(props: PropsWithChildren<Props>) {
   const { className, stretch, noPadding, children, ...restProps } = props;
 
-  const { contentRef } = useContent();
-
   const classes = useStyles();
   return (
     <article
-      ref={contentRef}
-      tabIndex={-1}
       {...restProps}
       className={classNames(classes.root, className, {
         [classes.stretch]: stretch,
diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx
index 1badb4eb98..cd2f281d65 100644
--- a/packages/core-components/src/layout/Header/Header.tsx
+++ b/packages/core-components/src/layout/Header/Header.tsx
@@ -25,6 +25,7 @@ import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from '../../components/Link';
 import { Breadcrumbs } from '../Breadcrumbs';
+import { useContent } from '../Sidebar';
 
 /** @public */
 export type HeaderClassKey =
@@ -157,8 +158,15 @@ const TypeFragment = ({
 };
 
 const TitleFragment = ({ pageTitle, classes, tooltip }: TitleFragmentProps) => {
+  const { contentRef } = useContent();
+
   const FinalTitle = (
-    <Typography className={classes.title} variant="h1">
+    <Typography
+      ref={contentRef}
+      tabIndex={-1}
+      className={classes.title}
+      variant="h1"
+    >
       {pageTitle}
     </Typography>
   );

From 7b049ccd08c0662a83e2c99df1aabdfd87d1fcae Mon Sep 17 00:00:00 2001
From: Ben Lambert <ben@blam.sh>
Date: Tue, 4 Jul 2023 15:56:58 +0200
Subject: [PATCH 2/2] Update purple-feet-approve.md

Signed-off-by: Ben Lambert <ben@blam.sh>
---
 .changeset/purple-feet-approve.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/purple-feet-approve.md b/.changeset/purple-feet-approve.md
index 3d4fae478c..c3017bcc3d 100644
--- a/.changeset/purple-feet-approve.md
+++ b/.changeset/purple-feet-approve.md
@@ -2,4 +2,4 @@
 '@backstage/core-components': minor
 ---
 
-The 'Skip to content' button on click focus on the main article tag and skip the h1 tag. Users are not able to identify which page they are currently. Now this minor fix will change the behaviour o the button and focus on the h1 tag on the page
+The `Skip to content` button on click focuses on the main article tag and skips the `h1` tag. Users are not able to identify which page they are on currently. Now this minor fix will change the behaviour of the button and focuses on the `h1` tag on the page.