Missing.js
Missing.js is a JavaScript library implementing common UI patterns.
§ Tabs
See ARIA § Tabs
Add tabs.js as a module script to your page
and mark up your tabs with the appropriate ARIA roles.
Behavior will be added automatically.
<script type="module" src="https://unpkg.com/missing.css@1.1.1/dist/js/tabs.js"></script>
The tabs behavior emits these custom events:
missing-switch-awayon a tab after switching away from it.detail.to: the newly active tab
missing-switch-toon a tab when switching to itdetail.from: the previously active tab
missing-changeon the tablist element when changing tabsdetail.to,detail.from
§ Initializing dynamic content
For dynamically inserted content: initialize it as such:
import tabs from "https://unpkg.com/missing.css@1.1.1/dist/js/tabs.js";
// ... insert some content ...
tabs(theContentIJustInserted);
Any elements that are inside a shadow DOM will also need to be initialized explicitly this way.
All of our components will find elements that need initialization within the subtree you pass in ---
you could pass the whole document every time if you wanted to.
§ Menu
See ARIA § menu
<script type="module" src="https://unpkg.com/missing.css@1.1.1/dist/js/menu.js">
or
import { menu, menuButton } from "https://unpkg.com/missing.css@1.1.1/dist/js/menu.js";
All notes above about initializing dynamic content apply here.
§ Expand/collapse navbar
<script type="module" src="https://unpkg.com/missing.css@1.1.1/dist/js/overflow-nav.js">
Make sure to add:
- the
data-overflow-navattribute to your navbar. - inside that navbar, a button with a
data-nav-expanderattribute.
<header class="navbar" data-overflow-nav>
<button class="iconbutton" data-nav-expander aria-hidden>
☰ <!-- trigram for heaven -->
</button>
<!-- rest of navbar... -->
</header>
The navbar will remain horizontally scrollable.
All notes above about initializing dynamic content apply here (for all those times you dynamically add navbars to your page).