Tweak inline code and preformatted blocks (#4683)

Adds a contrasting border to preformatted blocks (mainly for code
blocks, but a few others), gives a subtle style to inline code elements
in prose

Relates to #4193 and applies
suggestion 1 (the box around the `pre`) and a slightly tweaked variant
of suggestion 2b (the "subtle" style for `code`, with some extra
selector shenanigans to avoid having the background when it's inside a
link or already in a `pre` block)

EDIT: as a quick before/after, see
https://www.w3.org/WAI/WCAG22/Techniques/html/H85 and the preview here
https://deploy-preview-4683--wcag2.netlify.app/techniques/html/h85

---------

Co-authored-by: Kenneth G. Franqueiro <[email protected]>
Co-authored-by: Mike Gower <[email protected]>

Author: 3 people

css/base.css

@@ -491,3 +491,20 @@ figcaption {
 		margin: 1em 0 0 0;
 	}
 }
+
+/* preformatted blocks - generally contain code element */
+
+pre {
+    padding: 1em;
+    border: 1px solid var(--line-grey);
+    background-color: var(--pure-white);
+}
+
+/* inline code not in a preformatted block or link */
+
+:not(:is(pre, a)) > code {
+    font-size: 0.85em;
+    background: #ebebeb;
+    padding: 0 0.25em;
+    display: inline-block;
+}

techniques/aria/ARIA19.html

@@ -14,7 +14,7 @@ <h3>Injecting error messages into a container with role=alert already present in
 </p>
             <p>jQuery is used to test if the inputs are empty on submit and inject error messages into the live region containers if so. Each time a new submit is attempted the previous error messages are removed from the container and new error messages injected.
 </p>
-<pre xml:space="preserve"><code class="language-javascript">$(document).ready(function(e) {
+<pre><code class="language-javascript">$(document).ready(function(e) {
   $('#signup').submit(function() {
     $('#errors').html('');
     if ($('#first').val() === '') {
@@ -28,8 +28,8 @@ <h3>Injecting error messages into a container with role=alert already present in
     }
     return false;
   });
-});</code>
-<code class="language-html">&lt;form name="signup" id="signup"&gt;
+});</code></pre>
+<pre><code class="language-html">&lt;form name="signup" id="signup"&gt;
   &lt;p id="errors" role="alert" aria-atomic="true"&gt;&lt;/p&gt;
   &lt;div&gt;
     &lt;label for="first"&gt;First Name (required)&lt;/label&gt;&lt;br&gt;

techniques/failures/F2.html

@@ -8,17 +8,16 @@ <h3>Using CSS to style the <code>p</code> element to look like a heading</h3>
 
             <p>The author intended to make a heading but didn't want the look of the default HTML heading. So they used CSS to style the P element to look like a heading and they called it a heading. But they failed to use the proper HTML heading element. Therefore, the Assistive Technology could not distinguish it as a heading.</p>
 
-<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
+<pre><code class="language-html">&lt;style&gt;
 .heading1{
   font-family: Times, serif;
   font-size:200%;
   font-weight:bold;
 }
 &lt;/style&gt;
-</code>
-<code class="language-html">&lt;p class="heading1"&gt;Introduction&lt;/p&gt;
-&lt;p&gt;This introduction provides detailed information about how to use this ...&lt;/p&gt;</code>
-</pre>
+</code></pre>
+<pre><code class="language-html">&lt;p class="heading1"&gt;Introduction&lt;/p&gt;
+&lt;p&gt;This introduction provides detailed information about how to use this ...&lt;/p&gt;</code></pre>
 
             <div class="note">
                <p>In this case, the proper approach would be to use CSS to style the <code>H1</code> element in HTML.</p>

techniques/failures/F37.html

@@ -19,14 +19,13 @@ <h3></h3>
                                 the form when a radio button is selected instead of using a submit
                                 button. </p>
 
-<pre xml:space="preserve"><code class="language-html">&lt;script&gt; 
+<pre><code class="language-html">&lt;script&gt; 
    function goToMirror(theInput) {
     var mirrorSite = "https://download." + theInput.value + "/"; 
     window.open(mirrorSite); 
    }
-&lt;/script&gt;</code>
-...
-<code class="language-html">&lt;form name="mirror_form" id="mirror_form" action="" method="get"&gt;
+&lt;/script&gt;</code></pre>
+<pre><code class="language-html">&lt;form name="mirror_form" id="mirror_form" action="" method="get"&gt;
   &lt;p&gt;Please select a mirror download site:&lt;/p&gt; 
   &lt;p&gt; 
     &lt;input type="radio" onclick="goToMirror(this);" name="mirror" 

techniques/failures/F50.html

@@ -25,9 +25,8 @@
 
    // kick it off
    show();
-&lt;/script&gt;</code>
-...
-<code class="language-html">&lt;span id="blink1"&gt;This content will blink&lt;/span&gt;</code></pre>
+&lt;/script&gt;</code></pre>
+<pre><code class="language-html">&lt;span id="blink1"&gt;This content will blink&lt;/span&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>

techniques/failures/F88.html

@@ -7,7 +7,7 @@
 
             <p>In the following example of a failure, the HTML <code>align</code> attribute is used to create justified text.</p>
 
-<pre xml:space="preserve"><code class="language-html">&lt;p align="justify"&gt;
+<pre><code class="language-html">&lt;p align="justify"&gt;
  Peter Piper picked a peck of pickled peppers
  A peck of pickled peppers Peter Piper picked
  If Peter Piper picked a peck of pickled peppers
@@ -18,13 +18,12 @@
 
             <p>In this example of a failure, the CSS text-align property is used to create justified text.</p>
 
-<pre xml:space="preserve"><code class="language-css">p {text-align: justify}</code>
-<code class="language-html">&lt;p&gt;
+<pre><code class="language-css">p {text-align: justify}</code></pre>
+<pre><code class="language-html">&lt;p&gt;
  How much wood would a woodchuck chuck if a woodchuck could chuck wood?
  He would chuck, he would, as much as he could, and chuck as much wood
  As a woodchuck would if a woodchuck could chuck wood.
-&lt;/p&gt;</code>
-</pre>
+&lt;/p&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>

techniques/failures/F94.html

@@ -27,12 +27,11 @@ <h2>Examples</h2>
 			<section class="example">
 				<h3>Failure example 1</h3>
 				<p>The following CSS and HTML snippet uses VW units to size the text.</p>
-<pre xml:space="preserve"><code class="language-css">/* CSS */
+<pre><code class="language-css">/* CSS */
 .callout {
   font-size:1vw;
-}</code>
-
-<code class="language-html">&lt;p class="callout"&gt;Text that scales by viewport units&lt;/p&gt;</code></pre>
+}</code></pre>
+<pre><code class="language-html">&lt;p class="callout"&gt;Text that scales by viewport units&lt;/p&gt;</code></pre>
 				<p class="working-example">Example <a href="../../working-examples/failure-viewport-units/">page with an example of text sized in <code>vh</code> units</a>.</p>
 			</section>
 		</section>