Accessible scroll snapping tabs

HTML

              
                <section class="scroll-snap-panel" role="tablist" aria-label="users and groups">
  <div class="tabs-container container">
    <button data-target="people-tab" role="tab" aria-selected="true" class="people tab active" aria-controls="people-tab">People</button>
    <button data-target="groups-tab" role="tab" aria-selected="false" class="groups tab" aria-controls="groups-tab" tabindex="-1">Groups</button>
  </div>
  <div class="scroll-container container">
    <div class="scroll-list people" role="tabpanel" tabindex="0" id="people-tab" aria-label="people">
      <ul>
        <li>
          <img src="http://placeimg.com/80/80/people?1" class="scroll-list-image" alt="" />
          <div>
            <h2>John Doe</h2>
            <small>Developer</small>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/people?8" class="scroll-list-image" alt="" />
          <div>
            <h2>Jane Doe</h2>
            <small>Front-end developer</small>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/people?3" class="scroll-list-image" alt="" />
          <div>
            <h2>Alfred Horus</h2>
            <small>Marketeer</small>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/people?4" class="scroll-list-image" alt="" />
          <div>
            <h2>Dane Dorenski</h2>
            <small>Director</small>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/people?5" class="scroll-list-image" alt="" />
          <div>
            <h2>Bass Strongarm</h2>
            <small>Functional analyst</small>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/people?6" class="scroll-list-image" alt="" />
          <div>
            <h2>Frederick Fancis</h2>
            <small>Technical analyst</small>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/people?7" class="scroll-list-image" alt="" />
          <div>
            <h2>Elise Berend</h2>
            <small>Ninja</small>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/people?8" class="scroll-list-image" alt="" />
          <div>
            <h2>Keith Wheelbarrow</h2>
            <small>Coffee snob</small>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/people?9" class="scroll-list-image" alt="" />
          <div>
            <h2>Oliver Greenwood</h2>
            <small>IT-support</small>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/people?10" class="scroll-list-image" alt="" />
          <div>
            <h2>Frank Demaska</h2>
            <small>Team lead</small>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/people?11" class="scroll-list-image" alt="" />
          <div>
            <h2>Frank Dorangeorgio</h2>
            <small>Sales</small>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/people?12" class="scroll-list-image" alt="" />
          <div>
            <h2>Marcus Webbers</h2>
            <small>OG</small>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/people?13" class="scroll-list-image" alt="" />
          <div>
            <h2>Mary Hercules</h2>
            <small>Geek</small>
          </div>
        </li>
      </ul>
    </div>
    <div class="scroll-list groups" role="tabpanel" tabindex="-1" id="groups-tab" aria-label="groups" hidden="hidden">
      <ul>
        <li>
          <img src="http://placeimg.com/80/80/arch?1" class="scroll-list-image" alt="" />
          <div>
            <h2>Developers</h2>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/arch?2" class="scroll-list-image" alt="" />
          <div>
            <h2>Analysts</h2>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/arch?3" class="scroll-list-image" alt="" />
          <div>
            <h2>IT-support</h2>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/arch?4" class="scroll-list-image" alt="" />
          <div>
            <h2>Designers</h2>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/arch?5" class="scroll-list-image" alt="" />
          <div>
            <h2>Project managers</h2>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/arch?6" class="scroll-list-image" alt="" />
          <div>
            <h2>Sales</h2>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/arch?6" class="scroll-list-image" alt="" />
          <div>
            <h2>Marketing</h2>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/arch?7" class="scroll-list-image" alt="" />
          <div>
            <h2>Team leads</h2>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/arch?7" class="scroll-list-image" alt="" />
          <div>
            <h2>Ninjas</h2>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/arch?8" class="scroll-list-image" alt="" />
          <div>
            <h2>Foodies</h2>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/arch?9" class="scroll-list-image" alt="" />
          <div>
            <h2>Hipsters</h2>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/arch?10" class="scroll-list-image" alt="" />
          <div>
            <h2>Geeks</h2>
          </div>
        </li>
        <li>
          <img src="http://placeimg.com/80/80/arch?11" class="scroll-list-image" alt="" />
          <div>
            <h2>Coffee snobs</h2>
          </div>
        </li>
      </ul>
    </div>
  </div>
