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 (
      onBlur={(event) => {
        if (!event.currentTarget.contains(event.relatedTarget)) {
        aria-label="Add to Portfolio"
        onClick={() => setOpen(!open)}
        { buttonLabel }
        sx={open ? sxStyle.optionsOpen : sxStyle.optionsClosed}>
        { options }


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.