| <body> |
| <style> |
| #multiReasonBtn:hover { |
| background-color: blue; |
| } |
| </style> |
| <button id='multiReasonBtn' contenteditable='true' style='cursor: |
| pointer;' role='menuitem' aria-haspopup=true tabindex='0'> |
| Multi-Reason Button |
| </button> |
| <div aria-expanded=true></div> |
| <div aria-expanded=false></div> |
| <button aria-pressed="false">ARIA Toggle</button> |
| <div role="option" aria-selected="true">ARIA Selectable</div> |
| <div role="checkbox" aria-checked="true">ARIA Checkable</div> |
| <button tabindex="-1">Programmatic Focus</button> |
| <div tabindex="0">Tab Stop</div> |
| <div role="listbox" tabindex="0" aria-activedescendant="active-option"> |
| <div id="active-option" role="option">Active Option</div> |
| </div> |
| <div role="tab" tabindex="0" aria-actions="close-action"> |
| Closable Tab |
| <button id="close-action">Close</button> |
| </div> |
| <script> |
| const btn = document.getElementById('multiReasonBtn'); |
| btn.onclick = function(){}; |
| btn.onmouseover = function(){}; |
| btn.onmousedown = function(){}; |
| btn.onkeydown = function(){}; |
| </script> |
| </body> |
