From c4306912795d0e3eb75443bf34f44fdee4a76a94 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 15 Jun 2018 14:27:25 -0700 Subject: [PATCH] Add IDL example for button for ARIA 1.2 --- aria-practices.html | 1 + examples/button/button_idl.html | 174 +++++++++++++++++++++++++++++++ examples/button/js/button_idl.js | 85 +++++++++++++++ 3 files changed, 260 insertions(+) create mode 100644 examples/button/button_idl.html create mode 100644 examples/button/js/button_idl.js diff --git a/aria-practices.html b/aria-practices.html index 186ad29f8f..573528ba6b 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -426,6 +426,7 @@

Button

Examples

Button Examples: Examples of clickable HTML div and span elements made into accessible command and toggle buttons.

+

Button Examples (IDL): Examples of clickable HTML div and span elements made into accessible command and toggle buttons. This example uses the IDL Interface.

diff --git a/examples/button/button_idl.html b/examples/button/button_idl.html new file mode 100644 index 0000000000..7a1f394dfe --- /dev/null +++ b/examples/button/button_idl.html @@ -0,0 +1,174 @@ + + + + +Button Examples (IDL Version) | WAI-ARIA Authoring Practices 1.2 + + + + + + + + + + + + + +
+

Button Examples

+

+ The following command and toggle button examples demonstrate the + button design pattern. +

+

This version uses the IDL syntax within the JavaScript. Otherwise it is identical to the Button Examples.

+

Similar examples include:

+ +
+

Example

+ + +
+

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

+ +
+ + +
+
+ + + diff --git a/examples/button/js/button_idl.js b/examples/button/js/button_idl.js new file mode 100644 index 0000000000..86ab71217a --- /dev/null +++ b/examples/button/js/button_idl.js @@ -0,0 +1,85 @@ +/* +* This content is licensed according to the W3C Software License at +* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document +* +* File: button.js +* +* Desc: JS code for Button Design Pattersn +*/ + +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); + +} + +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(); + } + } + else if (type === 'click') { + window.print(); + } +} + +function toggleButtonEventHandler (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) { + toggleButtonState(event); + + 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); + } + } +} + +function toggleButtonState (event) { + var button = event.target; + var currentState = button.ariaPressed; + var newState = 'true'; + + var icon = button.getElementsByTagName('use')[0]; + var currentIconState = icon.getAttribute('xlink:href'); + var newIconState = ICON_MUTE_URL; + + // If aria-pressed is set to true, set newState to false + if (currentState === 'true') { + newState = 'false'; + newIconState = ICON_SOUND_URL; + } + + // Set the new aria-pressed state on the button + button.ariaPressed = newState; + icon.setAttribute('xlink:href', newIconState); +} + +window.onload = init;