| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <title>A <div> with role "button" followed by a modification to the value of "checkbox".</title> |
| <script type="text/javascript"> |
| function changeRole (/* Element */ element, /* String */ newRole) { |
| element.setAttribute ('role', newRole); |
| element.innerHTML = "This <div> has role '" + newRole + "'"; |
| } |
| </script> |
| </head> |
| <body> |
| <div role="button" id="test" tabindex="0" onclick="changeRole (this, 'checkbox');" onkeydown="changeRole (this, 'checkbox');">This <div> has role 'button'</div> |
| <p> |
| <button onclick="changeRole (document.getElementById ('test'), 'checkbox')" type="button">Change Role</button> |
| <button onclick="window.location.reload()" type="button">Reload Page</button> |
| </p> |
| </body> |
| </html> |
