How to set Loop Items & Page Numbers to tabindex -1

Hi there,

can you add the tabindex attribute so I can see the issue ?

Just to be clear , are these the ones :

https://app.screencast.com/hYKFXj2QaEs2g

As they are working for me.
Let me know

Ah ok.
It would need some Javascript to do that:

const container = document.querySelector('.gb-query-loop-pagination');
container.querySelectorAll('a').forEach(element => {
  element.setAttribute('tabindex', '-1');
});

How did you add the code?

For example:

1. in Appearance > Elements -> Add New –> Hook
2. set the Hook to wp_footer
3. set the Display Rules location to the page you want to apply it to.
4. in the hook editor add the Javascript in <script> tags eg.

<script>
const container = document.querySelector('.gb-query-loop-pagination');
container.querySelectorAll('a').forEach(element => {
  element.setAttribute('tabindex', '-1');
});
</script>

Yes, you can include .gb-loop-item in your code.

so change the code to:

// Select both the pagination container and loop items
const containers = document.querySelectorAll('.gb-query-loop-pagination, .gb-loop-item');

containers.forEach(container => {
  container.querySelectorAll('a').forEach(element => {
    element.setAttribute('tabindex', '-1');
  });
});

You are welcome   🙂

This is not in our support forum scope as it’s not related to our products.

But it’s similar to the original solution, so here it is:

document.querySelectorAll('.ariahidden[aria-hidden="true"]').forEach(function(parent) {
    parent.querySelectorAll('a').forEach(function(anchor) {
        anchor.setAttribute('tabindex', '-1');
    });
});

No Problem 🙂