如何关闭Chakra UI IconButton的TypeScript aria-label强制校验？

当你的IconButton处于aria-hidden的节点区域内时，确实不需要额外的aria-label，但Chakra UI的类型定义强制要求该属性，导致TypeScript报错。这里有几个可行的解决办法：

• 传空字符串的aria-label
  这是最简单的方式，因为父元素已经aria-hidden，屏幕阅读器会忽略这个按钮，空标签不会影响无障碍体验：

  <IconButton aria-label="" icon={<LeftArrowIcon />} />
  

• 使用TypeScript类型断言跳过检查
  如果不想留空字符串，可以用类型断言强制绕过类型校验，注意这会跳过该组件的所有类型检查，只建议在确定无障碍没问题的场景下用：

  <IconButton as any icon={<LeftArrowIcon />} />
  

  或者更精准地只忽略aria-label的必填要求：

  <IconButton {...({ "aria-label": undefined } as Partial<IconButtonProps>)} icon={<LeftArrowIcon />} />
  

• 自定义无必填aria-label的IconButton组件
  如果你需要多次使用这种无标签的按钮，可以封装一个自定义组件，修改原组件的类型定义：

  import { IconButton, IconButtonProps } from "@chakra-ui/react";
  import React from "react";
  
  // 移除aria-label的必填要求
  type UnlabeledIconButtonProps = Omit<IconButtonProps, "aria-label"> & {
    "aria-label"?: string;
  };
  
  // 重新定义组件类型
  export const UnlabeledIconButton = IconButton as React.ComponentType<UnlabeledIconButtonProps>;
  

  之后直接用UnlabeledIconButton就可以不用传aria-label了：

  <UnlabeledIconButton icon={<LeftArrowIcon />} />
  

内容的提问来源于stack exchange，提问作者user254694