Feature/watch visibility

[pooriamo]

This feature adds or removes the className is-visible based on cells' condition.

[desandro]

Thanks so much for this contribution. This has been requested several times. I'll be evaluating adding this feature in the next minor release.

[larscmagnusson]

@desandro, great! And when will that be?

[bakura10]

@larscmagnusson Could this PR be updated to also properly add/remove the aria-hidden attribute based on the cell visibility?

[bakura10]

@desandro once this PR is updated to handle the aria-hidden could it be merged? If a given slide with aria-hidden=true contains focusable elements, Lighthouse now returns this as an accessibility issue. A simple fix would be to set aria-hidden elements to visibility: hidden, but the fact that Flickity currently does not handle the aria-hidden attribute correctly prevent us to do that :(

[jenswittmann]

The PR #1032 works great! Please change the following to flickity.js on line 766 to also support aria-hidden on visible slides for PR #1015 (:

    if (isVisible) {
      cell.element.classList.add('is-visible');
      cell.element.removeAttribute('aria-hidden');
    } else {
      cell.element.classList.remove('is-visible');
      cell.element.setAttribute('aria-hidden', true);
    }

[pooriamo]

@jenswittmann Done

[brandon-gh]

In my testing, isVisible will be false when the is-selected cell is itself wider than the browser window, despite that the cell is obviously visible (being the is-selected cell centered on screen).

[KelseyCooper]

isVisible will not function correctly unless the slider is full width. Anything in-line will not work if the cell is not wider than the viewport offset.

I have added a test to check if the value of cellX === 0 as it is the first element within the viewport if the value of cellX is 0 (More specifically I am checking if cellX > -1 && cellX < 1 due to the fluctuation of cell placement when the carousel stops moving).

This is not an ideal solution as I am getting flashing before a slide comes to rest, but it is solving the issue in my use case.

[danimalweb]

I would love to see this issue resolved.

[dpw1]

Any updates on this?

[ranuss]

Is there any update on this?

[MizuBishi]

Can we merge this please? Would love to have this issue fixed!

[haase1020]

What is the status on this issue? We are using Flickity and are getting flagged for accessibility.