Title ID to enhance the SVG a11y

[elizabetdev]

🚀 Feature Proposal

Hi there! 👋 First of all, thanks for creating this amazing project!

I want to propose the ability to add unique id for every single <title> tag. So we can use correctly the aria-labelledby.

If we want to use the aria-labelledby that is recommended to enhance the SVG accessibility we can't because the aria-labelledby needs to target the id from the title tag.

I propose a new config option called titleId.

Example

In our config file, we would have something like:

  svgoConfig: {
    plugins: [
      { cleanupIDs: false }
    ]
  },
  svgProps: {
    xmlns: "http://www.w3.org/2000/svg"
  },
  titleProp: true,
  titleId: filePath // the user can specify a uniqueId

This would generate a component like:

const IconStar = ({ title, ...props }) => (
  <svg
    width={16}
    height={16}
    viewBox="0 0 16 16"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <title id="IconStar">{title}</title>
    <path
      fillRule="evenodd"
      d="..."
    />
  </svg>
);

[gregberge]

Hello @miukimiu, it is a good idea. The problem is that ids are actually a problem because they have to be unique. So the best way to provide this support is probably to inject a titleId property. This way it could be specified as property.

[elizabetdev]

Thanks for this! 🎉

[KatSick]

@gregberge I can't find titleId property in 6.4.0 version. how can I pass custom titleId property via nodejs api?