Change markers: add New visual style and remove unnecessary "text sem…

…antics" (#1481)

In WCAG 2.1 there's one change marker for the third note in "Full pages"
https://www.w3.org/TR/WCAG21/#cc2 - this currently looks odd/just like
an awkward start of the sentence.

> ![WCAG 2.1 third note in 'Full pages', with 'New' at the start of the
paragraph looking like it's just part of the
sentence](https://user-images.githubusercontent.com/895831/96334873-e2599980-106b-11eb-9d28-775789405927.png)

In WCAG 2.2, there's a few more change markers, and these use JavaScript
to add "text semantics", wrapping them in square brackets. but these
don't - to my mind at least - add anything useful ... they're not read
out by default by AT unless you go character by character, and as they
just live in their own little paragraph, they don't really need to
delimit start/end of anything and are just as understandable without the
square brackets.

> ![one of WCAG 2.2's '[New]' change
markers](https://user-images.githubusercontent.com/895831/96336427-9ca2ce00-1077-11eb-8ca2-f3db0f24bf22.png)

**This PR adds a more visually explicit style, and removes the square
brackets**

![WCAG 2.1 third note in 'Full pages', with 'New' at the start of the
paragraph, now styled as bold white text on a red box with slightly
rounded corners, like a
tag/badge](https://user-images.githubusercontent.com/895831/96336449-c78d2200-1077-11eb-8b8b-47c50ac601a5.png)

![one of WCAG 2.2's 'New' change markers, styled as bold white text on a
red box with slightly rounded corners, and without the square brackets
around the
word](https://user-images.githubusercontent.com/895831/96336471-fefbce80-1077-11eb-8683-00639fc6e18c.png)

(cherry picked from commit c050bcc)

guidelines/guidelines.css

@@ -3,7 +3,13 @@
 }
 
 .change {
-	display:inline;
+    display: inline;
+    color: #fff;
+    background: #B50000;
+    border-radius: 0.25em;
+    padding: 0.25em 0.4em;
+    margin: 0 0.25em 0 0;
+    font-weight: bold;
 }
 
 .new {

script/wcag.js

@@ -32,11 +32,6 @@ function linkUnderstanding() {
 }
 
 function addTextSemantics() {
-	// put brackets around the change marker
-	document.querySelectorAll('p.change').forEach(function(node){
-		var change = node.textContent;
-		node.textContent = "[" + change + "]";
-	})
 	// put level before and parentheses around the conformance level marker
 	document.querySelectorAll('p.conformance-level').forEach(function(node){
 		var level = node.textContent;