#357 Keyboard navigation (#382)

fixed keyboard navigation
beer-garden · Feb 1, 2023 · 3ae1d42 · 3ae1d42
1 parent c11c2b8
commit 3ae1d42
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 26 deletions.
diff --git a/src/components/Table/defaults/DefaultGlobalFilter.tsx b/src/components/Table/defaults/DefaultGlobalFilter.tsx
@@ -1,4 +1,5 @@
-import { Box, TextField } from '@mui/material'
+import { Clear as ClearIcon, Search as SearchIcon } from '@mui/icons-material'
+import { Box, IconButton, InputAdornment, TextField } from '@mui/material'
 import { useMountedState } from 'hooks/useMountedState'
 import {
   useAsyncDebounce,
@@ -27,8 +28,26 @@ const DefaultGlobalFilter = <T extends ObjectWithStringKeys>({
   return (
     <Box>
       <TextField
-        type="search"
-        variant="outlined"
+        variant="standard"
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon fontSize="small" />
+            </InputAdornment>
+          ),
+          endAdornment: value && (
+            <InputAdornment position="end">
+              <IconButton
+                onClick={() => {
+                  setValue('')
+                  onChange('')
+                }}
+              >
+                <ClearIcon fontSize="small" />
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
         size="small"
         color="secondary"
         value={value || ''}

diff --git a/src/components/UI/NavigationBar/DrawerFooter.tsx b/src/components/UI/NavigationBar/DrawerFooter.tsx
@@ -1,7 +1,9 @@
 import SportsBarIcon from '@mui/icons-material/SportsBar'
 import TopicIcon from '@mui/icons-material/Topic'
 import {
+  Box,
   Divider,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
   MenuItem,
@@ -38,29 +40,31 @@ const DrawerFooter = () => {
   }, [getVersion, setAlert, setVersionConfig])
 
   return (
-    <MenuList dense style={{ marginTop: 'auto' }}>
+    <Box style={{ marginTop: 'auto' }}>
       <Divider />
-      <MenuItem disabled style={{ opacity: 'unset' }} sx={{ pl: 1 }}>
-        <ListItemIcon>
-          <SportsBarIcon fontSize="small" />
-        </ListItemIcon>
-        <ListItemText>
-          Beer Garden <b>{versionConfig?.beer_garden_version}</b>
-        </ListItemText>
-      </MenuItem>
-      <MenuItem
-        sx={{ pl: 1 }}
-        component="a"
-        data-testid="apiLink"
-        href={`${config?.url_prefix}swagger/index.html?config=${config?.url_prefix}config/swagger`}
-      >
-        <ListItemIcon>
-          <TopicIcon fontSize="small" />
-        </ListItemIcon>
-        <ListItemText>OpenAPI Documentation</ListItemText>
-      </MenuItem>
-      {alert ? <Snackbar status={alert} /> : null}
-    </MenuList>
+      <MenuList dense>
+        <MenuItem disabled style={{ opacity: 'unset' }} sx={{ pl: 1 }}>
+          <ListItemIcon>
+            <SportsBarIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>
+            Beer Garden <b>{versionConfig?.beer_garden_version}</b>
+          </ListItemText>
+        </MenuItem>
+        <ListItemButton
+          href={`${config?.url_prefix}swagger/index.html?config=${config?.url_prefix}config/swagger`}
+          sx={{ pl: 1 }}
+          component="a"
+          data-testid="apiLink"
+        >
+          <ListItemIcon>
+            <TopicIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText sx={{ ml: -2.5 }}>OpenAPI Documentation</ListItemText>
+        </ListItemButton>
+        {alert ? <Snackbar status={alert} /> : null}
+      </MenuList>
+    </Box>
   )
 }
 

diff --git a/src/pages/RequestView/RequestViewTable.tsx b/src/pages/RequestView/RequestViewTable.tsx
@@ -108,7 +108,7 @@ const RequestViewTable = ({ request }: RequestViewTableProps) => {
               </>
             }
           >
-            <InfoOutlined fontSize="small" />
+            <InfoOutlined tabIndex={0} fontSize="small" />
           </Tooltip>
         </LabeledData>
         <LabeledData