Button

Athena UI - Button

A Button is a simple UI component that listens for one event (typically click), and emits another (next, previous, play, pause, cancel, save).

Requirements

• Listen for a configurable event that defaults to 'click'.
• On event emit another configurable event.

Accessibility

• Pressing Enter or the space bar executes the action for the button.
• If button activation closes the containing entity or launches another entity, then focus moves to the newly opened entity ( ex. opening a dialog, showing more or less content, etc. )
• If button activation does not close or dismiss the containing entity, then focus remains on the button ( ex. carousel ).

More details at http://dev.aol.com/dhtml_style_guide#button.

Markup

Simple Button

<button data-athena="ui:Button" data-athena-config="{
    'ui:Button': {
        action: 'next'
    }
}">Click Me</button>

This means that we associate the <button> element's behavior with the Button control which notifies the observer of the "next" action on click.

The attribute "data-athena" denotes the name of the control - in this case ui:Button. The attribute "data-athena-config" contains a list of JSON objects - in this case, there's only one component that the <button> associates with - that describe the behavior of the ui:Button which is to publish the "next" action on click.

Link as Button

<a href="http://go.to/someplace/else" data-athena="ui:Button" data-athena-config="{
    'ui:Button': {
        action: 'next'
    }
}">Click Me</a>

Note: The Button component automatically adds appropriate ARIA roles to anchor tags used as virtual buttons.

Form Input as Button

<input type="button" value="Click Me!" data-athena="ui:Button" data-athena-config="{
    'ui:Button': {
        action: 'next'
    }
}">

Complex Next Button Examples with a Carousel

All of the buttons in this example are functionally equivalent.

<div id="carousel" data-athena="ui:Carousel" data-athena-config="{ ui:Carousel:{ observe: '#next_button, #other_next_button' } }">
    <ul>
        <li></li>
        <li></li>
    </ul>
    <button data-athena="ui:Button" data-athena-config="{ 'ui:Button': { action: 'next' } }">NEXT</button>
    <button data-athena="ui:Button:Next">NEXT</button>
</div>

<button data-athena="ui:Button" data-athena-config="{ 'ui:Button': { notify: '#carousel', action: 'next' } }">NEXT</button>
<button data-athena="ui:Button:Next" data-athena-config="{ 'ui:Button': { notify: '#carousel' } }">NEXT</button>

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

Implicit Notification of Actions via Event Bubbling

In the example above the buttons inside of #carousel implicitly notify the carousel of actions through bubbling.

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

This button does the same, but uses a the Next Button control.

<button data-athena="ui:Button:Next">NEXT</button>

In short, the <button> element associates with the Next Button control which implicitly publishes a "next" action. From a file perspective, ui:Button is Button.js and Button:Next is /Button/Next.js.

Explicit Notification of Actions via Configuration

In the example above, buttons outside of #carousel notify carousel of an action through a notify configuration. Here, we target the carousel <div> where id="carousel", but it can be any selector. You read this as, "Associate a <button> element with a Button control that when clicked notifies the element with id='carousel' the 'next' action."

<button data-athena="ui:Button" data-athena-config="{ 'ui:Button': { notify: '#carousel', action: 'next' } }">NEXT</button>

Using the Next Button control:

<button data-athena="ui:Button:Next" data-athena-config="{ 'ui:Button:Next': { notify: '#carousel' } }">NEXT</button>

Explicit Observation of Actions via Configuration

In the example above these buttons are explicitly observed by #carousel through the configuration.

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