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

From Level Access Web Labs
Jump to navigation Jump to search
 
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");

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.