Pass additional properties to a and span elements

[iloveip]

I would like to be able to pass additional properties to the link itself and the span element, like className (for both elements) and role: 'img' for span.

At the moment I had to add another span inside the given span to do this:
content: h('span', {role: 'img', class: 'anticon'}, s('svg',...)). And I can't style the link, as there is no way to pass className to it.

[wooorm]

👋

Could you tell us more about the higher-level thing you want to achieve? Maybe that’s better done in a custom-made plugin?

[iloveip]

I need to have something like this:

<a href="link_url" target="_blank" rel="nofollow noopener noreferrer" class="external">link_title
  <span role="img" class="anticon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true">
      <path></path>
    </svg>
  </span>
</a>

So I need to be able to pass className to a and to span. I also need to pass role="img" to span.

At the moment I have the following for the content:

content: h('span', {role: 'img', class: 'anticon'}, s('svg', {xmlns: 'http://www.w3.org/2000/svg', viewBox: '64 64 896 896', focusable: 'false', width: '1em', height: '1em', fill: 'currentColor', ariaHidden: 'true'}, s('path', {d: ''})))

But without classes and the span is wrapped in another span

[wooorm]

Might your case also in the end need for example classes or icons for local/internal links (#heading or /same/site)?

[iloveip]

No, we use icons only for external links. Internal links are managed by gatsby-plugin-catch-links.

[wooorm]

Would the CSS selector a[rel] or a[target] be a potential solution to use instead of the class?

[iloveip]

Yes, a[rel] works.

[wooorm]

Ah great!!

For the properties, that can be done! Would you be interested in working on a PR for that? Something like:

  contentProperties = settings.contentProperties || {}

  // ...

  data: {hName: 'span', hProperties: extend(true, contentProperties), hChildren: extend(true, content)}

In index.js?

[iloveip]

Yes, sure, I've created the PR above. But I'm new to programming, so I don't really know what's the right way to do it.

[wooorm]

Closed by GH-16.