Added char, corrected form-error page.

content/body/chart.php

@@ -0,0 +1,59 @@
+<p>Here is a chart example, modified from the <a href="https://bl.ocks.org/d3noob/5d47df5374d210b6f651">original
+    demo</a> by <a href="https://gist.github.com/d3noob">d3noob</a>.</p>
+
+<div id="line-chart-example" class="enable-example chart-example">
+
+  <div id="tabs">
+
+
+    <div class="sr-only tabs__instructions" id="tabs-keyboard-only-instructions">
+      Use arrow keys to choose tabs. Content for the chosen tab will be revealed below.
+    </div>
+
+    <ul class="enable-tablist" data-keyboard-only-instructions="tabs-keyboard-only-instructions">
+      <li>
+        <a href="#heading__visual-chart" class="enable-tab" data-owns="tabpanel__visual-chart">
+          Visual Chart
+        </a>
+      </li>
+      <li>
+        <a href="#heading__raw-data" class="enable-tab" data-owns="tabpanel__raw-data">
+          Raw Data
+        </a>
+      </li>
+
+    </ul>
+    <div class="enable-tabpanel" id="tabpanel__visual-chart">
+      <h2 tabindex="-1" class="sr-only" id="heading__visual-chart">Visual Chart</h2>
+
+      <div id="visual-chart__content" class="tab__content">
+        <!-- This will have the chart inserted here via JavaScript -->
+      </div>
+    </div>
+    <div class="enable-tabpanel" id="tabpanel__raw-data">
+      <h2 tabindex="-1" class="sr-only" id="heading__raw-data">Raw Data</h2>
+      <div class="tab__content">
+
+        <!-- This is the sticky table container described in table.php -->
+        <div class="sticky-table__container" tabindex="0">
+          <figure>
+
+            <figcaption id="line-chart__fig-caption" class="caption">
+              Family Birthdays (Table Coded Using Figcaption)
+            </figcaption>
+            <div id="raw-data__content">
+              <!-- This will have the table data inserted here via JavaScript -->
+            </div>
+
+          </figure>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+
+
+</div>
+
+<p>Is there a better way to generate this?</p>

content/body/dropdown.php

@@ -235,7 +235,7 @@
 }
 </script>
 
-<h2>ARIA dropdown with checkboxes</h2>
+<h2 id="multiselect">ARIA dropdown with checkboxes</h2>
 
 <?php includeStats(array('isForNewBuilds' => true, 'comment' => 'This is a better solution that using multi-select <code>&lt;select&gt;</code> boxes, in my opinion.')) ?>
 

content/bottom/chart.php

@@ -0,0 +1,2 @@
+
+<script src="js/demos/line-chart.js" type="module"></script>

content/head/chart.php

@@ -0,0 +1,3 @@
+<link class="example-stylesheet" rel="stylesheet" type="text/css" href="css/tabs.css" >
+<link id="table-css" rel="stylesheet" type="text/css" href="css/table.css" >
+<link id="chart-css" rel="stylesheet" type="text/css" href="css/chart.css" >

css/chart.css

@@ -0,0 +1,16 @@
+.chart-example path {
+  stroke: steelblue;
+  stroke-width: 2;
+  fill: none;
+}
+.chart-example .axis path,
+.chart-example .axis line {
+  fill: none;
+  stroke: grey;
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+}
+.chart-example table {
+  margin: 20px auto 0 auto;
+  border: solid 1px black;
+}

css/form-error.css

@@ -175,9 +175,10 @@
   text-shadow: 0 0 0.0714em #73994d;
   font-weight: bold;
 }
