1

I implemented a horizontal grid with some cards in them. The grid uses CSS scroll-snap and it works nicely when navigating with mouse/touchscreen.

The problem occurs when the grid is navigated using a keyboard. Pressing tab after navigating through the grid with arrow keys causes the view to jump back to the element that got the focus, not the card which is current snapped to.

My ideal behaviour when pressing tab is, to focus on the card which is currently snapped to.

Any suggestions to make this possible?

Tenshi Munasinghe
  • 576
  • 1
  • 3
  • 13
  • 1
    First ask the question: "does your 'ideal behaviour' match the ideal behaviour expected by your users?" Essentially, don't unexpectedly break the UI of the browser. – David Thomas Feb 06 '22 at 13:29
  • @DavidThomas After navigating with the arrow keys, users will think they are already within that specific section of the grid. Meaning that the users' intention of pressing tab is to select an element from that section. But currently, that will just take them back to the place where the focus was initially on. I think this behaviour is against the intuition of the users. – Tenshi Munasinghe Feb 07 '22 at 06:52

2 Answers2

3

As far as I can tell there is currently no way to handle this natively. Nils Schwebel's answer is not going to be very elegant, but it looks like the best way to go.

Here's a working example:

Note: I've added quite a bit of pure decoration to make it easier to understand, so you may need to pick out the relevant parts after some testing.

const main = document.getElementById("Main"),
  sections = document.getElementsByClassName("section");

main.addEventListener('scroll', (e) => {
  // Grab the position yo are scrolled to (the top of the viewport)
  let pos = main.scrollTop;
  for (let i = 0, l = sections.length; i < l; i++) {
    // Since our stap-align is centered, get the position of the middle of the viewport relative to the current section's top (if your snap items are not full-height, it might require using half the viewport's height instead)
    let relativePos = sections[i].offsetTop - pos + (sections[i].offsetHeight / 2);
    // Check if the point we found falls within the section
    if (relativePos >= 0 && relativePos < sections[i].offsetHeight) {
      sections[i].focus();
      break;
    }
  }
});
body {
  margin: unset;
}

main {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: #222;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  scroll-snap-align: center;
}

section:focus {
  border: none;
  outline: none;
}

#s1 {
  background-color: #d72748;
}

#s2 {
  background-color: #b51f7e;
}

#s3 {
  background-color: #e64869;
}

#s4 {
  background-color: #e79946;
}

section h2 {
  color: white;
}
<main id="Main">
  <section class="section" id="s1" tabindex="1" aria-labelledby="a1">
    <h2 id="a1">AREA 1</h2>
  </section>
  <section class="section" id="s2" tabindex="1" aria-labelledby="a3">
    <h2 id="a2">AREA 2</h2>
  </section>
  <section class="section" id="s3" tabindex="1" aria-labelledby="a2">
    <h2 id="a3">AREA 3</h2>
  </section>
  <section class="section" id="s4" tabindex="1" aria-labelledby="a4">
    <h2 id="a4">AREA 4</h2>
  </section>
</main>
Kilarith Duskleaf
  • 41
  • 7
0

I would add a scroll listener and just check if the element is at the top of the scroll view. You may be able to modify one of these solutions: How to check if element is visible after scrolling?

Nils Schwebel
  • 641
  • 4
  • 14