How to add data attributes on cancel Icon?

[didaquis]

Hello.

I would like to know if there is a way to add a data attribute on the cancel tour icon.

In the documentation, it indicates that these are the only possible options:

Using this options...

cancelIcon: {
        enabled: true,
        label: 'foo'
 }

... you will get this:

<button aria-label="foo" class="shepherd-cancel-icon" type="button">
       <span aria-hidden="true">×</span>
</button>

But I would like to get something like this:

<button aria-label="foo" class="shepherd-cancel-icon" type="button" data-whatever="some-value">
       <span aria-hidden="true">×</span>
</button>

Is there any way to add this data-whatever="some-value" ?

[RobbieTheWagner]

Currently, no. This is the component for it https://github.com/shipshapecode/shepherd/blob/master/src/js/components/shepherd-cancel-icon.svelte

I suppose we could add the ability to pass any arbitrary attributes down to components. Not sure if that would be good to do or not.

[didaquis]

Adding those attributes can be useful for selectors. For example: https://docs.cypress.io/guides/references/best-practices#Selecting-Elements

This is useful in cases where the value of the “aria-label” changes dynamically. Adding a non-dynamic attribute can help you get a proper selector for e2e testing.

[RobbieTheWagner]

@didaquis if you have a solution in mind that works for your use case, could you please open a PR?

[RobbieTheWagner]

This was requested for buttons here as well shipshapecode/angular-shepherd#623 so perhaps we could make the components pass any arbitrary attributes down to the elements?

[didaquis]

In my opinion, will be cool something like this:

This code...

cancelIcon: {
        enabled: true,
        label: 'close the tour', 
        dataAttributes: [
            { 
                id: 'foo', value: 'someData'
            },
            { 
                id: 'bar', value: '1234'
            },
        ]
      },

... will produce this

<button aria-label="close the tour" data-foo="someData" data-bar="1234" class="shepherd-cancel-icon" type="button"><span aria-hidden="true">×</span></button>

[didaquis]

@didaquis if you have a solution in mind that works for your use case, could you please open a PR?

To be honest, I don't have enough time right now to investigate how the library works inside and implement the functionality. Sorry

[RobbieTheWagner]

I would suggest allowing passing any arbitrary attributes. Something like:

attributes: [
  'data-foo-bar': 123,
  class: 'foo',
  style: 'color: red'
]

@EmNicholson93 could you work on supporting this please?

[Steezli]

@rwwagner90 happy to, I was already thinking it'd be a good one to tackle as I think it'll apply to a few existing issues or at least point me in the same direction as a few other issues.

[didaquis]

hi @Steezli

Is there any news related to this issue?

[hlopez94]

I know this has been long due, but given my team needs a similar functionality to this, took the time and made the needed changes. So the #3333 pull request got opened with the changes. I'm not too familiar with Svelte, so I hope the changes suffice the need for this functionality, of course i'm open to feedback and change requests if needed

CCing everyone on the conversation: @didaquis @Steezli @RobbieTheWagner