diff --git a/examples/button/button.html b/examples/button/button.html index 426e4759f9..97cb0377e2 100644 --- a/examples/button/button.html +++ b/examples/button/button.html @@ -52,7 +52,7 @@

Example

This Mute toggle button uses an a element.

Mute - + diff --git a/examples/button/button_idl.html b/examples/button/button_idl.html index 4660eb8c44..309da1e79c 100644 --- a/examples/button/button_idl.html +++ b/examples/button/button_idl.html @@ -1,18 +1,19 @@ - + Button Examples (IDL Version) | WAI-ARIA Authoring Practices 1.2 - - - - - - + + + + + + - - + + + +

Button Examples (IDL Version)

- NOTE: This is a draft example. - Please provide feedback in issue 727. -

-

- The following command and toggle button examples demonstrate the - button design pattern. + The following examples of the button design pattern demonstrate a new JavaScript syntax for coding ARIA attributes.

- The JavaScript for the examples on this page uses the IDL interface defined in ARIA 1.2. + The JavaScript for the example buttons on this page uses the IDL Interface defined in ARIA 1.2. + The purpose of these examples is to illustrate how to use IDL for ARIA Attribute Reflection and provide a test case for browser and assistive technology interoperability. + Specifically, the role and ariaPressed attributes are accessed using dot notation instead of setAttribute() and getAttribute(). In all other respects, these examples are identical to the Button Examples.

-

Similar examples include:

- - -
-

Example

-

- IMPORTANT: This example uses features of the draft ARIA 1.2 specification. As a draft specification, it is subject to change. Any support provided by browsers or assistive technologies is experimental. -

- -
-

This Print action button uses a div element.

-
Print Page
-

This Mute toggle button uses an a element.

- - Mute - - -
- -
- -
-

Keyboard Support

- - - - - - - - - - - - - - - - - -
KeyFunction
EnterActivates the button.
SpaceActivates the button.
-
- -
-

Role, Property, State, and Tabindex Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
button - div, a - -
    -
  • Identifies the element as a button widget.
    • -
  • Accessible name for the button is defined by the text content of the element.
    • -
-
- tabindex="0" - - div, a - -
    -
  • Includes the element in the tab sequence.
    • -
  • Needed on the a element because it does not have a href attribute.
    • -
-
aria-pressed="false"a -
    -
  • Identifies the button as a toggle button.
    • -
  • Indicates the toggle button is not pressed.
    • -
-
aria-pressed="true"a -
    -
  • Identifies the button as a toggle button.
    • -
  • Indicates the toggle button is pressed.
    • -
-
-
- -
-

Javascript and CSS Source Code

- -
- -
-

HTML Source Code

- -
- - -
+ +
+

Example

+ +

+ IMPORTANT: This example uses features of the draft ARIA 1.2 specification. As a draft specification, it is subject to change. Support provided by browsers or assistive technologies is experimental. +

+ + +
+

This Print action button uses a div element.

+
Print Page
+ +

This Mute toggle button uses an a element.

+ + Mute + + +
+ + +
+ +
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + +
KeyFunction
EnterActivates the button.
SpaceActivates the button.
+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
button + div, a + +
    +
  • Set in javascript with element.role = 'button';.
    • +
  • Identifies the element as a button widget.
    • +
  • Accessible name for the button is defined by the text content of the element.
    • +
+
+ tabindex="0" + + div, a + +
    +
  • Includes the element in the tab sequence.
    • +
  • Needed on the a element because it does not have a href attribute.
    • +
+
aria-pressed="false"a +
    +
  • Set in javascript with button.ariaPressed = 'false';.
    • +
  • Identifies the button as a toggle button.
    • +
  • Indicates the toggle button is not pressed.
    • +
+
aria-pressed="true"a +
    +
  • Set in javascript with button.ariaPressed = 'true';.
    • +
  • Identifies the button as a toggle button.
    • +
  • Indicates the toggle button is pressed.
    • +
+
aria-hidden="true"svgExcludes SVG from accessible name calculation for the button.
+
+ +
+

Javascript and CSS Source Code

+ + +
+ +
+

HTML Source Code

