Difference between revisions of "Additional Content on Hover or Focus"

From Level Access Web Labs
Jump to navigation Jump to search
 
(One intermediate revision by the same user not shown)
Line 19: Line 19:
 
document.getElementById("info").addEventListener("mouseout",hide);
 
document.getElementById("info").addEventListener("mouseout",hide);
 
document.getElementById("additional").addEventListener("mouseout",hide);
 
document.getElementById("additional").addEventListener("mouseout",hide);
document.getElementById("info").addEventListener("keyup",keyListener);
+
document.body.addEventListener("keyup",keyListener);
 
}
 
}
 
 
 
function keyListener(e) {
 
function keyListener(e) {
 +
                          // escape
 
  if (e.keyCode == 27)
 
  if (e.keyCode == 27)
 
  document.getElementById("additional").setAttribute("hidden","hidden");
 
  document.getElementById("additional").setAttribute("hidden","hidden");
Line 46: Line 47:
 
<div>
 
<div>
 
<button id="info" aria-describedby="additional"> Information </button>
 
<button id="info" aria-describedby="additional"> Information </button>
<button> Do nothing</button>
 
 
</div>
 
</div>
 
<div role="tooltip" id="additional" hidden>
 
<div role="tooltip" id="additional" hidden>

Latest revision as of 18:05, 4 December 2018

The button follows the ARIA tooltip pattern and does not respond to click or enter and display on hover or focus and can be dismissed when the triggered is focused and escape is pressed. The additional content has role of tooltip and is referenced at all times by aria-describedby from the trigger.