Update

Changes: * Some CSS improvements; * Adds role attribute for better document description; * Adds some aria labels; * Replace tabindex values.
cara-tm · Apr 6, 2018 · 58a8fbb · 58a8fbb
1 parent 426730c
commit 58a8fbb
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 34 deletions.
diff --git a/_scss/_flaterial.scss b/_scss/_flaterial.scss
@@ -141,7 +141,7 @@
 		}
 	}
 	.inner-dialog {
-		border-width: 1px;
+		border-width: 0;
 		background: #fff;
 		color: #212121;
 		p {

diff --git a/_scss/modal-box.scss b/_scss/modal-box.scss
@@ -370,8 +370,9 @@ a[class^="close"] {
 .header-modal {
 	position: relative;
 	z-index: 1001;
-	height: 90px;
-	min-height: 5rem;
+    height: 3.75em;
+    height: 4.5rem;
+	min-height: 4.5rem;
 	max-height: 26vh;
 	border: 1px solid #eee;
 	border-bottom: 0;

diff --git a/css/flaterial.css b/css/flaterial.css
@@ -206,7 +206,7 @@ html .header-modal a:active svg
  */
 .modal-dialog .inner-dialog
 {
-	border-width: 1px;
+	border-width: 0;
 	background: #fff;
 	color: #212121
 }

diff --git a/css/modal-box.css b/css/modal-box.css
@@ -292,8 +292,9 @@ Removed due to uggly support in some webkit old browsers
 	position: relative;
 	z-index: 1001;
 
-	height: 90px;
-	min-height: 5rem;
+	height: 3.75em;
+    height: 4.5rem;
+	min-height: 4.5rem;
 	max-height: 26vh;
 
 	border: 1px solid #eee;

diff --git a/css/modal-box.min.css b/css/modal-box.min.css
diff --git a/demo.html b/demo.html
@@ -190,9 +190,9 @@
 </head>
 <body>
 
-<div tabindex="0" role="dialog" aria-labelled-by="openModal" aria-haspopup="true" class="modal-dialog dialog no-visibility" id="openModal">
+<div role="dialog" aria-modal="true" aria-haspopup="true" tabindex="-1" aria-live="assertive" aria-describedby="dialog-description" class="modal-dialog dialog" id="openModal">
 
-	<div class="modal">
+	<div role="document" class="modal">
 
         <span class="close-span"><strong>Close</strong> <a href="#close" title="Close" class="close push__left no__select bounceInUp" id="close-modal" onclick="document.getElementById('openModal').style.display='none';return true;">×</a></span>
 
@@ -203,7 +203,7 @@
 		<div class="inner-dialog">
 
 
-			<h2>Modal Box</h2>
+			<h2 id="dialog-description">Modal Box</h2>
 
 			<p>This is a sample modal box that can be created using the powers of CSS3.</p>
 			<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
@@ -231,15 +231,15 @@ <h2>Modal Box</h2>
 
 
 
-<div tabindex="0" role="dialog" aria-labelled-by="openMessage" aria-haspopup="true" class="modal-dialog dialog" id="openMessage">
+<div role="dialog" aria-modal="true" aria-haspopup="true" tabindex="-1" aria-live="assertive" aria-describedby="dialog-description" class="modal-dialog dialog" id="openMessage">
 
-	<div class="modal modal-message">
+	<div role="document" class="modal modal-message">
 
         <span class="close-span"><strong>Close</strong> <a href="demo.html" title="Close" class="close no__select" id="close-msg" onclick="document.getElementById('openMessage').style.display='none';return true;">×</a></span>
 
 		<div class="inner-dialog">
 
-			<strong>Message Box</strong>
+			<strong id="dialog-dscription">Message Box</strong>
 			<p><!-- 
 				<span class="info-sign"><strong>&#8505;</strong></span> 
 				<span class="warning-sign"><strong>⚠</strong></span>

diff --git a/flaterial.html b/flaterial.html
@@ -51,6 +51,9 @@
 	font-family: sans-serif
 }
 
+/* Corrects the wrapper position on Modal Boxes opening */
+.modal-dialog:target ~.wrapper{margin-top: 1.2em}
+
 .wrapper p {
     padding: 0 2% 10px;
     font-size: 20px;
@@ -176,15 +179,15 @@
 </head>
 <body>
 
-<div tabindex="0" role="dialog" aria-labelled-by="openModal" aria-haspopup="true" class="modal-dialog dialog" id="openModal">
+<div role="dialog" aria-modal="true" aria-haspopup="true" tabindex="-1" aria-live="assertive" aria-describedby="dialog-description" class="modal-dialog dialog" id="openModal">
 
-	<div class="modal">
+	<div role="document" class="modal">
 		<!--
 		<a href="#close" title="Close" class="close no__select" id="close-modal" onclick="document.getElementById('openModal').style.display='none';return true;">×</a>
 		-->
 
 		<div class="header-modal no__select">
-			<span><strong class="static">☂</strong> Parameters</span> <span><strong class="mob-hide">Action:</strong> <a href="#openModal" title="Validate changes"><svg class="svg-icon" viewBox="0 0 20 20">✓<path d="M7.6 14.6c0.1 0.1 0.3 0.2 0.5 0.2 0.2 0 0.3-0.1 0.5-0.2l8.2-8.2c0.3-0.3 0.3-0.7 0-0.9 -0.3-0.3-0.7-0.3-0.9 0l-7.8 7.8L4.2 9.3c-0.3-0.3-0.7-0.3-0.9 0 -0.3 0.3-0.3 0.7 0 0.9L7.6 14.6z"></path></svg></a></span>
+			<span id="dialog-description"><strong class="static">☂</strong> Parameters</span> <span><strong class="mob-hide">Action:</strong> <a href="#openModal" title="Validate changes"><svg class="svg-icon" viewBox="0 0 20 20">✓<path d="M7.6 14.6c0.1 0.1 0.3 0.2 0.5 0.2 0.2 0 0.3-0.1 0.5-0.2l8.2-8.2c0.3-0.3 0.3-0.7 0-0.9 -0.3-0.3-0.7-0.3-0.9 0l-7.8 7.8L4.2 9.3c-0.3-0.3-0.7-0.3-0.9 0 -0.3 0.3-0.3 0.7 0 0.9L7.6 14.6z"></path></svg></a></span>
 		</div>
 
 		<div class="inner-dialog">
@@ -218,15 +221,15 @@
 
 
 
-<div tabindex="0" role="dialog" aria-labelled-by="openMessage" aria-haspopup="true" class="modal-dialog dialog" id="openMessage">
+<div role="dialog" aria-modal="true" aria-haspopup="true" tabindex="-1" aria-live="assertive" aria-describedby="dialog-description" class="modal-dialog dialog" id="openMessage">
 
-	<div class="modal modal-message">
+	<div role="document" class="modal modal-message">
 
 		<a href="#close" title="Close" class="close no__select" id="close-msg" onclick="document.getElementById('openMessage').style.display='none';return true;">×</a>
 
 		<div class="inner-dialog">
 
-			<span>Message Box</span>
+			<span id="dialog-description">Message Box</span>
             <p><span class="info-sign"><strong>ℹ</strong></span> This is a sample modal message box suitable for infos. ✌</p>