-.enable-form-example form label.required::after {
+.enable-form-example label.required::after {
   color: #e60000;
   content: " *";
+  font-weight: normal;
 }
 .enable-form-example .required-symbol {
   color: #e60000;

data/line-chart.csv

@@ -0,0 +1,27 @@
+date,close,open
+1-May-12,68.13,34.12
+30-Apr-12,63.98,45.56
+27-Apr-12,67.00,67.89
+26-Apr-12,89.70,78.54
+25-Apr-12,99.00,89.23
+24-Apr-12,130.28,99.23
+23-Apr-12,166.70,101.34
+20-Apr-12,234.98,122.34
+19-Apr-12,345.44,134.56
+18-Apr-12,443.34,160.45
+17-Apr-12,543.70,180.34
+16-Apr-12,580.13,210.23
+13-Apr-12,605.23,223.45
+12-Apr-12,622.77,201.56
+11-Apr-12,626.20,212.67
+10-Apr-12,628.44,310.45
+9-Apr-12,636.23,350.45
+5-Apr-12,633.68,410.23
+4-Apr-12,624.31,430.56
+3-Apr-12,629.32,460.34
+2-Apr-12,618.63,510.34
+30-Mar-12,599.55,534.23
+29-Mar-12,609.86,578.23
+28-Mar-12,617.62,590.12
+27-Mar-12,614.48,560.34
+26-Mar-12,606.98,580.12

data/nukes.csv

@@ -0,0 +1,59 @@
+"Year","Strategic warheads","Non-strategic warheads","Total stockpile","Awaiting dismantlement","Total intact warheads"
+"1945","6","","6","",""
+"1946","11","","11","",""
+"1947","32","","32","",""
+"1948","110","","110","",""
+"1949","235","","235","",""
+"1950","369","","369","",""
+"1951","549","91","640","",""
+"1952","800","205","1005","",""
+"1953","1000","436","1436","",""
+"1954","1500","563","2063","",""
+"1955","2200","857","3057","",""
+"1956","3000","1618","4618","",""
+"1957","4200","2244","6444","",""
+"1958","5700","4122","9822","",""
+"1959","7006","8462","15468","",""
+"1960","7000","13433","20433","",""
+"1961","6874","17237","24111","",""
+"1962","7211","20085","27296","",""
+"1963","7098","20085","27183","",""
+"1964","8028","22723","30751","",""
+"1965","9345","22297","31642","",""
+"1966","11232","20468","31700","",""
+"1967","12409","18484","30893","",""
+"1968","12238","16645","28883","",""
+"1969","11969","14940","26909","",""
+"1970","12223","13896","26119","",""
+"1971","12875","13489","26364","",""
+"1972","12363","12615","24978","",""
+"1973","15059","13276","28335","",""
+"1974","15398","12772","28170","",""
+"1975","15748","11305","27053","",""
+"1976","15568","10388","25956","",""
+"1977","15530","9569","25099","",""
+"1978","15235","9008","24243","",""
+"1979","15156","8951","24107","",""
+"1980","14404","9360","23764","",""
+"1981","13586","9445","23031","",""
+"1982","13072","9865","22937","",""
+"1983","13113","10041","23154","",""
+"1984","13960","9267","23227","",""
+"1985","14044","9090","23134","",""
+"1986","14481","8772","23253","",""
+"1987","14955","8535","23490","",""
+"1988","14795","8282","23077","",""
+"1989","13967","8207","22174","285","22459"
+"1990","13395","7816","21211","471","21682"
+"1991","9154","9152","18306","1764","20070"
+"1992","9444","4287","13731","4559","18290"
+"1993","8512","3024","11536","5246","16782"
+"1994","8801","2211","11012","4426","15438"
+"1995","8959","1994","10953","3266","14219"
+"1996","8648","2238","10886","2421","13307"
+"1997","8755","2075","10830","1881","12711"
+"1998","8744","2019","10763","1153","11916"
+"1999","8681","2017","10698","960","11658"
+"2000","8679","1936","10615","570","11185"
+"2001","8309","2182","10491","416","10907"
+"2002","8634","1821","10455","274","10729"

js/bookmarklets/positionStickyTest.js

@@ -0,0 +1,22 @@
+function positionStickyTest(el) {
+  let x = el.parentNode;
+
+  const { position, top, left, bottom, right } = document.defaultView.getComputedStyle(el, null);
+  if ( currentStyle.position !== 'sticky') {
+    console.log(`This note has a position of ${position}`);
+  }
+
+  if ( top === 'auto' && left === 'auto' && right === 'auto' && bottom === 'auto') {
+    console.log(`This node must have top, left, right or bottom set to something other than auto.`)
+  }
+
+  while (x.nodeName !== 'HTML') { 
+    const { overflow } = document.defaultView.getComputedStyle(x, null);
+
+    if (overflow === 'hidden' || overflow === 'scroll' || overflow === 'auto') {
+      console.error(`Ancestor has overflow set to ${overflow}`, x);
+    }
+
+    x = x.parentNode;
+  }
+}

js/demos/line-chart.js

@@ -0,0 +1,128 @@
+import * as d3 from "https://cdn.skypack.dev/d3@7";
+import tabs from "../modules/tabs.js"
+
+
+// Set the dimensions of the canvas / graph
+const margin = { top: 30, right: 20, bottom: 30, left: 50 },
+  width = 600 - margin.left - margin.right,
+  height = 270 - margin.top - margin.bottom;
+
+// Parse the date / time
+// Enable changed d3.time.format to d3.timeFormat due to API changes
+// details: https://stackoverflow.com/questions/39369789/how-to-solve-typeerror-d3-time-is-undefined
+const parseDate = d3.timeParse("%d-%b-%y");
+
+// Set the ranges
+// Enable changed d3.time.scale changed to d3.scaleTime and d3.scale.linear changed to d3.scaleLinear
+// details: https://stackoverflow.com/questions/39369789/how-to-solve-typeerror-d3-time-is-undefined
+const x = d3.scaleTime().range([0, width]);
+const y = d3.scaleLinear().range([height, 0]);
+
+// Define the axes
+// Enable changed d3.svg.axis().scale(x).orient("bottom") 
+// to d3.axisBottom(x) and
+// d3.svg.axis().scale(y).orient("left") to d3.axisLeft(y) as per
+// https://stackoverflow.com/questions/40465283/what-is-d3-svg-axis-in-d3-version-4
+const xAxis = d3.axisBottom(x).ticks(5);
+
+const yAxis = d3.axisLeft(y).ticks(5);
+
+// Define the line
+// https://github.com/d3/d3/blob/main/CHANGES.md
+const valueline = d3.line()
+  .x(function (d) { return x(d.date1); })
+  .y(function (d) { return y(d.close); });
+
+// Adds the svg canvas
+const svg = d3.select("#visual-chart__content")
+  .append("svg")
+  .attr("width", width + margin.left + margin.right)
+  .attr("height", height + margin.top + margin.bottom)
+  .append("g")
+  .attr("transform",
+    "translate(" + margin.left + "," + margin.top + ")");
+
+// Get the data
+d3.csv("../../data/line-chart.csv").then(function (data) {
+  data.forEach(function (d) {
+    d.date1 = parseDate(d.date);    //  <= Change to date1
+    d.close = +d.close;
+    d.open = +d.open;  //  <= added this for tidy house keeping
+    d.diff = Math.round((d.close - d.open) * 100) / 100;
+  });
+
+  // Scale the range of the data
+  x.domain(d3.extent(data, function (d) { return d.date1; }));//<=date1
+  y.domain([0, d3.max(data, function (d) { return d.close; })]);
+
+  // Add the valueline path.
+  svg.append("path")
+    .attr("class", "line")
+    .attr("d", valueline(data));
+
+  // Add the X Axis
+  svg.append("g")
+    .attr("class", "x axis")
+    .attr("transform", "translate(0," + height + ")")
+    .call(xAxis);
+
+  // Add the Y Axis
+  svg.append("g")
+    .attr("class", "y axis")
+    .call(yAxis);
+
+  // The table generation function
+  function tabulate(data, columns) {
+    const tableContentID = 'raw-data__content';
+    const $figure = document.getElementById(tableContentID).closest('figure');
+    const $figcaption = $figure.querySelector('figcaption');
+    const figcaptionID = $figcaption.getAttribute('id');
+
+    const table = d3.select(`#${tableContentID}`).append("table").attr("aria-labelledby", figcaptionID),
+      thead = table.append("thead"),
+      tbody = table.append("tbody");
+
+    // append the header row
+    thead.append("tr")
+      .selectAll("th")
+      .data(columns)
+      .enter()
+      .append("th").attr('scope', 'col')
+      .text(function (column) { return column; });
+
+    // create a row for each object in the data
+    const rows = tbody.selectAll("tr")
+      .data(data)
+      .enter()
+      .append("tr");
+
+    // create a cell in each row for each column
+    const cells = rows.selectAll("td")
+      .data(function (row) {
+        return columns.map(function (column) {
+          return { column: column, value: row[column] };
+        });
+      })
+      .enter()
+      .append("td")
+      .html(function (d) { return d.value; });
+
+    return table;
+  }
+
+  // render the table
+  const peopleTable = tabulate(data, ["date", "close", "open", "diff"]);
+
+  peopleTable.selectAll("tbody tr")
+    .sort(function (a, b) {
+      return d3.descending(a.close, b.close);
+    });
+
+  peopleTable.selectAll("thead th")
+    .text(function (column) {
+      return column.charAt(0).toUpperCase() + column.substr(1);
+    });
+
+});
+
+tabs.init();

less/chart.less

@@ -0,0 +1,22 @@
+.chart-example {
+  path {
+    stroke: steelblue;
+    stroke-width: 2;
+    fill: none;
+  }
+
+  .axis path,
+  .axis line {
+    fill: none;
+    stroke: grey;
+    stroke-width: 1;
+    shape-rendering: crispEdges;
+  }
+
+  table {
+    margin: 20px auto 0 auto;
+    border: solid 1px black;
+  }
+
+
+}

less/form-error.less

@@ -194,9 +194,10 @@
     }
   }
 
-  form label.required::after {
+  label.required::after {
     color: #e60000;
     content: " *";
+    font-weight: normal;
   }
 
   .required-symbol {