Update

Changes for better accessibility ARIA spelling.
cara-tm · Aug 24, 2017 · 58ebc81 · 58ebc81
1 parent f767c57
commit 58ebc81
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/demo.html b/demo.html
@@ -683,7 +683,7 @@
 </head>
 <body>
 
-<div aria-hidden="true" role="dialog" class="modal-dialog dialog" id="open-modal">
+<div tabindex="0" role="dialog" aria-labelled-by="openModal" aria-haspopup="true" class="modal-dialog dialog" id="openModal">
 
 	<div class="modal">
 
@@ -724,7 +724,7 @@ <h2>Modal Box</h2>
 
 
 
-<div aria-hidden="true" role="dialog" class="modal-dialog dialog" id="open-modal2">
+<div tabindex="0" role="dialog" aria-labelled-by="openModal2" aria-haspopup="true" class="modal-dialog dialog" id="openModal2">
 
 	<div class="modal modal-message">
 
@@ -745,8 +745,8 @@ <h2>Message Box</h2>
 
 	<p class="first-line">
 		<a href="#open" class="button">A simple link</a>
-		<a href="#open-modal" class="button" id="link1">Open Modal Box</a>
-		<a href="#open-modal2" class="button" id="link2">Open Modal Message</a>
+		<a href="#openModal" class="button" id="link1">Open Modal Box</a>
+		<a href="#openModal2" class="button" id="link2">Open Modal Message</a>
 	</p>
 
 	<p>This is a sample modal box that can be created using the powers of CSS3.</p>
@@ -775,7 +775,7 @@ <h2>Message Box</h2>
 */
 /*
 'use strict';
-var addEvent=function(a,b,d){if(a.addEventListener) a.addEventListener(b,d,false);else if(a.attachEvent) a.attachEvent('on'+b,d);},target=document.getElementById('open-modal'),target2=document.getElementById('open-modal2'),link1=document.getElementById('link1'),link2=document.getElementById('link2'),link3=document.getElementById('close-modal'),link4=document.getElementById('footer-close'),link5=document.getElementById('close-msg');addEvent(link1,'click',function(){hasClass(target,'visible')?removeClass(target,'visible'):target.className+=' visible'}),addEvent(link2,'click',function(){hasClass(target2,'visible')?removeClass(target2,'visible'):target2.className+=' visible'}),addEvent(link3,'click',function(){restaureClass(target,'modal-dialog dialog')}),addEvent(link4,'click',function(){restaureClass(target,'modal-dialog dialog')}),addEvent(link5,'click',function(){restaureClass(target2,'modal-dialog dialog')});function hasClass(a,b){if('undefined'!=typeof b)return-1<(' '+a.className+' ').indexOf(' '+b+' ')};function restaureClass(a,b){return a.className=b};function addClass(el,className){if (el.classList) el.classList.add(className);else if (!hasClass(el,className)) el.className+=' '+className;}
+var addEvent=function(a,b,d){if(a.addEventListener) a.addEventListener(b,d,false);else if(a.attachEvent) a.attachEvent('on'+b,d);},target=document.getElementById('openModal'),target2=document.getElementById('openModal2'),link1=document.getElementById('link1'),link2=document.getElementById('link2'),link3=document.getElementById('close-modal'),link4=document.getElementById('footer-close'),link5=document.getElementById('close-msg');addEvent(link1,'click',function(){hasClass(target,'visible')?removeClass(target,'visible'):target.className+=' visible'}),addEvent(link2,'click',function(){hasClass(target2,'visible')?removeClass(target2,'visible'):target2.className+=' visible'}),addEvent(link3,'click',function(){restaureClass(target,'modal-dialog dialog')}),addEvent(link4,'click',function(){restaureClass(target,'modal-dialog dialog')}),addEvent(link5,'click',function(){restaureClass(target2,'modal-dialog dialog')});function hasClass(a,b){if('undefined'!=typeof b)return-1<(' '+a.className+' ').indexOf(' '+b+' ')};function restaureClass(a,b){return a.className=b};function addClass(el,className){if (el.classList) el.classList.add(className);else if (!hasClass(el,className)) el.className+=' '+className;}
 */
 </script>
 </body></html>