JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://test.cita.illinois.edu/aria/js/jquery.js"></script>
-

CSS

ul.buttons {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.buttons li {
    float: left;
    text-align: center;
    margin-right: .25em;
    padding-left: .25em;
    padding-right: .25em;
    width: 1em;
    font-weight: bold;
    height: 100%;
    border: 2px solid black;
}
ul.buttons li[aria-pressed="true"] {
    border-top: black 3px solid;
    border-left: black 3px solid;
    border-bottom: black 1px solid;
    border-right: black 1px solid;
}
ul.buttons li[aria-pressed="false"] {
    border-top: black 1px solid;
    border-left: black 1px solid;
    border-bottom: black 3px solid;
    border-right: black 3px solid;
}
ul.buttons li[aria-pressed="true"]:focus, ul.buttons li[aria-pressed="true"]:active {
    border-top: #CCCCCC 3px solid;
    border-left: #CCCCCC 3px solid;
    border-bottom: #CCCCCC 1px solid;
    border-right: #CCCCCC 1px solid;
    color: white;
    background-color: black;
}
ul.buttons li[aria-pressed="false"]:focus, ul.buttons li[aria-pressed="false"]:active {
    border-top: #CCCCCC 1px solid;
    border-left: #CCCCCC 1px solid;
    border-bottom: #CCCCCC 3px solid;
    border-right: #CCCCCC 3px solid;
    color: white;
    background-color: black;
}
.italic {
    font-style: italic;
}
.bold {
    font-weight: bold;
}
ul.buttons {
    font-weight: bold;
}
textarea.example {
    clear: both;
    padding: .25em;
    width: 50%;
    height: 200px;
}
.hide {
    position: absolute;
    top: -20em;
    left: -200em;
}

JavaScript

var KEY_ENTER = 13;
var KEY_SPACE = 32;

$(document).ready(function () {

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

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

        switch ($(this).attr('aria-labelledby')) {
            case 'italic_label':
                {
                    $(ariaControls).toggleClass('italic');
                    break;
                }
            case 'bold_label':
                {
                    $(ariaControls).toggleClass('bold');
                    break;
                }
            case 'larger_label':
                {
                    increaseFontSize(ariaControls);
                    break;
                }
            case 'smaller_label':
                {
                    decreaseFontSize(ariaControls);
                    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');
        }

        $(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');
        }

        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...