Pre Element for HTML source in Example Page Templates

Fix issue #248 by changing the source code display div elements to pre elements and updating associated comments in: * examples/coding-template/Depricated-MultipleImplementationExample-Template.html * examples/coding-template/Example-Template.html
w3c · Jan 31, 2017 · 87214e5 · 87214e5
1 parent 7c03546
commit 87214e5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 32 deletions.
diff --git a/examples/coding-template/Depricated-MultipleImplementationExample-Template.html b/examples/coding-template/Depricated-MultipleImplementationExample-Template.html
@@ -253,47 +253,35 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2>HTML Source Code</h2>
     <h3 id="sc1_label">Example 1: title of this variation of the implementation</h3>
-    <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label"
-      aria-label="Start of HTML for"
-    ></div>
-    <div id="sc1"></div>
-    <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label"
-      aria-label="End of HTML for"
-    ></div>
+    <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for" ></div>
+    <pre id="sc1"></pre>
+    <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for" ></div>
     <!-- 
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
-      It renders the HTML in the preceding div with ID 'sc1'.
-      If you change the ID of either the 'ex1' div or the 'sc1' div, be sure to update the sourceCode.add function parameters.
+      It renders the HTML in the preceding pre element with ID 'sc1'.
+      If you change the ID of either the 'ex1' div or the 'sc1' pre, be sure to update the sourceCode.add function parameters.
     -->
     <script>sourceCode.add('sc1', 'ex1')</script>
 
     <h3 id="sc2_label">Example 2: title of this variation of the implementation</h3>
-    <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label"
-      aria-label="Start of HTML for"
-    ></div>
-    <div id="sc2"></div>
-    <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label"
-      aria-label="End of HTML for"
-    ></div>
+    <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for" ></div>
+    <pre id="sc2"></pre>
+    <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for" ></div>
     <!-- 
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex2'.
-      It renders the HTML in the preceding div with ID 'sc2'.
-      If you change the ID of either the 'ex2' div or the 'sc2' div, be sure to update the sourceCode.add function parameters.
+      It renders the HTML in the preceding pre element with ID 'sc2'.
+      If you change the ID of either the 'ex2' div or the 'sc2' pre, be sure to update the sourceCode.add function parameters.
       -->
     <script>sourceCode.add('sc2', 'ex2')</script>
 
     <h3 id="sc3_label">Example 3: title of this variation of the implementation</h3>
-    <div id="sc3_start_sep" role="separator" aria-labelledby="sc3_start_sep sc3_label"
-      aria-label="Start of HTML for"
-    ></div>
-    <div id="sc3"></div>
-    <div id="sc3_end_sep" role="separator" aria-labelledby="sc3_end_sep sc3_label"
-      aria-label="End of HTML for"
-    ></div>
+    <div id="sc3_start_sep" role="separator" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of HTML for" ></div>
+    <pre id="sc3"></pre>
+    <div id="sc3_end_sep" role="separator" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of HTML for" ></div>
     <!-- 
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex3'.
-      It renders the HTML in the preceding div with ID 'sc3'.
-      If you change the ID of either the 'ex3' div or the 'sc3' div, be sure to update the sourceCode.add function parameters.
+      It renders the HTML in the preceding pre element with ID 'sc3'.
+      If you change the ID of either the 'ex3' div or the 'sc3' pre, be sure to update the sourceCode.add function parameters.
     -->
     <script>sourceCode.add('sc3', 'ex3') </script>
     <!--  After all source has been added, run make to do the insert.  -->

diff --git a/examples/coding-template/Example-Template.html b/examples/coding-template/Example-Template.html
@@ -33,7 +33,6 @@
 <body>
   <main> <!--  Repeat the name of the example in this H1  -->
   <h1>EXAMPLE_NAME Example</h1>
-
   <p>
     <!-- Provide an overview of the example where the first sentence provides a link to the section of aria-practices.html that describes the pattern this example implements. -->
     Replace this paragraph with an overview of the example that is something like the following. The
@@ -75,7 +74,7 @@ <h2 id="ex_label">Example</h2>
 
   <section>
     <h2>Accessibility Features</h2>
-    <p class="annotate">If appropriate, please replace this content with a list of any special or noteworthy accessibility features
+    <p class="annotate">Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
       demonstrated in this implementation, such as:</p>
     <ol>
       <li>What distinguishes this example from related examples.</li>
@@ -187,12 +186,12 @@ <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 id="sc1"></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <!--
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
-      It renders the HTML in the preceding div with ID 'sc1'.
-      If you change the ID of either the 'ex1' div or the 'sc1' div, be sure to update the sourceCode.add function parameters.
+      It renders the HTML in the preceding pre element with ID 'sc1'.
+      If you change the ID of either the 'ex1' div or the 'sc1' pre, be sure to update the sourceCode.add function parameters.
       -->
     <script>
       sourceCode.add('sc1', 'ex1');