From 5ea40691d5526d6521a0330beef3e275ace61559 Mon Sep 17 00:00:00 2001
From: Jithin Prabhakaran Girija <141764922+jpg619@users.noreply.github.com>
Date: Wed, 6 Nov 2024 16:57:53 +0000
Subject: [PATCH] [Fix accessibility] severity 4 Issues (#1352)

## WHAT

This pull request includes a few changes to the
`src/components/site-title.js` and `src/layout.js` files to improve the
layout and structure of the components.

Layout improvements:

*
[`src/layout.js`](diffhunk://#diff-a6d4de2cc6c8127b7cbdf668554367b396b50bea26c46bb805d3bc4d43108994L42-L50):
Reordered the `TableOfContents.Desktop` component to be placed after the
`Container` component and removed the `flexDirection: 'row-reverse'`
style.
[[1]](diffhunk://#diff-a6d4de2cc6c8127b7cbdf668554367b396b50bea26c46bb805d3bc4d43108994L42-L50)
[[2]](diffhunk://#diff-a6d4de2cc6c8127b7cbdf668554367b396b50bea26c46bb805d3bc4d43108994R61)

Code cleanup:

*
[`src/components/site-title.js`](diffhunk://#diff-c25bc0f69ad33508e676865af1c416298095475f259f0a06c386d0b5d9e4b294L7-R7):
Removed the redundant `role="banner"` attribute from the `Box`
component.


## BEFORE & AFTER
<img width="375" alt="image"
src="https://github.com/user-attachments/assets/b9b7c958-3b52-44f8-abd7-5938c909f48e">
<img width="375" alt="image"
src="https://github.com/user-attachments/assets/d6093bf3-8ccb-4abe-a828-c7be5443bd79">
---
 src/components/site-title.js | 2 +-
 src/layout.js                | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/site-title.js b/src/components/site-title.js
index 400517870a9..3b12b5c1bad 100644
--- a/src/components/site-title.js
+++ b/src/components/site-title.js
@@ -4,7 +4,7 @@ import Link from './link'
 import useSiteMetadata from '../hooks/use-site-metadata'
 
 const NpmLogo = ({size, sx}) => (
-  <Box sx={{...sx, color: 'logoBg'}} role="banner">
+  <Box sx={{...sx, color: 'logoBg'}}>
     <svg height={size} width={size} viewBox="0 0 700 700" fill="currentColor" aria-hidden="true">
       <polygon fill="currentColor" points="0,700 700,700 700,0 0,0" />
       <polygon fill="#ffffff" points="150,550 350,550 350,250 450,250 450,550 550,550 550,150 150,150 " />
diff --git a/src/layout.js b/src/layout.js
index ece104cc71f..20cb21fae01 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -39,7 +39,6 @@ const DefaultLayout = ({children}) => {
     <Box
       sx={{
         justifyContent: 'center',
-        flexDirection: 'row-reverse',
         display: 'flex',
         maxWidth: '1200px',
         mx: 'auto',
@@ -47,7 +46,6 @@ const DefaultLayout = ({children}) => {
         p: [4, 5, 6, 7],
       }}
     >
-      <TableOfContents.Desktop />
       <Container as="main">
         <Box sx={{mb: 4}}>
           <Breadcrumbs />
@@ -60,6 +58,7 @@ const DefaultLayout = ({children}) => {
         {children}
         <PageFooter />
       </Container>
+      <TableOfContents.Desktop />
     </Box>
   )
 }