Merge pull request #18418 from snehaljos/#18042-feature

`skip to content` accessibility fix

.changeset/purple-feet-approve.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+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.

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