@cryptotaxi247 / documentation-1 / commits / 5ea4069

[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">

Jithin Prabhakaran Girija committed Nov 6, 2024 at 16:57 UTC 5ea40691d5526d6521a0330beef3e275ace61559
2 files changed +2 -3
src/components/site-title.js
+1 -1
@@ -4,7 +4,7 @@ import Link from './link'
4 import useSiteMetadata from '../hooks/use-site-metadata'
5
6 const NpmLogo = ({size, sx}) => (
7 - <Box sx={{...sx, color: 'logoBg'}} role="banner">
7 + <Box sx={{...sx, color: 'logoBg'}}>
8 <svg height={size} width={size} viewBox="0 0 700 700" fill="currentColor" aria-hidden="true">
9 <polygon fill="currentColor" points="0,700 700,700 700,0 0,0" />
10 <polygon fill="#ffffff" points="150,550 350,550 350,250 450,250 450,550 550,550 550,150 150,150 " />
src/layout.js
+1 -2
@@ -39,7 +39,6 @@ const DefaultLayout = ({children}) => {
39 <Box
40 sx={{
41 justifyContent: 'center',
42 - flexDirection: 'row-reverse',
42 display: 'flex',
43 maxWidth: '1200px',
44 mx: 'auto',
@@ -47,7 +46,6 @@ const DefaultLayout = ({children}) => {
46 p: [4, 5, 6, 7],
47 }}
48 >
50 - <TableOfContents.Desktop />
49 <Container as="main">
50 <Box sx={{mb: 4}}>
51 <Breadcrumbs />
@@ -60,6 +58,7 @@ const DefaultLayout = ({children}) => {
58 {children}
59 <PageFooter />
60 </Container>
61 + <TableOfContents.Desktop />
62 </Box>
63 )
64 }