</section>

CSS

              
                :root {
  --container-width: 480px;
  --groups-bg: #8B008B;
  --people-bg: #4B0082;
  --groups-color: #FFF;
  --people-color: #F0FFFF;
  --main-bg: #FFFAF0;
}

.container {
  display: grid;
}

.scroll-snap-panel {
  width: 100%;
  margin: 0 auto;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 50px;
  max-width: var(--container-width);
}

/* the scroll magic */

.scroll-container {
  position: relative;
  grid-template-columns: repeat(2, var(--container-width));
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  max-height: 85vh;
  border: 1px solid #CCC;
  border-top: 0;
}

.scroll-list {
  display: block;
  width: 100%;
  height: 80vh;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-snap-align: start;
  scroll-snap-type: y proximity;
  overflow-y: scroll;
}

.scroll-list > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scroll-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #aaa;
  scroll-snap-align: start;
}

/* styling of the inside of the list */

.scroll-list > li:last-child {
  border: 0;
}

.scroll-list-image {
  border-radius: 50%;
}

.people {
  background: var(--people-bg);
  color: var(--people-color);
}

.groups {
  background: var(--groups-bg);
  color: var(--groups-color);
}

/* some styling of the tabs */

.tabs-container {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 20px;
}

.tab {
  display: block;
  margin: 0;
  padding: 16px 8px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #FFF;
  border: 1px solid #CCC;
  border-left: 0;
  cursor: pointer;
}

.tab:first-child {
  border-top-left-radius: 5px;
  border: 1px solid #CCC;
}

.tab:last-child {
  border-top-right-radius: 5px;
}

.tab.active {
  border-bottom-color: transparent;
}

/* some basic styling (added to the bottom for convenience) */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #FEFEFE;
  background: var(--main-bg);
}

img {
  max-width: 100%;
  margin: 0;
}

h2 {
  margin: 0;
  font-family: 'Merriweather', serif;
  font-size: 1.5rem;
  line-height: 1.2;
}

JS

              
                /* 
using the scroll position to calculate the active state of tabs instead of click

Uses the The tabs.js for better accessibility
https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html
*/

const scrollContainer = document.querySelector(".scroll-container");
const scrollLists = document.querySelectorAll(".scroll-list");
const tablist = document.querySelectorAll('[role="tablist"]')[0];
let tabs;
let panels;

generateArrays();

function generateArrays() {
  tabs = document.querySelectorAll('[role="tab"]');
  panels = document.querySelectorAll('[role="tabpanel"]');
}

// For easy reference
var keys = {
  end: 35,
  home: 36,
  left: 37,
  up: 38,
  right: 39,
  down: 40
};

// Add or subtract depending on key pressed
var direction = {
  37: -1,
  38: -1,
  39: 1,
  40: 1
};

// Bind listeners
for (var i = 0; i < tabs.length; ++i) {
  addListeners(i);
}

function addListeners(index) {
  tabs[index].addEventListener("click", clickEventListener);
  tabs[index].addEventListener("keydown", keydownEventListener);
  tabs[index].addEventListener("keyup", keyupEventListener);

  // Build an array with all tabs (<button>s) in it
  tabs[index].index = index;
}

// When a tab is clicked, activateTab is fired to activate it
function clickEventListener(event) {
  var tab = event.target;
  activateTab(tab, false);
}

// When a tab is clicked, activateTab is fired to activate it
function clickEventListener(event) {
  var tab = event.target;
  activateTab(tab, false);
}

