storybook 在搜索编辑字段中,为关闭/取消按钮定义了不正确的名称,

2ul0zpep  于 4个月前  发布在  其他
关注(0)|答案(2)|浏览(41)

描述bug

搜索编辑框中的关闭/取消按钮的名称定义不正确。

复现链接

https://storybook.js.org/addons

复现步骤

  1. 打开网址 " Storybook "。
  2. 导航到 "Addons" 链接并调用它。
  3. 导航到 "search edit filed" 并在其中输入任何字符,然后导航到关闭按钮。
  4. 观察叙述者公告。

预期结果:

名称应该为关闭/取消按钮定义,叙述者应该宣布为关闭/取消按钮。
incorrect.name.is.defined.for.close.button.mp4

ax6ht2ek

ax6ht2ek1#

要解决搜索编辑字段中关闭/取消按钮名称不正确的问题,请更新 NotificationItem.tsx 中的 DismissButtonWrappertitle 属性,以提供更具描述性的名称。修改 DismissNotificationItem 组件如下:

const DismissNotificationItem: FC<{
  onDismiss: () => void;
}> = ({ onDismiss }) => (
  <DismissButtonWrapper
    title="Close search"
    aria-label="Close search"
    onClick={(e: SyntheticEvent) => {
      e.preventDefault();
      e.stopPropagation();
      onDismiss();
    }}
  >
    <CloseAltIcon size={12} />
  </DismissButtonWrapper>
);

此更改确保屏幕阅读器宣布按钮为“关闭搜索”。

参考资料

/code/core/src/manager/components/notifications/NotificationItem.tsx

关于 Greptile

此响应为您提供研究的起点,而非精确解决方案。
帮助我们改进!如果这有帮助,请留下一个 👍,如果无关紧要,请留下一个 👎。

vsnjm48y

vsnjm48y2#

我正在处理这个

相关问题