aria-selected وأنماط علامات التبويب

نظرة عامة على نمط علامات التبويب

بنية علامات التبويب باستخدام ARIA

<div role="tablist" aria-label="Account Settings">
  <button role="tab" id="tab-1" aria-selected="true"
          aria-controls="panel-1">Profile</button>
  <button role="tab" id="tab-2" aria-selected="false"
          aria-controls="panel-2" tabindex="-1">Security</button>
  <button role="tab" id="tab-3" aria-selected="false"
          aria-controls="panel-3" tabindex="-1">Notifications</button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Profile content...
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Security content...
</div>

aria-selected

<!-- In a tablist: -->
<button role="tab" aria-selected="true">Active Tab</button>
<button role="tab" aria-selected="false">Other Tab</button>

<!-- In a listbox: -->
<ul role="listbox">
  <li role="option" aria-selected="false">Option 1</li>
  <li role="option" aria-selected="true">Option 2</li>
</ul>

نمط لوحة المفاتيح لعلامات التبويب

تنفيذ لوحة المفاتيح لعلامات التبويب

const tabs = document.querySelectorAll('[role="tab"]');

tabs.forEach((tab, i) => {
  tab.addEventListener('keydown', (e) => {
    let target;
    if (e.key === 'ArrowRight') target = tabs[(i + 1) % tabs.length];
    if (e.key === 'ArrowLeft') target = tabs[(i - 1 + tabs.length) % tabs.length];
    if (e.key === 'Home') target = tabs[0];
    if (e.key === 'End') target = tabs[tabs.length - 1];

    if (target) {
      activateTab(target);
      target.focus();
    }
  });
});

دالة activateTab

function activateTab(selectedTab) {
  // Deactivate all tabs:
  document.querySelectorAll('[role="tab"]').forEach(tab => {
    tab.setAttribute('aria-selected', 'false');
    tab.setAttribute('tabindex', '-1');
    document.getElementById(tab.getAttribute('aria-controls')).hidden = true;
  });

  // Activate selected tab:
  selectedTab.setAttribute('aria-selected', 'true');
  selectedTab.setAttribute('tabindex', '0');
  document.getElementById(selectedTab.getAttribute('aria-controls')).hidden = false;
}

نمط tabindex المتنقّل

<!-- Only the selected tab has tabindex=0 -->
<button role="tab" aria-selected="true" tabindex="0">Active</button>
<button role="tab" aria-selected="false" tabindex="-1">Other</button>
<button role="tab" aria-selected="false" tabindex="-1">Another</button>

<!-- When user arrows to a new tab:
     1. Set new tab tabindex=0
     2. Set old tab tabindex=-1
     3. Focus new tab -->

aria-selected مقابل aria-checked

التركيز على لوحة علامات التبويب

// Users can then Tab to move into the panel content
// The panel should not automatically receive focus

// Exception: if the panel is very long, consider moving focus
// to the panel heading for long-form content tabs

// Panel should have tabindex=-1 for programmatic focus:
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="-1">

التفعيل التلقائي مقابل اليدوي

تنسيق علامات التبويب التي يمكن الوصول إليها

[role="tab"] {
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

[role="tab"][aria-selected="true"] {
  border-bottom-color: #0070f3;
  font-weight: bold;
}

/* :focus-visible for keyboard users: */
[role="tab"]:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: -2px;
}

تحقق سريع

مراجعة: aria-selected وعلامات التبويب