Testimonials: Dot Nav

Notes:

  • Make sure to provide readable and meaningful IDs to the data-tabpanels. Those IDs will be used in the URL to link to the specific tabpanel.
  • If you want the tabs to open as soon as they are moved to / focused using keyboard, set manual: false in the config object.
  • Make sure the data-* attributes in the markup are always there.
  • Keep the source code order in mind: The first tab will control the first tabpanel (in the source order). The second tab will control the second tabpanel. And so on.
  • Make sure to provide succinct and meaningful tab titles to the dot navigation.
<section class="ps ps-testimonials">
    <div class="ps__wrap">

        <div class="ps__main grid grid--12">
            <div class="span-1-12">
                <div class="c-tabs" data-tabs>

                    <div class="c-tabs__tablist c-tabs__tablist--dotnav span-1-12" data-tablist hidden>
                        <!-- it is *imperative* that the buttons have an accessible name provided in aria-label because they are empty -->
                        <button class="c-tabs__tab dot" data-tab><span class="dot-label">Tab 1
                Title</span></button>
                        <button class="c-tabs__tab dot" data-tab><span class="dot-label">Tab 2
                Title</span></button>
                        <button class="c-tabs__tab dot" data-tab><span class="dot-label">Tab 3
                Title</span></button>
                        <button class="c-tabs__tab dot" data-tab><span class="dot-label">Tab 4
                Title</span></button>
                        <button class="c-tabs__tab dot" data-tab><span class="dot-label">Tab 5
                Title</span></button>
                        <button class="c-tabs__tab dot" data-tab><span class="dot-label">Tab 6
                Title</span></button>
                    </div>

                    <section id="UNIQUE_LABEL_1" class="c-tabs__tabpanel span-1-12" data-tabpanel>
                        <div class="ps-testimonials__text span-1-6">
                            <div class="ps__head ps__head--left">
                                <header class="ps__header">
                                    <span class="ps__kicker">Testimonial #1</span>
                                    <h2 class="ps__title" aria-level="">It's more than a budget manager</h2>
                                </header>
                                <div class="ps__desc">
                                    <p>
                                        Learn about Prismic by reading questions and answers. It’s almost like talking to a human – and maybe even better.
                                    </p>
                                </div>
                            </div>
                            <blockquote class="ps-testimonials__quote">
                                <p>
                                    “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat risus id tristique tincidunt.”
                                </p>
                                <cite class="ps-testimonials__cite">
                  <img class="ps-testimonials__author-img" src="../../img/author-img.png" alt="">
                  <div class="ps-testimonials__author">
                    <p class="ps-testimonials__author-name">Femke Van Schoohoven</p>
                    <p class="ps-testimonials__author-title">Creative Director at Netflix</p>
                  </div>
                </cite>
                            </blockquote>
                        </div>

                        <div class="ps-testimonials__img-wrapper span-7-12">
                            <img src=" ../../img/illustrations/ice-cream.png" alt="" class="ps-testimonials__img" />
                        </div>
                    </section>

                    <section id="UNIQUE_LABEL_2" class="c-tabs__tabpanel span-1-12" data-tabpanel>
                        <div class="ps-testimonials__text span-1-6">
                            <div class="ps__head ps__head--left">
                                <header class="ps__header">
                                    <span class="ps__kicker">Testimonial #2</span>
                                    <h2 class="ps__title" aria-level="">It's more than a budget manager</h2>
                                </header>
                                <div class="ps__desc">
                                    <p>
                                        Learn about Prismic by reading questions and answers. It’s almost like talking to a human – and maybe even better.
                                    </p>
                                </div>
                            </div>

                            <blockquote class="ps-testimonials__quote">
                                <p>
                                    “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat risus id tristique tincidunt.”
                                </p>
                                <cite class="ps-testimonials__cite">
                  <img class="ps-testimonials__author-img" src="../../img/author-img.png" alt="">
                  <div class="ps-testimonials__author">
                    <p class="ps-testimonials__author-name">Femke Van Schoohoven</p>
                    <p class="ps-testimonials__author-title">Creative Director at Netflix</p>
                  </div>
                </cite>
                            </blockquote>
                        </div>

                        <div class="ps-testimonials__img-wrapper span-7-12">
                            <img src=" ../../img/illustrations/ice-cream.png" alt="" class="ps-testimonials__img" />
                        </div>
                    </section>

                    <section id="UNIQUE_LABEL_3" class="c-tabs__tabpanel span-1-12" data-tabpanel>
                        <div class="ps-testimonials__text span-1-6">
                            <div class="ps__head ps__head--left">
                                <header class="ps__header">
                                    <span class="ps__kicker">Testimonial #3</span>
                                    <h2 class="ps__title" aria-level="">It's more than a budget manager</h2>
                                </header>
                                <div class="ps__desc">
                                    <p>
                                        Learn about Prismic by reading questions and answers. It’s almost like talking to a human – and maybe even better.
                                    </p>
                                </div>
                            </div>

                            <blockquote class="ps-testimonials__quote">
                                <p>
                                    “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat risus id tristique tincidunt.”
                                </p>
                                <cite class="ps-testimonials__cite">
                  <img class="ps-testimonials__author-img" src="../../img/author-img.png" alt="">
                  <div class="ps-testimonials__author">
                    <p class="ps-testimonials__author-name">Femke Van Schoohoven</p>
                    <p class="ps-testimonials__author-title">Creative Director at Netflix</p>
                  </div>
                </cite>
                            </blockquote>
                        </div>

                        <div class="ps-testimonials__img-wrapper span-7-12">
                            <img src=" ../../img/illustrations/ice-cream.png" alt="" class="ps-testimonials__img" />
                        </div>
                    </section>

                    <section id="UNIQUE_LABEL_4" class="c-tabs__tabpanel span-1-12" data-tabpanel>
                        <div class="ps-testimonials__text span-1-6">
                            <div class="ps__head ps__head--left">
                                <header class="ps__header">
                                    <span class="ps__kicker">Testimonial #4</span>
                                    <h2 class="ps__title" aria-level="">It's more than a budget manager</h2>
                                </header>
                                <div class="ps__desc">
                                    <p>
                                        Learn about Prismic by reading questions and answers. It’s almost like talking to a human – and maybe even better.
                                    </p>
                                </div>
                            </div>

                            <blockquote class="ps-testimonials__quote">
                                <p>
                                    “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat risus id tristique tincidunt.”
                                </p>
                                <cite class="ps-testimonials__cite">
                  <img class="ps-testimonials__author-img" src="../../img/author-img.png" alt="">
                  <div class="ps-testimonials__author">
                    <p class="ps-testimonials__author-name">Femke Van Schoohoven</p>
                    <p class="ps-testimonials__author-title">Creative Director at Netflix</p>
                  </div>
                </cite>
                            </blockquote>
                        </div>

                        <div class="ps-testimonials__img-wrapper span-7-12">
                            <img src=" ../../img/illustrations/ice-cream.png" alt="" class="ps-testimonials__img" />
                        </div>
                    </section>

                    <section id="UNIQUE_LABEL_5" class="c-tabs__tabpanel span-1-12" data-tabpanel>
                        <div class="ps-testimonials__text span-1-6">
                            <div class="ps__head ps__head--left">
                                <header class="ps__header">
                                    <span class="ps__kicker">Testimonial #5</span>
                                    <h2 class="ps__title" aria-level="">It's more than a budget manager</h2>
                                </header>
                                <div class="ps__desc">
                                    <p>
                                        Learn about Prismic by reading questions and answers. It’s almost like talking to a human – and maybe even better.
                                    </p>
                                </div>
                            </div>

                            <blockquote class="ps-testimonials__quote">
                                <p>
                                    “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat risus id tristique tincidunt.”
                                </p>
                                <cite class="ps-testimonials__cite">
                  <img class="ps-testimonials__author-img" src="../../img/author-img.png" alt="">
                  <div class="ps-testimonials__author">
                    <p class="ps-testimonials__author-name">Femke Van Schoohoven</p>
                    <p class="ps-testimonials__author-title">Creative Director at Netflix</p>
                  </div>
                </cite>
                            </blockquote>
                        </div>

                        <div class="ps-testimonials__img-wrapper span-7-12">
                            <img src=" ../../img/illustrations/ice-cream.png" alt="" class="ps-testimonials__img" />
                        </div>
                    </section>

                    <section id="UNIQUE_LABEL_6" class="c-tabs__tabpanel span-1-12" data-tabpanel>
                        <div class="ps-testimonials__text span-1-6">
                            <div class="ps__head ps__head--left">
                                <header class="ps__header">
                                    <span class="ps__kicker">Testimonial #6</span>
                                    <h2 class="ps__title" aria-level="">It's more than a budget manager</h2>
                                </header>
                                <div class="ps__desc">
                                    <p>
                                        Learn about Prismic by reading questions and answers. It’s almost like talking to a human – and maybe even better.
                                    </p>
                                </div>
                            </div>

                            <blockquote class="ps-testimonials__quote">
                                <p>
                                    “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat risus id tristique tincidunt.”
                                </p>
                                <cite class="ps-testimonials__cite">
                  <img class="ps-testimonials__author-img" src="../../img/author-img.png" alt="">
                  <div class="ps-testimonials__author">
                    <p class="ps-testimonials__author-name">Femke Van Schoohoven</p>
                    <p class="ps-testimonials__author-title">Creative Director at Netflix</p>
                  </div>
                </cite>
                            </blockquote>
                        </div>

                        <div class="ps-testimonials__img-wrapper span-7-12">
                            <img src=" ../../img/illustrations/ice-cream.png" alt="" class="ps-testimonials__img" />
                        </div>
                    </section>

                </div>

            </div>
        </div>
    </div>
