#1804 issue fix

Signed-off-by: snehaljos <joyalsnehal3421@gmail.com>

.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

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,

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>
   );