Aria Components Examples

This page represents the current state of v0.3.1 of the NPM package.

View the GitHub repository for other versions of this page.

Dialog

The Dialog presents a section of content as an overlay, or modal.

Open dialog

Disclosure

The Disclosure controls the visibility of a section of content

I'm sure there are many ways to present disclosures. I've chosen a definition list with a button as the controller.

Listbox

The Listbox presents an interactive popup containing a list of options.

  • Anchorage
  • Baltimore
  • Chicago
  • Dallas
  • El Paso
  • Fort Lauderdale
  • Grand Rapids
  • Hartford
  • Idaho Falls

MenuButton

The MenuButton presents a menu of links in an interactive popup when activated.

Menu

The Menu component denotes a menu of links, typically exposed by activating a MenuButton.

MenuBar

The MenuBar is a visually persistent list of links, with submenu lists opening in Popups.

Popup

Toggle Info

This is the Popup

This would typically be use within another interactive component, such as a MenuButton or Listbox. Authors must pass in a type, which will be used as the aria-haspopup value.

Read more about the Popup Component

Tablist

The Tablist presents panels of content, displayed one at a time by activating the associated tab.

Panel One

It is activated by either clicking or focusing Tab One. Arrow kays move between the tabs, and only the active tab's contents are visible at any given time.

Read about the Tablist Component

Panel Two

It is activated by Tab Two

This Tablist will fall back to a list of skip links.

Panel Three

It is activated by Tab Three

Sorry I don't have better content for these.

This is a Dialog Popup. The site's content wrapper is given an `aria-hidden` attribute in order to hide the main content while the Dialog is open. The "Close" button is required; if a reference to an existing close button is not passed in to the component, a very basic button will be created and inserted.

Keyboard focus is "trapped" within the Dialog, which prevents elements outside the Dialog from gaining focus until the Dialog is closed.

More about the Dialog Component More about the Popup Component