Test 116 - Button role using image buttons

<div id="id1" role="application">

<h3>Text Sample 1</h3>

<ul class="buttons" title="Text Formating Controls 1">

    <li id="id2"  
        role="button"
        tabindex="0"
        aria-pressed="false"
        aria-controls="text1"
        aria-labelledby="larger_label">
        <img src="http://www.oaa-acessibility.org/media/testsuite/images/button-bigger.png" alt="Increase font size" align="middle">
    </li>
            
    <li id="id3"  
        role="button"
        tabindex="0"
        aria-pressed="false"
        aria-controls="text1"
        aria-labelledby="smaller_label">
        <img src="http://www.oaa-acessibility.org/media/testsuite/images/button-smaller.png" alt="Decrease font size" align="middle">
    </li>
          
    <li id="id4"  
        role="button"
        class="toggleButton italic"
        tabindex="0"
        aria-pressed="true"
        aria-controls="text1"
        aria-labelledby="italic_label">
        <img src="http://www.oaa-acessibility.org/media/testsuite/images/button-italicPressed.png" alt="Italicize text" align="middle">
    </li>
        
    <li id="id5"  
        role="button"
        class="toggleButton"
        tabindex="0"
        aria-pressed="false"
        aria-controls="text1"
        aria-labelledby="bold_label">
        <img src="http://www.oaa-acessibility.org/media/testsuite/images/button-bold.png" alt="Bold text" align="middle">
    </li>
        
</ul>

<p style="clear: both; height: 1px">&nbsp;</p>
<label for="text1" class="hide">Text Sample 1</label>
<textarea id="text1" name="text1" class="example italic">
Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation, so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
</textarea>

<p class="hide" id="bold_label">Bold</p>

<p class="hide" id="italic_label">Italic</p>

<p class="hide" id="larger_label">Font Larger</p>

<p class="hide" id="smaller_label">Font Smaller</p>
</div>

