From c12a86ca918ccfe6488c37359b9d59912a7403ef Mon Sep 17 00:00:00 2001
From: npiyush97 <npiyush35@gmail.com>
Date: Fri, 19 Jan 2024 20:46:06 +0530
Subject: [PATCH] fix a11y issue in devtools plugin

Signed-off-by: npiyush97 <npiyush35@gmail.com>
---
 .changeset/fifty-adults-watch.md              |  5 ++++
 .../Content/ConfigContent/ConfigContent.tsx   |  2 +-
 .../Content/InfoContent/InfoContent.tsx       | 27 +++++++++----------
 3 files changed, 18 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/fifty-adults-watch.md

diff --git a/.changeset/fifty-adults-watch.md b/.changeset/fifty-adults-watch.md
new file mode 100644
index 0000000000..8bff1c28cd
--- /dev/null
+++ b/.changeset/fifty-adults-watch.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-devtools': patch
+---
+
+Refactored code to improve accessibility by moving elements outside the `ul` tag and placing them appropriately. Also adjusted theme to offer better contrast.
diff --git a/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx b/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx
index aba46f85b7..4bd4bc95c6 100644
--- a/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx
+++ b/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx
@@ -87,7 +87,7 @@ export const ConfigContent = () => {
           src={configInfo.config as object}
           name="config"
           enableClipboard={false}
-          theme={theme.palette.type === 'dark' ? 'monokai' : 'rjv-default'}
+          theme={theme.palette.type === 'dark' ? 'chalk' : 'rjv-default'}
         />
       </Paper>
     </Box>
diff --git a/plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx b/plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx
index fcbea53603..d32f8619ba 100644
--- a/plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx
+++ b/plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx
@@ -23,6 +23,7 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemText from '@material-ui/core/ListItemText';
 import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import Alert from '@material-ui/lab/Alert';
 import React from 'react';
@@ -38,6 +39,7 @@ import { DevToolsInfo } from '@backstage/plugin-devtools-common';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     paperStyle: {
+      display: 'flex',
       marginBottom: theme.spacing(2),
     },
     flexContainer: {
@@ -123,22 +125,17 @@ export const InfoContent = () => {
               secondary={about?.backstageVersion}
             />
           </ListItem>
-          <Divider orientation="vertical" variant="middle" flexItem />
-          <ListItem
-            button
-            onClick={() => {
-              copyToClipboard({ about });
-            }}
-            className={classes.copyButton}
-          >
-            <ListItemAvatar>
-              <Avatar>
-                <FileCopyIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary="Copy Info to Clipboard" />
-          </ListItem>
         </List>
+        <Divider orientation="vertical" variant="middle" flexItem />
+        <Button
+          onClick={() => {
+            copyToClipboard({ about });
+          }}
+          className={classes.copyButton}
+          startIcon={<FileCopyIcon />}
+        >
+          Copy Info to Clipboard
+        </Button>
       </Paper>
       <InfoDependenciesTable infoDependencies={about?.dependencies} />
     </Box>