VoiceOver Cursor vs Keyboard Focus

Question

While navigating with VoiceOver, my keyboard focus seems to skip right over the Save to a portfolio button.

Both the keyboard navigation and the VoiceOver cursor follow to the other buttons, however, when I try to navigate to the Save to a portfolio button, the keyboard focus (blue highlight) will not follow and I cannot select it or click it as a link. Does anyone have any idea why or what I need to do to remedy this?

Save to a portfolio code:

const DropDown = ({ sxStyle, sxTiny, buttonLabel, options }) => {
  const [open, setOpen] = useState(false)
  const toggleStyle = sxTiny ? sxStyle.tiny : sxStyle.toggle
  const wrapperStyle = sxTiny ? sxStyle.tinyWrapper : sxStyle.wrapper

  return (
    <div
      className='wrapper'
      sx={wrapperStyle}
      role='button'
      onBlur={(event) => {
        if (!event.currentTarget.contains(event.relatedTarget)) {
          setOpen(false)
        }
      }}
    >
      <Button
        variant='primary'
        className='dropdown-toggle'
        aria-label='Add to Portfolio'
        onClick={() => setOpen(!open)}
        sx={toggleStyle}
      >
        { buttonLabel }
      </Button>
      <div
        role='listbox'
        sx={open ? sxStyle.optionsOpen : sxStyle.optionsClosed}>
        { options }
      </div>
    </div>

  )
}

Answer 1

It would be best to replace your

<div role=button>

with a semantically correct

<button type="button">

If that is not possible, you could add an attribute of tabindex="0", but the button will not activate with the spacebar as it should unless you add a keydown listener and handler.