</section>
  • Content: 
    "use strict";

if (typeof Object.assign != "function") {
  // Must be writable: true, enumerable: false, configurable: true
  Object.defineProperty(Object, "assign", {
    value: function assign(target, varArgs) {
      // .length of function is 2

      if (target == null) {
        // TypeError if undefined or null
        throw new TypeError(
          "Cannot convert undefined or null to object"
        );
      }

      var to = Object(target);

      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];

        if (nextSource != null) {
          // Skip over if undefined or null
          for (var nextKey in nextSource) {
            // Avoid bugs when hasOwnProperty is shadowed
            if (
              Object.prototype.hasOwnProperty.call(
                nextSource,
                nextKey
              )
            ) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}
// add utilities; borrowed from: https://scottaohara.github.io/a11y_tab_widget/
var util = {
  keyCodes: {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39,
    HOME: 36,
    END: 35,
    ENTER: 13,
    SPACE: 32,
    DELETE: 46,
    TAB: 9
  },

  generateID: function (base) {
    return base + Math.floor(Math.random() * 999);
  },

  getUrlHash: function () {
    return window.location.hash.replace('#', '');
  },

  /**
   * Use history.replaceState so clicking through Tabs
   * does not create dozens of new history entries.
   * Browser back should navigate to the previous page
   * regardless of how many Tabs were activated.
   *
   * @param {string} hash
   */
  setUrlHash: function (hash) {
    if (history.replaceState) {
      history.replaceState(null, '', '#' + hash);
    } else {
      location.hash = hash;
    }
  }
};




(function (w, doc, undefined) {

  var ARIAaccOptions = {
    manual: true,
    open: 0
  }

  var ARIAtabs = function (inst, options) {
    console.log('running');

    var _options = Object.assign(ARIAaccOptions, options);
    var el = inst;
    var tablist = el.querySelector("[data-tablist]");
    var tabs = Array.from(el.querySelectorAll("[data-tab]"));
    var tabpanels = Array.from(el.querySelectorAll("[data-tabpanel]"));
    var tabsID = util.generateID('ps__tabs-');
    var orientation = el.getAttribute('data-tabs-orientation');
    var currentIndex = _options.open;
    var selectedTab = currentIndex;
    var manual = _options.manual;

    el.setAttribute('id', tabsID);

    var init = function () {
      el.classList.add('js-tabs');
      tablist.removeAttribute('hidden');
      setupTabList();
      setupTabs();
      setupTabPanels();
    };

    var setupTabList = function () {
      tablist.setAttribute("role", "tablist");
      if (orientation == 'vertical') tablist.setAttribute("aria-orientation", "vertical");
    }

    var setupTabs = function () {

      tabs.forEach((tab, index) => {
        tab.setAttribute('role', 'tab');
        // each tab needs an ID that will be used to label its corresponding panel
        tab.setAttribute('id', tabsID + '__tab-' + index);
        tab.setAttribute('data-controls', tabpanels[index].getAttribute('id'));

        // first tab is initially active
        if (index === currentIndex) {
          selectTab(tab);
          // updateUrlHash();
        }

        if (tab.getAttribute('data-controls') === util.getUrlHash()) {
          currentIndex = index;
          selectedTab = index;
          selectTab(tab);
        }

        tab.addEventListener('click', (e) => {
          e.preventDefault();
          currentIndex = index;
          selectedTab = index;
          focusCurrentTab();
          selectTab(tab);
          updateUrlHash();
        }, false);

        tab.addEventListener('keydown', (e) => {
          tabKeyboardRespond(e, tab);
        }, false);
      });
    }

    var focusCurrentTab = function () {
      tabs[currentIndex].focus();
    }

    var updateUrlHash = function () {
      var active = tabs[selectedTab];
      util.setUrlHash(active.getAttribute('data-controls'));
    };

    var selectTab = function (tab) {
      // unactivate all other tabs
      tabs.forEach(tab => {
        tab.setAttribute('aria-selected', 'false');
        tab.setAttribute('tabindex', '-1');
      });
      //activate current tab
      tab.setAttribute('aria-selected', 'true');
      tab.setAttribute('tabindex', '0');

      // activate corresponding panel 
      showTabpanel(tab);
    }

    var setupTabPanels = function () {
      tabpanels.forEach((tabpanel, index) => {
        tabpanel.setAttribute('role', 'tabpanel');
        tabpanel.setAttribute('tabindex', '-1');
        tabpanel.setAttribute('hidden', '');

        if (index == currentIndex) {
          tabpanel.removeAttribute('hidden');
        }

        tabpanel.addEventListener('keydown', (e) => {
          panelKeyboardRespond(e);
        }, false);

        tabpanel.addEventListener("blur", () => {
          tabpanel.setAttribute('tabindex', '-1');
        }, false);
      });
    }


    var panelKeyboardRespond = function (e) {
      var keyCode = e.keyCode || e.which;

      switch (keyCode) {
        case util.keyCodes.TAB:
          tabpanels[currentIndex].setAttribute('tabindex', '-1');
          break;

        default:
          break;
      }
    }


    var showTabpanel = function (tab) {
      tabpanels.forEach((tabpanel, index) => {
        tabpanel.setAttribute('hidden', '');
        tabpanel.removeAttribute('tabindex');

        if (index == currentIndex) {
          tabpanel.removeAttribute('hidden');
          tabpanel.setAttribute('aria-labelledby', tabs[currentIndex].getAttribute('id'));
          tabpanel.setAttribute('tabindex', '0');
        }
      });
    }

    var incrementcurrentIndex = function () {
      if (currentIndex < tabs.length - 1) {
        return ++currentIndex;
      }
      else {
        currentIndex = 0;
        return currentIndex;
      }
    };


    var decrementcurrentIndex = function () {
      if (currentIndex > 0) {
        return --currentIndex;
      }
      else {
        currentIndex = tabs.length - 1;
        return currentIndex;
      }
    };



    var tabKeyboardRespond = function (e, tab) {
      var firstTab = tabs[0];
      var lastTab = tabs[tabs.length - 1];

      var keyCode = e.keyCode || e.which;

      switch (keyCode) {
        case util.keyCodes.UP:
        case util.keyCodes.LEFT:
          e.preventDefault();
          decrementcurrentIndex();
          focusCurrentTab();

          if (!manual) {
            selectedTab = currentIndex;
            selectTab(tabs[selectedTab]);
            updateUrlHash();
          }

          break;


        case util.keyCodes.DOWN:
        case util.keyCodes.RIGHT:
          e.preventDefault();
          incrementcurrentIndex();
          focusCurrentTab();

          if (!manual) {
            selectedTab = currentIndex;
            selectTab(tabs[selectedTab]);
            updateUrlHash();
          }

          break;


        case util.keyCodes.ENTER:
        case util.keyCodes.SPACE:
          e.preventDefault();
          selectedTab = currentIndex;
          selectTab(tabs[selectedTab]);
          updateUrlHash();

          break;


        case util.keyCodes.TAB:
          tabpanels[selectedTab].setAttribute('tabindex', '0');
          currentIndex = selectedTab;

          break;


        case util.keyCodes.HOME:
          e.preventDefault();
          firstTab.focus();
          updateUrlHash();

          break;


        case util.keyCodes.END:
          e.preventDefault();
          lastTab.focus();
          updateUrlHash();

          break;
      }

    }

    init.call(this);
    return this;
  }; // ARIAtabs()

  w.ARIAtabs = ARIAtabs;

})(window, document);




var tabsInstance = "[data-tabs]";
var els = document.querySelectorAll(tabsInstance);
var allTabs = [];

// Generate all tabs instances
for (var i = 0; i < els.length; i++) {
  var nTabs = new ARIAtabs(els[i], { manual: true }); // if manual is set to false, the tabs open on focus without needing an ENTER or SPACE press
  allTabs.push(nTabs);
}
  • URL: /components/raw/testimonials/testimonials.js
  • Filesystem Path: src/components/testimonials/testimonials.js
  • Size: 8.3 KB
  • Content: 
    /**************************************************\
 * Testimonials component-specific styles.
 * Main general styles are in the _tabs.scss file
 ***************************************************/

.ps-testimonials {
  .c-tabs {
    // this ensures the tablist is unerneath the tabpanel as per the design
    // no-flexbox browsers will show the tablist above the tabpanels by default
    // it is important to keep the tablist above the tabpanels in the source order for proper keyboard navigation
    display: flex;
    flex-direction: column-reverse;
  }

  .c-tabs__tablist {
    grid-row: 2;
    padding: var(--v-margin);


    @media all and (min-width: 50em) {
      margin-top: calc(var(--v-space) / 2);
    }
  }

  .c-tabs__tablist--imgs {
    margin-left: calc(var(--v-margin) * -1);
  }

  .c-tabs__tablist--imgs .c-tabs__tab {
    min-width: 44px;
    margin-right: 2rem;
    padding-bottom: .5rem;
    border-bottom: 4px solid transparent;

    &:last-of-type() {
      margin-right: 0;
    }

    &[aria-selected="true"] {
      border-bottom: 4px solid var(--color--primary);
    }

    &:active,
    &:focus,
    &:hover,
    &.focus-visible {
      outline: none;
      border-bottom: 4px solid #000;
    }
  }

  .c-tabs__tabpanel {
    @media all and (min-width:50em) {
      display: flex;

      @supports (display:grid) {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-column-gap: var(--h-padding);
        align-items: stretch;
      }

      &[hidden] {
        display: none; // we don't want the tabpanel to show up when it should be hidden
      }
    }
  }
}

.ps-testimonials__img-wrapper {
  background-color: var(--color--secondary);
  border-radius: 16px;


  @media all and (min-width:50em) {
    width: 100%;
    height: auto;
    margin-left: 2rem;

    @supports (display:grid) {
      width: auto;
      margin-left: 0;
    }
  }
}

.ps-testimonials__quote {
  background-color: #000;
  color: #fff;
  margin: var(--v-margin) 1rem var(--v-margin) 0;
  padding: 1.5rem;
  border-radius: 8px;
  position: relative;
  grid-row: 2;
  box-shadow: 0 12px 18px -8px rgba(0, 0, 0, 0.15), 0 12px 55px 10px rgba(0, 0, 0, 0.07);

  @media all and (min-width: 50em) {
    margin: 0 1rem 0 0;
  }

  font-size: calc(1rem * var(--text-min-l));

  * {
    line-height: 1.5;
  }

  @media screen and (min-width: 40rem) {
    font-size: calc(calc(1rem * var(--text-min-l)) + (var(--text-max-l) - var(--text-min-l)) * (100vw - 40rem) / (80 - 40));
  }

  @media screen and (min-width: 80rem) {
    font-size: calc(1rem * var(--text-max-l));
  }

  /* the triangle */
  &::after {
    display: block;
    position: absolute;
    content: "";
    width: 1rem;
    height: 1.625rem;
    background-image: url('../img/quote-triangle.svg');
    background-size: 100% auto;
    transform: rotate(90deg);
    background-repeat: no-repeat;
    bottom: -1rem;
    left: 2.5rem;

    @media all and (min-width: 50em) {
      transform: none;
      bottom: auto;
      left: auto;
      right: -1rem;
      top: 2.5rem;
    }
  }
}

.ps-testimonials__cite {
  font-size: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  font-style: normal;
}

.ps-testimonials__author-img {
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
}

.ps-testimonials__author {
  p {
    margin-bottom: 0;
  }
}

.ps-testimonials__author-name {
  font-weight: bold;
}
  • URL: /components/raw/testimonials/testimonials.scss
  • Filesystem Path: src/components/testimonials/testimonials.scss
  • Size: 3.4 KB
  • Content: 
    title: Testimonials
# notes: "You can have a note here; it will override the README.md notes"
context:
  text:
  • URL: /components/raw/testimonials/testimonials.yml
  • Filesystem Path: src/components/testimonials/testimonials.yml
  • Size: 114 Bytes