ul.buttons {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.buttons li {
  float: left;
  text-align: center;
  margin: 1px;
  padding: 1px;
  width: 36px;
  height: 34px;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

textarea.example {
  clear: both;
  padding: .25em;
  width: 50%;
  height: 200px;
}

.hide {
position: absolute;
top: -20em;
left: -200em;
}

var KEY_ENTER = 13;
var KEY_SPACE = 32;

$(document).ready(function() {

  $('ul.buttons li').mousedown(function(event) {

    var ariaControls = '#' + $(this).attr('aria-controls');

    // Update state of the other buttons to their appropriate unfocused state
    $(this).siblings().each(function() {
      updateButton(this);
    });

    switch($(this).attr('aria-labelledby')) {
      case 'italic_label': {
        $(ariaControls).toggleClass('italic');

        if ($(ariaControls).hasClass('italic') == true) {
          $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-italicPressed-focus.png");
        }
        else
        {
          $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-italic-focus.png");
        }
        break;
      }
      case 'bold_label': {
        $(ariaControls).toggleClass('bold');

        if ($(ariaControls).hasClass('bold') == true) {
          $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-boldPressed-focus.png");
        }
        else
        {
          $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-bold-focus.png");
        }
        break;
      }
      case 'larger_label': {
        increaseFontSize(ariaControls);
        $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-biggerPressed-focus.png");
        break;
      }
      case 'smaller_label': {
        decreaseFontSize(ariaControls);
        $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-smallerPressed-focus.png");
        break;
      }
    } // end switch

    if ($(this).hasClass('toggleButton') == true) {

        // This is a toggle button: toggle aria-pressed state
        togglePressed(this);
    }
    else
    {
        // This is a momentary pushbutton: Set aria-pressed to true
        $(this).attr('aria-pressed', 'true');
    }

    // Give the current button focus
    $(this).focus();

    event.stopPropagation();
    return false;
  }); // end button click handler

  // bind a mouseup handler to the buttons to enable momentary pushbuttons
  // to return to unpressed state and toggle buttons to remain pressed
  //
  $('ul.buttons li').mouseup(function(event) {

    if ($(this).hasClass('toggleButton') == false) {

      // Set aria-pressed to false
      $(this).attr('aria-pressed', 'false');

      // change button image to reflect unpressed state
      switch ($(this).attr('aria-labelledby')) {
        case 'larger_label': {
          $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-bigger-focus.png");
          break;
        }
        case 'smaller_label': {
          $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-smaller-focus.png");
          break;
        }
      } // end switch
    }

    event.stopPropagation();
    return false;
  }); // end mouseup handler

  // keypress handler
  //
  // The Opera browser detects keystrokes to perform window manipulation during the keypress event,
  // not keydown like IE, Firefox, and Safari. Relevant keypresses are consumed by this handler to
  // make the browser behave properly when the user is manipulating the buttons.
  //
  $('ul.buttons li').keypress(function(event) {

    switch (event.which) {
      case KEY_ENTER:
      case KEY_SPACE: {
        event.stopPropagation;
        return false;
        break;
      }
    } //end switch
    return true;
  });

  $('ul.buttons li').keydown(function(event) {

    var ariaControls = '#' + $(this).attr('aria-controls');

    switch (event.which) {
      case KEY_ENTER:
      case KEY_SPACE: {
        switch($(this).attr('aria-labelledby')) {
          case 'italic_label': {
            $(ariaControls).toggleClass('italic');

            if ($(ariaControls).hasClass('italic') == true) {
              $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-italicPressed-focus.png");
            }
            else
            {
              $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-italic-focus.png");
            }
            break;
          }
          case 'bold_label': {
            $(ariaControls).toggleClass('bold');

            if ($(ariaControls).hasClass('bold') == true) {
              $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-boldPressed-focus.png");
            }
            else
            {
              $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-bold-focus.png");
            }
            break;
          }
          case 'larger_label': {
            increaseFontSize(ariaControls);
            $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-biggerPressed-focus.png");
            break;
          }
          case 'smaller_label': {
            decreaseFontSize(ariaControls);
            $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-smallerPressed-focus.png");
            break;
          }
        } // end switch

        if ($(this).hasClass('toggleButton') == true) {

            // This is a toggle button: toggle aria-pressed state
            togglePressed(this);
        }
        else
        {
            // This is a momentary pushbutton: Set aria-pressed to true
            $(this).attr('aria-pressed', 'true');
        }

        event.stopPropagation();
        return false;

      } // end case
    } // end switch

    return true;
  }); // end button click handler

  // bind a keyup handler to the buttons to enable momentary pushbuttons
  // to return to unpressed state and toggle buttons to remain pressed
  //
  $('ul.buttons li').keyup(function(event) {
    
    id = this;

    switch (event.which) {
      case KEY_ENTER:
      case KEY_SPACE: {
        if ($(this).hasClass('toggleButton') == false) {
        
          // set aria-pressed to false
          $(id).attr('aria-pressed', 'false');

          // change button image to reflect unpressed state
          switch ($(this).attr('aria-labelledby')) {
            case 'larger_label': {
              $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-bigger-focus.png");
              break;
            }
            case 'smaller_label': {
              $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-smaller-focus.png");
              break;
            }
          } // end switch
        }

        event.stopPropagation();
        return false;
      } // end case
    } // end switch

    return true;
  }); // end mouseup handler

  // bind a focus handler to set button image to show focus
  //
  $('ul.buttons li').focus(function(event) {

    var pressed = "Pressed";

    if ($(this).attr('aria-pressed') == 'false') {
      pressed = '';
    }
    
    switch ($(this).attr('aria-labelledby')) {
      case 'larger_label': {
        $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-bigger" + pressed + "-focus.png");
        break;
      }
      case 'smaller_label': {
        $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-smaller" + pressed + "-focus.png");
        break;
      }
      case 'italic_label': {
        $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-italic" + pressed + "-focus.png");
        break;
      }
      case 'bold_label': {
        $(this).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-bold" + pressed + "-focus.png");
        break;
      }
    } //end switch

  }); // end focus handler

  // bind a blur handler to set remove focus image from button
  //
  $('ul.buttons li').blur(function(event) {

    // update the button
    updateButton(this);

  }); // end blur handler

  /**
   * updateButton() updates the button image to its appropriate unfocused state
   *
   * @param (ariaControls) id of button to update
   *
   * @return N/A
   */
  function updateButton(id) {

    var pressed = "Pressed";

    if ($(id).attr('aria-pressed') == 'false') {
      pressed = '';
    }
    
    switch ($(id).attr('aria-labelledby')) {
      case 'larger_label': {
        $(id).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-bigger" + pressed + ".png");
        break;
      }
      case 'smaller_label': {
        $(id).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-smaller" + pressed + ".png");
        break;
      }
      case 'italic_label': {
        $(id).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-italic" + pressed + ".png");
        break;
      }
      case 'bold_label': {
        $(id).children('img').attr('src', "http://www.oaa-acessibility.org/media/testsuite/images/button-bold" + pressed + ".png");
        break;
      }
    } //end switch
  } // end updateButton


  /**
   * increaseFontSize() increases the font size for the controlled area
   *
   * @param (ariaControls) id of text area to modify
   *
   * @return N/A
   */
  function increaseFontSize(ariaControls) {
  
    var $text = $(ariaControls);
    var fontSize = parseFloat($text.css('fontSize'), 10);
  
    // increase the font size
    fontSize *= 1.4;
  
    if (fontSize > 120) {
      return;
    }
    // write the new value to the css property
    // note: 'px' must be appended for valid css
    $text.css('fontSize', fontSize+'px');
  } // end increaseFontSize()
  
  /**
   * decreaseFontSize() decreases the font size for the controlled area
   *
   * @param (ariaControls) id of text area to modify
   *
   * @return N/A
   */
  function decreaseFontSize(ariaControls) {
  
    var $text = $(ariaControls);
    var fontSize = parseFloat($text.css('fontSize'), 10);
  
    // increase the font size
    fontSize /= 1.4;
  
    if (fontSize < 4) {
      return;
    }
  
    // write the new value to the css property
    // note: 'px' must be appended for valid css
    $text.css('fontSize', fontSize+'px');
  
  } // end decreaseFontSize
  
  /**
   * togglePressed() toggles the aria-pressed atribute between true or false
   *
   * @param ( id object) button to be operated on
   *
   * @return N/A
   */
  function togglePressed(id) {
  
    // reverse the aria-pressed state
    if ($(id).attr('aria-pressed') == 'true') {
      $(id).attr('aria-pressed', 'false');
    }
    else {
      $(id).attr('aria-pressed', 'true');
    }
  }

}); // end ready