VoiceOver 光标与键盘焦点

Question

使用 VoiceOver 导航时，我的键盘焦点似乎直接跳过了“保存到投资组合”按钮。

键盘导航和 VoiceOver 光标都跟随其他按钮，但是，当我尝试导航到“保存到投资组合”按钮时，键盘焦点（蓝色突出显示）不会跟随，我不能select 它或单击它作为 link。有谁知道为什么或我需要做什么来解决这个问题？

保存到投资组合代码：

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

最好更换你的

<div role=button>

语义正确

<button type="button">

如果这不可能，您可以添加 tabindex="0" 的属性，但除非您添加 keydown 侦听器和处理程序，否则按钮将不会按空格键激活。

VoiceOver 光标与键盘焦点

VoiceOver Cursor vs Keyboard Focus

reactjs

keyboard

accessibility

voiceover