fix a11y issue in devtools plugin

Signed-off-by: npiyush97 <npiyush35@gmail.com>

.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.

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>

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>