Skip to Main Content

Lesson 9 Practice Activities

Tab Component

This component utilizes a tab interface to control the display of the content. It includes ARIA roles and attributes. JavaScript is used to change the selected tab and content to display. The code to create the component can be found in the code blocks below.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem sit delectus perferendis tempore deserunt perspiciatis veniam doloremque dignissimos enim, quaerat soluta ipsum molestiae et ipsam nihil amet optio minus expedita nostrum fuga ut iste.

HTML Code
<div class="tab-menu">
  <ul class="tab-list" role="tablist" aria-label="Example content tabs">
    <li role="presentation">
      <button
        class="tab"
        id="tab1"
        role="tab"
        aria-selected="true"
        aria-controls="content1"
      >
        Tab 1
      </button>
    </li>

    <li role="presentation">
      <button
        class="tab"
        id="tab2"
        role="tab"
        aria-selected="false"
        aria-controls="content2"
      >
        Tab 2
      </button>
    </li>

    <li role="presentation">
      <button
        class="tab"
        id="tab3"
        role="tab"
        aria-selected="false"
        aria-controls="content3"
      >
        Tab 3
      </button>
    </li>
  </ul>
</div>

<div
  class="tab-content"
  id="content1"
  role="tabpanel"
  aria-labelledby="tab1"
  tabindex="0"
>
  <p>Add Tab 1 content here.</p>
</div>

<div
  class="tab-content"
  id="content2"
  role="tabpanel"
  aria-labelledby="tab2"
  tabindex="0"
  hidden
>
  <p>Add Tab 2 content here.</p>
</div>

<div
  class="tab-content"
  id="content3"
  role="tabpanel"
  aria-labelledby="tab3"
  tabindex="0"
  hidden
>
  <p>Add Tab 3 content here.</p>
</div>
CSS Code
.tab-component {
  width: 80%;
  margin: 1rem auto;
}

.tab-list {
  display: flex;
  list-style: none;
}

.tab {
  padding: 1rem;
  background-color: var(--accent-color-100);
  border: thin solid var(--main-color-800);
  border-top-width: thick;
  border-radius: .5rem .5rem 0 0;
  text-transform: uppercase;
  cursor: pointer;
}

.tab[aria-selected="true"] {
  border-color: var(--main-color-800);
  border-bottom-color: var(--accent-color-100);
}

.tab[aria-selected="false"] {
  background-color: var(--accent-color-50);
  border-color: var(--main-color-400);
  border-bottom-color: var(--main-color-800);
}

.tab:hover {
  border-color: var(--accent-color-600);
  background-image: linear-gradient(
    to top,
    var(--accent-color-800),
    var(--accent-color-600)
  );
  color: var(--accent-color-100);
}

.tab-content {
  position: relative;
  top: -1px;
  border: thin solid var(--main-color-800);
  background-color: var(--accent-color-100);
  padding: 1rem;
  border-radius: 0 .5rem .5rem .5rem;
}
JavaScript Code
function activateTab(selectedTab) {
  const tabs = document.querySelectorAll('[role="tab"]');
  const panels = document.querySelectorAll('[role="tabpanel"]');

  tabs.forEach(function (tab) {
    const isSelected = tab === selectedTab;

    tab.setAttribute("aria-selected", isSelected);
    tab.setAttribute("tabindex", isSelected ? "0" : "-1");
  });

  panels.forEach(function (panel) {
    panel.hidden =
      panel.id !== selectedTab.getAttribute("aria-controls");
  });
}