+ + + +
+ + + + +
+ diff --git a/examples/button/js/button_idl.js b/examples/button/js/button_idl.js index fe94cc0d7c..09700f8055 100644 --- a/examples/button/js/button_idl.js +++ b/examples/button/js/button_idl.js @@ -2,84 +2,120 @@ * This content is licensed according to the W3C Software License at * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document * -* File: button_idl.js -* -* Desc: JS code for Button Design Pattern using the new ARIA 1.2 IDL for reflection. +* JS code for the button design pattern using the new ARIA 1.2 IDL for reflection. */ -var ICON_MUTE_URL = 'images/mute.svg#icon-mute'; +var ICON_MUTE_URL = 'images/mute.svg#icon-mute'; var ICON_SOUND_URL = 'images/mute.svg#icon-sound'; function init () { - // Create variables for the various buttons var actionButton = document.getElementById('action'); - var toggleButton = document.getElementById('toggle'); - - // Add event listeners to the various buttons - actionButton.addEventListener('click', actionButtonEventHandler); - actionButton.addEventListener('keydown', actionButtonEventHandler); - - toggleButton.addEventListener('click', toggleButtonEventHandler); - toggleButton.addEventListener('keydown', toggleButtonEventHandler); + // Set role in js instead of html + actionButton.role = 'button'; + actionButton.addEventListener('click', activateActionButton); + actionButton.addEventListener('keydown', actionButtonKeydownHandler); + actionButton.addEventListener('keyup', actionButtonKeyupHandler); + var toggleButton = document.getElementById('toggle'); + // Set role and aria-pressed in js instead of html + toggleButton.role = 'button'; + toggleButton.ariaPressed = 'false'; + toggleButton.addEventListener('click', toggleButtonClickHandler); + toggleButton.addEventListener('keydown', toggleButtonKeydownHandler); + toggleButton.addEventListener('keyup', toggleButtonKeyupHandler); } -function actionButtonEventHandler (event) { - var type = event.type; - - // Grab the keydown and click events - if (type === 'keydown') { - // If either enter or space is pressed, execute the funtion - if (event.keyCode === 13 || event.keyCode === 32) { - window.print(); - - event.preventDefault(); - } +/** + * Activates the action button with the enter key. + * + * @param {KeyboardEvent} event + */ +function actionButtonKeydownHandler (event) { + // The action button is activated by space on the keyup event, but the + // default action for space is already triggered on keydown. It needs to be + // prevented to stop scrolling the page before activating the button. + if (event.keyCode === 32) { + event.preventDefault(); + } + // If enter is pressed, activate the button + else if (event.keyCode === 13) { + event.preventDefault(); + activateActionButton(); } - else if (type === 'click') { - window.print(); +} + +/** + * Activates the action button with the space key. + * + * @param {KeyboardEvent} event + */ +function actionButtonKeyupHandler (event) { + if (event.keyCode === 32) { + event.preventDefault(); + activateActionButton(); } } -function toggleButtonEventHandler (event) { - var type = event.type; +function activateActionButton () { + window.print(); +} - // Grab the keydown and click events - if (type === 'keydown') { - // If either enter or space is pressed, execute the funtion - if (event.keyCode === 13 || event.keyCode === 32) { - toggleButtonState(event); +/** + * Toggles the toggle button’s state if it’s actually a button element or has + * the `role` attribute set to `button`. + * + * @param {MouseEvent} event + */ +function toggleButtonClickHandler (event) { + if ( + event.currentTarget.tagName === 'button' || + event.currentTarget.role === 'button' // This code is equivalent to: event.currentTarget.getAttribute('role') === 'button' + ) { + toggleButtonState(event.currentTarget); + } +} - event.preventDefault(); - } +/** + * Toggles the toggle button’s state with the enter key. + * + * @param {KeyboardEvent} event + */ +function toggleButtonKeydownHandler (event) { + if (event.keyCode === 32) { + event.preventDefault(); } - else if (type === 'click') { - // Only allow this event if either role is correctly set - // or a correct element is used. - if (event.target.role === 'button' || event.target.tagName === 'button') { - toggleButtonState(event); - } + else if (event.keyCode === 13) { + event.preventDefault(); + toggleButtonState(event.currentTarget); } } -function toggleButtonState (event) { - var button = event.target; - var currentState = button.ariaPressed; - var newState = 'true'; +/** + * Toggles the toggle button’s state with space key. + * + * @param {KeyboardEvent} event + */ +function toggleButtonKeyupHandler (event) { + if (event.keyCode === 32) { + event.preventDefault(); + toggleButtonState(event.currentTarget); + } +} - var icon = button.getElementsByTagName('use')[0]; - var currentIconState = icon.getAttribute('xlink:href'); - var newIconState = ICON_MUTE_URL; +/** + * Toggles the toggle button’s state between *pressed* and *not pressed*. + * + * @param {HTMLElement} button + */ +function toggleButtonState (button) { + // The following line of code is equivalent to: var isAriaPressed = button.getAttribute('aria-pressed') === 'true'; + var isAriaPressed = button.ariaPressed === 'true'; - // If aria-pressed is set to true, set newState to false - if (currentState === 'true') { - newState = 'false'; - newIconState = ICON_SOUND_URL; - } + // The following line of code is equivalent to: button.setAttribute('aria-pressed', isAriaPressed ? 'false' : 'true'); + button.ariaPressed = isAriaPressed ? 'false' : 'true'; - // Set the new aria-pressed state on the button - button.ariaPressed = newState; - icon.setAttribute('xlink:href', newIconState); + var icon = button.querySelector('use'); + icon.setAttribute('xlink:href', isAriaPressed ? ICON_SOUND_URL : ICON_MUTE_URL); } window.onload = init;