// Handle keydown on tabs
function keydownEventListener(event) {
  var key = event.keyCode;

  switch (key) {
    case keys.end:
      event.preventDefault();
      // Activate last tab
      activateTab(tabs[tabs.length - 1]);
      break;
    case keys.home:
      event.preventDefault();
      // Activate first tab
      activateTab(tabs[0]);
      break;

    // Up and down are in keydown
    // because we need to prevent page scroll >:)
    case keys.up:
    case keys.down:
      determineOrientation(event);
      break;
  }
}

// Handle keyup on tabs
function keyupEventListener(event) {
  var key = event.keyCode;

  switch (key) {
    case keys.left:
    case keys.right:
      determineOrientation(event);
      break;
    case keys.delete:
      determineDeletable(event);
      break;
  }
}

// When a tablist’s aria-orientation is set to vertical,
// only up and down arrow should function.
// In all other cases only left and right arrow function.
function determineOrientation(event) {
  var key = event.keyCode;
  var vertical = tablist.getAttribute("aria-orientation") == "vertical";
  var proceed = false;

  if (vertical) {
    if (key === keys.up || key === keys.down) {
      event.preventDefault();
      proceed = true;
    }
  } else {
    if (key === keys.left || key === keys.right) {
      proceed = true;
    }
  }

  if (proceed) {
    switchTabOnArrowPress(event);
  }
}

// Either focus the next, previous, first, or last tab
// depending on key pressed
function switchTabOnArrowPress(event) {
  var pressed = event.keyCode;

  for (var x = 0; x < tabs.length; x++) {
    tabs[x].addEventListener("focus", focusEventHandler);
  }

  if (direction[pressed]) {
    const target = event.target;
    if (target.index !== undefined) {
      if (tabs[target.index + direction[pressed]]) {
        tabs[target.index + direction[pressed]].focus();
      } else if (pressed === keys.left || pressed === keys.up) {
        focusLastTab();
      } else if (pressed === keys.right || pressed == keys.down) {
        focusFirstTab();
      }
    }
  }
}

  // Make a guess
  function focusFirstTab() {
    tabs[0].focus();
  }

  // Make a guess
  function focusLastTab() {
    tabs[tabs.length - 1].focus();
  }

// Activates any given tab panel
function activateTab(tab, setFocus) {
  setFocus = setFocus || true;
  // Deactivate all other tabs
  deactivateTabs();

  // Remove tabindex attribute
  tab.removeAttribute("tabindex");

  // Set the tab as selected
  tab.setAttribute("aria-selected", "true");

  // Get the value of aria-controls (which is an ID)
  var controls = tab.getAttribute("aria-controls");

  // New: set the container to scroll to show active state
  const target = document.getElementById(tab.dataset.target).offsetLeft;
  scrollContainer.scrollLeft = target;

  // Set focus when required
  if (setFocus) {
    tab.focus();
  }
}

// Deactivate all tabs and tab panels
function deactivateTabs() {
  for (let t = 0; t < tabs.length; t++) {
    tabs[t].setAttribute("tabindex", "-1");
    tabs[t].setAttribute("aria-selected", "false");
    tabs[t].removeEventListener("focus", focusEventHandler);
  }
}


function focusEventHandler(event) {
  var target = event.target;

  setTimeout(checkTabFocus, 0, target);
}

// Only activate tab on focus if it still has focus after the delay
function checkTabFocus(target) {
  var focused = document.activeElement;

  if (target === focused) {
    activateTab(target, false);
  }
}

/* when the scrollcontainer is scrolled horizontally, check the current scrollposition is the same as the left offset, and set the tab active when that's the case */

scrollContainer.addEventListener("scroll", () => {
  let scrollPos = scrollContainer.scrollLeft;

  scrollLists.forEach((list) => {
    let listId = list.id;
    let listButton = document.querySelector(`.tab[data-target="${listId}"]`);
    if (scrollPos === list.offsetLeft) {
      [...listButton.parentElement.children].forEach((sib) => {
        sib.classList.remove("active");
      });
      listButton.classList.add("active");
      deactivateTabs();
      activateTab(listButton);
      list.tabIndex = "0";
    } else {
      list.tabIndex = "-1";
    }
  });
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions