accessible-rich-internet-applications/pa/aria-accordion-demo.js
/**
 * function to handle when user press keyboard key
 */
function to handle when user press keyboard key
function to handle when user press keyboard key
function handleKeypress(event) {
	var key = event.keyCode;  
	var targetParent = event.target.parentNode; 
	var targetPanelId,
	    targetPanel,
	    targetTab;
	if (key === 37 || key === 38) { 	
		if (targetParent.previousElementSibling) { 
			targetTab = targetParent.previousElementSibling.previousElementSibling; 
			targetPanelId = targetParent.previousElementSibling.previousElementSibling.getAttribute('aria-controls'); 
		} else { 
			targetTab = targetParent.parentNode.lastElementChild.previousElementSibling; 
			targetPanelId = targetParent.parentNode.lastElementChild.previousElementSibling.getAttribute('aria-controls'); 
		}
	} else if (key === 39 || key === 40) { 
		if (targetParent.nextElementSibling.nextElementSibling) { 
			targetTab = targetParent.nextElementSibling.nextElementSibling; 
			targetPanelId = targetParent.nextElementSibling.nextElementSibling.getAttribute('aria-controls'); 
		} else { 
			targetTab = targetParent.parentNode.firstElementChild;
			targetPanelId = targetParent.parentNode.firstElementChild.getAttribute('aria-controls');
		}
	} else if (key === 32) { 
		targetTab = targetParent;
		targetPanelId = targetParent.getAttribute('aria-controls');
	}
	if (targetTab) {
		targetPanel = acc.querySelector('#' + targetPanelId); 
		targetTab.firstElementChild.focus();
		if (key === 32) { 
			toggleContent(targetParent,targetPanel);
		}
	}
}
function handleKeypress ( event ) { var key = event . keyCode ; var targetParent = event . target . parentNode ; var targetPanelId , targetPanel , targetTab ; if ( key === 37 || key === 38 ) { if ( targetParent . previousElementSibling ) { targetTab = targetParent . previousElementSibling . previousElementSibling ; targetPanelId = targetParent . previousElementSibling . previousElementSibling . getAttribute ( 'aria-controls' ) ; } else { targetTab = targetParent . parentNode . lastElementChild . previousElementSibling ; targetPanelId = targetParent . parentNode . lastElementChild . previousElementSibling . getAttribute ( 'aria-controls' ) ; } } else if ( key === 39 || key === 40 ) { if ( targetParent . nextElementSibling . nextElementSibling ) { targetTab = targetParent . nextElementSibling . nextElementSibling ; targetPanelId = targetParent . nextElementSibling . nextElementSibling . getAttribute ( 'aria-controls' ) ; } else { targetTab = targetParent . parentNode . firstElementChild ; targetPanelId = targetParent . parentNode . firstElementChild . getAttribute ( 'aria-controls' ) ; } } else if ( key === 32 ) { targetTab = targetParent ; targetPanelId = targetParent . getAttribute ( 'aria-controls' ) ; } if ( targetTab ) { targetPanel = acc . querySelector ( '#' + targetPanelId ) ; targetTab . firstElementChild . focus ( ) ; if ( key === 32 ) { toggleContent ( targetParent , targetPanel ) ; } } }
function to handle when user press keyboard key
function to handle when user press keyboard key
/* console.log("key is equal to "+key); */ /* console.log("targetParent is equal to "+targetParent); */ /* if user press the left or up arrow key */ /* if there there is a previous element, reset targetTab and get targetPanelId */ /* reset targetTab */ /* get targetPanelId */ /* there's no previous element, so go up a parent and access the last child and then retrieve the previous to the last child */ /* reset targetTab */ /* get targetPanelId */ /* if user press the right or down arrow key */ /* if there os a next sibling */ /* reset the targetTab */ /* get the targetPanelId */ /* there's no next element, so go up a parent and access the first child, which should be the first heading element */ /* if user press the space bar */ /* console.log("targetPanel is equal to "+targetPanel); */ /* toggle content only if space bar is pressed */