Carousel

Athena UI - Carousel

Requirements

TBD

Accessibility

When pressing carousel navigation buttons, focus remains on the button. More on button accessibility here.

When the carousel list has focus, keyboard shortcuts are available (keyboard behavior is from Hans Hillen@Github):

• Left Arrow - Move focus to the previous item
• Right Arrow - Move focus to the next item
• Page Up - Move focus to the first item in the next pane
• Page Down - Move focus to the previous item in the previous pane
• Home - Move focus to the first item in the list
• End - Move focus to the last item in the list

The carousel is an ARIA listbox widget -

<ol role="listbox" id="car-list">
  <li role="option" aria-selected="true" class="selected">one</li>
  <li role="option">two</li>
  <li role="option">three</li>
  <li role="option">four</li>
  <li role="option">five</li>
</ol>

<button aria-controls="car-list" id="btn-prev" data-athena="ui:Button" data-athena-config="{
  'ui:Button': {
    action: 'previous'
  }
}">Previous</button>

<button aria-controls="car-list" id="btn-next" data-athena="ui:Button" data-athena-config="{
  'ui:Button': {
    action: 'next'
  }
}">Next</button>

A listbox is the best description of the carousel because it's an ARIA interface widget that allows you to select one or more items from a list of choices. By definition, list boxes contain children ( ex. items in the carousel ) whose role is option. A selected item - in our case, the first item with value "one" - has the ARIA state "selected" and so has the attribute aria-selected set true.

The buttons control the carousel so they have the attribute aria-controls set to reference the carousel by ID.

Markup

<ol id="car-list">
  <li class="selected">one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ol>

<button id="btn-prev" data-athena="ui:Button" data-athena-config="{
  'ui:Button': {
    action: 'previous'
  }
}">Previous</button>

<button id="btn-next" data-athena="ui:Button" data-athena-config="{
  'ui:Button': {
    action: 'next'
  }
}">Next</button>

Events

Notify

• playing -- Fires when the carousel starts playing
• paused -- Fires when the carouse stops playing

Observe

• selected (as from a List)
• max
• min
• play
• pause
• next
• previous
• first
• last
• select (as from a Button)