VoiceOver Cursor vs Keyboard Focus

Solution for VoiceOver Cursor vs Keyboard Focus
is Given Below:

Seems to skip over keyboard focus when using VoiceOver navigation

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>

  )
}

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.