message: Add styling and accessibility necessary for FormFieldButton component
diff: import React from 'react'
  import { Button, Typography, Box } from '@mui/material'
  import makeStyles from '@mui/styles/makeStyles'
  +import theme from 'common/theme'
  type Props = {
  + label?: string
  error?: string
  onClick?: () => void
  placeholder?: string
  @@ -19,13 +21,25 @@ const useStyles = makeStyles({
  borderRadius: '3px',
  padding: '8.5px 14px',
  cursor: 'pointer',
  + '&:hover': {
  + outlineColor: 'rgba(0, 0, 0, 0.87)',
  + borderColor: 'rgba(0, 0, 0, 0.87)',
  + },
  + '&:focus': {
  + outlineColor: theme.palette.primary.main,
  + borderColor: theme.palette.primary.main,
  + },
  },
  errorInputBox: {
  - borderColor: '#d32f2f',
  - color: '#d32f2f',
  + borderColor: theme.palette.error.main,
  + color: theme.palette.error.main,
  + '&:hover,&:focus': {
  + outlineColor: `${theme.palette.error.main} !important`,
  + borderColor: `${theme.palette.error.main} !important`,
  + },
  },
  errorText: {
  - color: '#d32f2f',
  + color: theme.palette.error.main,
  fontWeight: 400,
  fontSize: '0.75rem',
  lineHeight: 1.66,
  @@ -38,18 +52,27 @@ const useStyles = makeStyles({
  },
  })
  -function FormFieldButton({ error, onClick, value, placeholder, button }: Props) {
  +function FormFieldButton({ error, onClick, value, placeholder, button, label }: Props) {
  const classes = useStyles()
  return (
  <>
  <Box
  + aria-label={label}
  + component="div"
  + role="button"
  + tabIndex={0}
  + onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
  + if (e.keyCode === 32 || e.keyCode === 13) {
  + onClick ? onClick() : null
  + }
  + }}
  onClick={onClick}
  className={
  error ? classes.imitateInputBox + ' ' + classes.errorInputBox : classes.imitateInputBox
  }>
  <Typography>{value || placeholder}</Typography>
  {button ? (
  - <Button sx={{ padding: 0 }} onClick={onClick}>
  + <Button tabIndex={-1} sx={{ padding: 0 }} onClick={onClick}>
  {button.label}
  </Button>
  ) : null}
  