moveManual causes undefined setAttribute

[subITCSS]

Describe the bug

We get
can't access property "setAttribute", eo[Gn] is undefined

based on

_moveManual: function () {
    var this$ = this;
    var dotElems = this.$.container.querySelectorAll('.slider__dot'), i;
    for (i = 0; i < this.totalSlides; ++i) {
      dotElems[i].setAttribute("aria-label", "Slide " + (parseInt(dotElems[i].getAttribute('aria-posinset')) + 1) + " selector");
      dotElems[i].addEventListener('click', function (e) {
        this$.movePos(e.target.getAttribute('aria-posinset'));
      });
    };
    if (this.totalSlides) {
      this._dotStyles = window.getComputedStyle(dotElems[0]);
    }
  },

Expected behavior

The code should be able to handle such state.

_moveManual: function () {
    const container = this.$?.container;
    if (!container) return;

    const dotElems = container.querySelectorAll('.slider__dot');
    if (!dotElems.length) return;

    dotElems.forEach((dot, index) => {
      if (!dot) return;

      const posAttr = dot.getAttribute('aria-posinset');
      const pos = parseInt(posAttr, 10);

      const safePos = Number.isNaN(pos) ? index + 1 : pos;

      dot.setAttribute('aria-label', `Slide ${safePos} selector`);

      if (!dot._hasClickHandler) {
        dot.addEventListener('click', (e) => {
          const target = e.currentTarget;
          const attr = target.getAttribute('aria-posinset');
          const parsed = parseInt(attr, 10);

          if (!Number.isNaN(parsed)) {
            this.movePos(parsed - 1);
          }
        });
        dot._hasClickHandler = true;
      }
    });

    this._dotStyles = window.getComputedStyle(dotElems[0]);
  },

Minimal reproducible example

No response

Add-on Version

3.0.1

Vaadin Version

24.10.1

Additional information

No response

[paodb]

Thank you for this bug report, we appreciate you taking the time to help us improve our add-ons.

To help us see what you're seeing, could you please provide a minimal reproducible example (MRE)? This is the fastest way for us to diagnose the problem and find a fix.

We have applied a status:waiting-for-author label to this issue, indicating that we are paused until we can get a working example. We are ready and willing to investigate as soon as you can provide one.

This guide provides excellent instructions on how to create an MRE: https://stackoverflow.com/help/minimal-reproducible-example

Thank you for your help in resolving this.

[subITCSS]

I can´t give you any further information. Our Sentry showed this as caused issue and based on the unsafe code this issue is possible.

[enver-haase]

mre-carousel-addon.zip

This should work as an MRE.