Hide alert when empty, manual source code

w3c · Feb 17, 2017 · 5423bf7 · 5423bf7
1 parent 9a30de1
commit 5423bf7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/examples/alert/css/alert.css b/examples/alert/css/alert.css
@@ -4,3 +4,7 @@
   border-radius: 4px;
   background: hsl(206, 74%, 90%);
 }
+
+[role="alert"]:empty {
+  display: none;
+}
diff --git a/examples/alert/index.html b/examples/alert/index.html
@@ -3,12 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <title>Alert Example | WAI-ARIA Authoring Practices 1.1</title>
-    
+
     <!--  Core js and css shared by all examples; do not modify when using this template. -->
     <link href="../css/core.css" rel="stylesheet">
     <link href="../css/table.css" rel="stylesheet">
-    <script src="../js/examples.js" type="text/javascript"></script>
-
+
     <!--  js and css for this example. -->
     <link href="css/alert.css" rel="stylesheet">
     <script src="js/alert.js" type="text/javascript"></script>
@@ -25,12 +24,14 @@ <h2 id="ex_label">Example</h2>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <div id="ex1">
         <p><button id="alert-trigger">Trigger Alert</button></p>
+
         <p>
-          This is just a test. 
+          This is just a test.
           A typical alert is triggered by an event, such as an error, warning condition, or the arrival of information that is important in the context of the user's task.
         </p>
-        <div id="example" role="alert">
-        </div>
+
+        <div id="example" role="alert"></div>
+
         <!--  The following script element contains the content that will be inserted into the alert element. -->
         <script type="text/template" id="alert-template">
           <p>Hej, hello, ciao, こんにちは, 안녕</p>
@@ -42,7 +43,7 @@ <h2 id="ex_label">Example</h2>
     <section>
       <h2>Accessibility Features</h2>
       <p>
-        Because an alert is for critical information, assistive technologies may provide special behaviors designed to help call attention to changes in the text of an alert. 
+        Because an alert is for critical information, assistive technologies may provide special behaviors designed to help call attention to changes in the text of an alert.
         For example, screen readers may interrupt all other speech and preface announcement of the new alert text with a special sound or phrase.
       </p>
     </section>
@@ -86,7 +87,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
             <th scope="row"><code>aria-atomic=<q>true</q></code></th>
             <td>Implicit on <code>div</code></td>
             <td>
-            <ul>
+              <ul>
                 <li>This does not have to be declared in the code because it is implicit in the alert role.</li>
                 <li>Tells assistive technologies to use the entire content of the alert element as the alert message even if only a portion of it has changed.</li>
               </ul>
@@ -113,12 +114,16 @@ <h2>Javascript and CSS Source Code</h2>
     <section>
       <h2 id="sc1_label">HTML Source Code</h2>
       <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-      <div id="sc1"></div>
+      <pre><code id="sc1">&lt;button id="alert-trigger"&gt;Trigger Alert&lt;/button&gt;
+
+&lt;div id="example" role="alert"&gt;&lt;/div&gt;
+
+&lt;!--  The following script element contains the content that will be inserted into the alert element. --&gt;
+&lt;script type="text/template" id="alert-template"&gt;
+  &lt;p&gt;Hej, hello, ciao, こんにちは, 안녕&lt;/p&gt;
+&lt;/script&gt;
+      </code></pre>
       <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
-      <script>
-        sourceCode.add('sc1', 'ex1')
-        sourceCode.make()
-      </script>
     </section>
     </main>
     <nav>