Docusaurus移除内联SVG的title ID属性，求无障碍访问解决方案

下面是几个可行的解决办法：

• 手动在JSX中注入带ID的title元素
  绕过SVG文件中原有的title标签，直接在组件使用时传入带ID的title子元素，这样Docusaurus不会处理这个新增的title元素，ID能保留：

  import CheckmarkSvg from '/img/site-components/icon-checkmark.svg';
  
  <CheckmarkSvg role="image" className="myClass">
    <title id="myTitleID">An accessible title</title>
  </CheckmarkSvg>
  

• 修改Webpack配置保留SVG的ID属性
  Docusaurus默认用SVGO优化SVG时会移除ID，可通过自定义Webpack配置调整SVGO规则，保留title的ID：
  在docusaurus.config.js中添加Webpack配置：

  module.exports = {
    // 其他已有配置
    webpack: (config, { isServer }) => {
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));
      if (svgRule) {
        svgRule.use = [
          {
            loader: '@svgr/webpack',
            options: {
              svgoConfig: {
                plugins: [
                  { name: 'removeAttrs', params: { attrs: '(?!id)' } } // 仅移除除id外的不必要属性
                ]
              }
            }
          }
        ];
      }
      return config;
    },
  };
  

• 改用aria-label替代aria-labelledby
  直接给SVG添加aria-label属性提供无障碍描述，无需依赖title的ID，实现更简洁：

  import CheckmarkSvg from '/img/site-components/icon-checkmark.svg';
  
  <CheckmarkSvg role="img" aria-label="An accessible title" className="myClass" />
  

  注意：这里将role改为img更符合WAI-ARIA规范。

内容的提问来源于stack exchange，提问作者Chris J. Zähller