html - 如何使通知列表元素可以通过上下键在反应中遍历？

Question

我已经编写了这个反应组件，我希望列表元素可以通过按键向上和向下按钮进行遍历。我可以将 tab-index 与 tab 和 shift tab 一起使用，但我想使用上下键。

export const NotificationListComponent: React.FunctionComponent<INotifications> = (
  props
) => {
  return (
    <>
      {props.notifications &&
        props.notifications.map((item) => {
          return (
            <li
              key={item.notificationId}
              style={NotificationListStyle}
              role="listitem"
              tabIndex={0}
            >
              <NotificationItemComponent {...item} />
            </li>
          );
        })}
    </>
  );
};```

标签： htmlcssreactjsaccessibility