How to Insert a Variant field inside another Variant field in Sitecore SXA

Question

I am creating a Rendering variant in Sitecore SXA and for accessibility reasons I want to output a tag that displays the item Title inside my anchor tag

 <div class="landing-feature__cta">
    <a class="btn btn--white btn--lg" href="">
       Discover More
       <span class="hidden">about Section Title Lorem Ipsum Dolor Sit Amet</span>
    </a>
</div>

In SXA rendering variant I have a VariantField that outputs the Link and inside the Link VariantField I want to insert another VariantField which will outputs the Title.

But in SXA if a VariantField is nested under another VariantField it will work like a fallback for the parent.

Is there a work around to next VariantField so that I can the output I

Variant field for Link:

Variant field for Title:

Answer 1

This is a limitation on variant fields (esp Links) to customize the nested markup !! you could workaround with Scriban templates as Alan mentioned.

Insert Scriban Template (/sitecore/templates/Foundation/Experience Accelerator/Scriban/Scriban) in your RV instead of VariantField type

Under VariantDetails Template field add the snippet below:

Ex:

<div class="landing-feature__cta">
    <a class="btn btn--white btn--lg" href="{{ i_item.Link.url }}">
        <span class="hidden">{{ sc_raw i_item "Title" }}</span>
    </div>
</div>

You could find more info on some of useful Scriban functions for link resolvers (ex: sc_link, sc_medialink) here and context items (i_item, i_datasource) here

however this would be applicable provided you are on sxa 93 or above.