MUI中如何给SVG图标传递Tooltip标题实现无障碍访问

• 你目前使用的「给Tooltip传入title、同时给内部图标传入同值titleAccess属性」的写法，就是官方明确推荐的标准实现，完全符合无障碍访问规范。
  两种场景表现不一致的核心原因是：Tooltip只会自动为包裹的原生可聚焦交互元素（比如button、a标签）关联title作为无障碍名称。IconButton底层渲染的就是原生button元素，因此不需要额外传值就能被屏幕阅读器正确识别；但独立SvgIcon默认渲染的是不带无障碍标签的SVG元素，不属于默认可聚焦的交互元素，Tooltip不会自动为其注入关联属性，直接包裹就会出现识别失效的问题。
• MUI目前没有提供内置配置或全局开关，支持独立图标自动读取父级Tooltip的title值。这是刻意的设计选择：Tooltip作为通用浮层组件，不会对包裹的子组件做强耦合的属性注入，否则会破坏组件独立性，还容易和子组件的自定义属性产生不可预期的冲突。

针对你提到的「非交互类库存状态图标，支持悬浮查看提示+满足无障碍要求」的业务场景，如果不想重复书写两次相同的title值，可以自行封装一层薄的通用组件，把重复传值的逻辑收敛，业务调用时只需要传一次title即可，参考实现：

import { Tooltip, SvgIconProps, TooltipProps } from '@mui/material';

type A11yTooltipIconProps = {
  title: string;
  icon: React.ComponentType<SvgIconProps>;
  tooltipProps?: Omit<TooltipProps, 'title' | 'children'>;
  iconProps?: SvgIconProps;
};

/**
 * 适配无障碍要求的图标悬浮提示组件
 * 单次传入title即可同时满足悬浮提示展示、屏幕阅读器识别要求
 */
const A11yTooltipIcon = ({
  title,
  icon: Icon,
  tooltipProps,
  iconProps
}: A11yTooltipIconProps) => {
  return (
    <Tooltip title={title} {...tooltipProps}>
      <Icon titleAccess={title} aria-hidden={false} {...iconProps} />
    </Tooltip>
  );
};

// 业务侧使用示例
// <A11yTooltipIcon title="库存不足" icon={ErrorOutlineIcon} />

这个封装不会改动MUI组件的原生行为，既保留了原有的悬浮交互效果，满足无障碍识别要求，也避免了同个文案重复书写带来的后续维护成本，适合在多业务场景复用。

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