feat: add supports table, group issues by principle

.pages.yml

@@ -67,187 +67,6 @@ content:
         type: string
         list: true
         description: Enter technologies used to build the website.
-      - name: supported
-        label: Supported
-        type: select
-        list: true
-        required: false
-        options:
-          values:
-            - value: 1.1.1
-              label: "1.1.1: Non-text Content"
-            - value: 1.2.1
-              label: "1.2.1: Audio-only and Video-only (Prerecorded)"
-            - value: 1.2.2
-              label: "1.2.2: Captions (Prerecorded)"
-            - value: 1.2.3
-              label: "1.2.3: Audio Description or Media Alternative (Prerecorded)"
-            - value: 1.2.4
-              label: "1.2.4: Captions (Live)"
-            - value: 1.2.5
-              label: "1.2.5: Audio Description (Prerecorded)"
-            - value: 1.2.6
-              label: "1.2.6: Sign Language (Prerecorded)"
-            - value: 1.2.7
-              label: "1.2.7: Extended Audio Description (Prerecorded)"
-            - value: 1.2.8
-              label: "1.2.8: Media Alternative (Prerecorded)"
-            - value: 1.2.9
-              label: "1.2.9: Audio-only (Live)"
-            - value: 1.3.1
-              label: "1.3.1: Info and Relationships"
-            - value: 1.3.2
-              label: "1.3.2: Meaningful Sequence"
-            - value: 1.3.3
-              label: "1.3.3: Sensory Characteristics"
-            - value: 1.3.4
-              label: "1.3.4: Orientation"
-            - value: 1.3.5
-              label: "1.3.5: Identify Input Purpose"
-            - value: 1.3.6
-              label: "1.3.6: Identify Purpose"
-            - value: 1.4.1
-              label: "1.4.1: Use of Color"
-            - value: 1.4.2
-              label: "1.4.2: Audio Control"
-            - value: 1.4.3
-              label: "1.4.3: Contrast (Minimum)"
-            - value: 1.4.4
-              label: "1.4.4: Resize Text"
-            - value: 1.4.5
-              label: "1.4.5: Images of Text"
-            - value: 1.4.6
-              label: "1.4.6: Contrast (Enhanced)"
-            - value: 1.4.7
-              label: "1.4.7: Low or No Background Audio"
-            - value: 1.4.8
-              label: "1.4.8: Visual Presentation"
-            - value: 1.4.9
-              label: "1.4.9: Images of Text (No Exception)"
-            - value: 1.4.10
-              label: "1.4.10: Reflow"
-            - value: 1.4.11
-              label: "1.4.11: Non-text Contrast"
-            - value: 1.4.12
-              label: "1.4.12: Text Spacing"
-            - value: 1.4.13
-              label: "1.4.13: Content on Hover or Focus"
-            - value: 2.1.1
-              label: "2.1.1: Keyboard"
-            - value: 2.1.2
-              label: "2.1.2: No Keyboard Trap"
-            - value: 2.1.3
-              label: "2.1.3: Keyboard (No Exception)"
-            - value: 2.1.4
-              label: "2.1.4: Character Key Shortcuts"
-            - value: 2.2.1
-              label: "2.2.1: Timing Adjustable"
-            - value: 2.2.2
-              label: "2.2.2: Pause, Stop, Hide"
-            - value: 2.2.3
-              label: "2.2.3: No Timing"
-            - value: 2.2.4
-              label: "2.2.4: Interruptions"
-            - value: 2.2.5
-              label: "2.2.5: Re-authenticating"
-            - value: 2.2.6
-              label: "2.2.6: Timeouts"
-            - value: 2.3.1
-              label: "2.3.1: Three Flashes or Below Threshold"
-            - value: 2.3.2
-              label: "2.3.2: Three Flashes"
-            - value: 2.3.3
-              label: "2.3.3: Animation from Interactions"
-            - value: 2.4.1
-              label: "2.4.1: Bypass Blocks"
-            - value: 2.4.2
-              label: "2.4.2: Page Titled"
-            - value: 2.4.3
-              label: "2.4.3: Focus Order"
-            - value: 2.4.4
-              label: "2.4.4: Link Purpose (In Context)"
-            - value: 2.4.5
-              label: "2.4.5: Multiple Ways"
-            - value: 2.4.6
-              label: "2.4.6: Headings and Labels"
-            - value: 2.4.7
-              label: "2.4.7: Focus Visible"
-            - value: 2.4.8
-              label: "2.4.8: Location"
-            - value: 2.4.9
-              label: "2.4.9: Link Purpose (Link Only)"
-            - value: 2.4.10
-              label: "2.4.10: Section Headings"
-            - value: 2.4.11
-              label: "2.4.11: Focus Not Obscured (Minimum)"
-            - value: 2.4.12
-              label: "2.4.12: Focus Not Obscured (Enhanced)"
-            - value: 2.4.13
-              label: "2.4.13: Focus Appearance"
-            - value: 2.5.1
-              label: "2.5.1: Pointer Gestures"
-            - value: 2.5.2
-              label: "2.5.2: Pointer Cancellation"
-            - value: 2.5.3
-              label: "2.5.3: Label in Name"
-            - value: 2.5.4
-              label: "2.5.4: Motion Actuation"
-            - value: 2.5.5
-              label: "2.5.5: Target Size (Enhanced)"
-            - value: 2.5.6
-              label: "2.5.6: Concurrent Input Mechanisms"
-            - value: 2.5.7
-              label: "2.5.7: Dragging Movements"
-            - value: 2.5.8
-              label: "2.5.8: Target Size (Minimum)"
-            - value: 3.1.1
-              label: "3.1.1: Language of Page"
-            - value: 3.1.2
-              label: "3.1.2: Language of Parts"
-            - value: 3.1.3
-              label: "3.1.3: Unusual Words"
-            - value: 3.1.4
-              label: "3.1.4: Abbreviations"
-            - value: 3.1.5
-              label: "3.1.5: Reading Level"
-            - value: 3.1.6
-              label: "3.1.6: Pronunciation"
-            - value: 3.2.1
-              label: "3.2.1: On Focus"
-            - value: 3.2.2
-              label: "3.2.2: On Input"
-            - value: 3.2.3
-              label: "3.2.3: Consistent Navigation"
-            - value: 3.2.4
-              label: "3.2.4: Consistent Identification"
-            - value: 3.2.5
-              label: "3.2.5: Change on Request"
-            - value: 3.2.6
-              label: "3.2.6: Consistent Help"
-            - value: 3.3.1
-              label: "3.3.1: Error Identification"
-            - value: 3.3.2
-              label: "3.3.2: Labels or Instructions"
-            - value: 3.3.3
-              label: "3.3.3: Error Suggestion"
-            - value: 3.3.4
-              label: "3.3.4: Error Prevention (Legal, Financial, Data)"
-            - value: 3.3.5
-              label: "3.3.5: Help"
-            - value: 3.3.6
-              label: "3.3.6: Error Prevention (All)"
-            - value: 3.3.7
-              label: "3.3.7: Redundant Entry"
-            - value: 3.3.8
-              label: "3.3.8: Accessible Authentication (Minimum)"
-            - value: 3.3.9
-              label: "3.3.9: Accessible Authentication (Enhanced)"
-            - value: 4.1.1
-              label: "4.1.1: Parsing (Obsolete and removed)"
-            - value: 4.1.2
-              label: "4.1.2: Name, Role, Value"
-            - value: 4.1.3
-              label: "4.1.3: Status Messages"
       - name: partiallySupported
         label: Partially Supported
         type: select
@@ -834,5 +653,5 @@ content:
           label: Body,
           name: body,
           type: rich-text,
-          default: "#### Problem\n\nDescribe the problem. Include code samples if necessary.\n\n#### Potential Solutions\n\nDescribe some potential solutions.\n\n#### Read more\n\nInclude some links to relevant examples and/or articles.",
+          default: "##### Problem\n\nDescribe the problem. Include code samples if necessary.\n\n##### Potential Solutions\n\nDescribe some potential solutions.\n\n##### Read more\n\nInclude some links to relevant examples and/or articles.",
         }

eleventy.config.js

@@ -1,6 +1,7 @@
 import {EleventyRenderPlugin} from '@11ty/eleventy';
 import syntaxHighlightPlugin from '@11ty/eleventy-plugin-syntaxhighlight';
 import newIssueUrl from './src/_utils/new-issue-url.js';
+import scSupport from './src/_utils/sc-support.js';
 import scTable from './src/_utils/sc-table.js';
 import scUri from './src/_utils/sc-uri.js';
 import sanitizeNumber from './src/_utils/sanitize-number.js';
@@ -9,6 +10,7 @@ export default function eleventy(eleventyConfig) {
 	eleventyConfig.addFilter('scUri', scUri);
 
 	eleventyConfig.addNunjucksAsyncShortcode('scTable', scTable);
+	eleventyConfig.addNunjucksAsyncShortcode('scSupport', scSupport);
 	eleventyConfig.addShortcode('newIssueUrl', newIssueUrl);
 	eleventyConfig.addLayoutAlias('report', 'report.njk');
 

src/_layouts/report.njk

@@ -30,6 +30,8 @@ layout: base
   {{ content | safe }}
   <h3>Results per principle</h3>
   {% scTable issueList, targetLevel, targetWcagVersion %}
+  <h3>Detailed results</h3>
+  {% scSupport partiallySupported, unsupported %}
 </section>
 
 <section id="about-this-report">
@@ -86,16 +88,24 @@ layout: base
   <h2>Issues</h2>
   <ol>
   {% for issue in issueList %}
-    {% if issue.fileSlug !== page.fileSlug %}
     <li><a href="#{{ issue.data.title  | slugify }}">{{ issue.data.title }}</a> ({% for sc in issue.data.sc | sort %}{{ sc }}{% if not loop.last%}, {% endif %}{% endfor %})</li>
-    {% endif %}
   {% endfor %}
   </ol>
+  {% set principle = '' %}
   {% for issue in issueList %}
+    {% if principle !== successcriteria[issue.data.sc[0]].principle %}
+      {% set principle = successcriteria[issue.data.sc[0]].principle %}
+      {% set newPrinciple = true %}
+    {% else %}
+      {% set newPrinciple = false %}
+    {% endif %}
+    {% if newPrinciple %}
+    <h3 id="{{ principle | slug }}">{{ principle }}</h3>
+    {% endif %}
     {% if issue.fileSlug !== page.fileSlug %}
     <article class="issue">
       <header class="issue-title">
-        <h3 id="{{ issue.data.title | slugify }}"><span class="number">Issue {{ loop.index }}</span>{{ issue.data.title }}</h3>
+        <h4 id="{{ issue.data.title | slugify }}"><span class="number">Issue {{ loop.index }}</span>{{ issue.data.title }}</h4>
         {% newIssueUrl issue.data.title, issue.rawInput, issue.data.sample, issuesUrl %}
       </header>
       {{ issue.templateContent | safe }}

src/_utils/new-issue-url.js

@@ -5,7 +5,7 @@ export default function newIssueUrl(title, body, sample, issuesUrl) {
 
 	let issueUrl = '';
 
-	body = sample === 'all' ? `${body}\n#### Pages\n\n- All pages` : `${body}\n#### Pages\n\n- ${sample}`;
+	body = sample === 'all' ? `${body}\n##### Pages\n\n- All pages` : `${body}\n##### Pages\n\n- ${sample}`;
 
 	if (issuesUrl.includes('github')) {
 		issueUrl = newGithubIssueUrl({

src/_utils/sc-support.js

@@ -0,0 +1,46 @@
+import successCriteria from '../_data/successcriteria.js';
+
+export default async function scSupport(partiallySupported, unsupported) {
+	partiallySupported ||= [];
+	unsupported ||= [];
+
+	let criteria;
+
+	try {
+		criteria = await successCriteria();
+	} catch (error) {
+		console.error(`Fetch failed in sc-support.js. ${error}`);
+	}
+
+	let output = `
+    <table class="sc-table">
+    <thead>
+      <tr>
+        <th>Success criteria</th>
+        <th>Level</th>
+        <th>Support</th>
+      </tr>
+    </thead>
+    <tbody>`;
+
+	for (const key in criteria) {
+		if (Object.hasOwn(criteria, key)) {
+			let support = 'Supported';
+
+			if (unsupported.includes(key)) {
+				support = 'Unsupported';
+			}
+
+			if (partiallySupported.includes(key)) {
+				support = 'Partially Supported';
+			}
+
+			output += `<tr><td>${key}: ${criteria[key].name}</td><td>${criteria[key].level}</td><td>${support}</td></tr>`;
+		}
+	}
+
+	output += `<tbody>
+    </table>`;
+
+	return output;
+}

src/_utils/sc-table.js

@@ -46,8 +46,8 @@ export default async function scTable(
   <table class="sc-table">
   <thead>
     <tr>
-      <td>Principle</td>
-      <td>Results by principle</td>
+      <th>Principle</th>
+      <th>Results by principle</th>
     </tr>
   </thead>
   <tbody>

src/_utils/sc-uri.js

@@ -9,7 +9,7 @@ export default async function scUri(sc, targetWcagVersion) {
 	try {
 		criteria = await successCriteria();
 	} catch (error) {
-		console.error(`Fetch failed in scUri.js. ${error}`);
+		console.error(`Fetch failed in sc-uri.js. ${error}`);
 	}
 
 	if (criteria[sc]) {

src/admin/config.yml

@@ -76,16 +76,6 @@ collections:
             widget: list
             default: [HTML, CSS, JavaScript, WAI-ARIA, SVG]
             hint: Enter technologies used to build the website in a comma-separated list.
-          - name: supported
-            label: Supported
-            widget: relation
-            multiple: true
-            collection: report
-            file: scData
-            value_field: successCriteria.*.number
-            search_fields: [successCriteria.*.number, successCriteria.*.name]
-            display_fields: [successCriteria.*.number, successCriteria.*.name]
-            required: false
           - name: partiallySupported
             label: Partially Supported
             widget: relation
@@ -176,5 +166,5 @@ collections:
           label: Body,
           name: body,
           widget: markdown,
-          default: "#### Problem\n\nDescribe the problem. Include code samples if necessary.\n\n#### Potential Solutions\n\nDescribe some potential solutions.\n\n#### Read more\n\nInclude some links to relevant examples and/or articles.",
+          default: "##### Problem\n\nDescribe the problem. Include code samples if necessary.\n\n##### Potential Solutions\n\nDescribe some potential solutions.\n\n##### Read more\n\nInclude some links to relevant examples and/or articles.",
         }

src/assets/styles/report.css

@@ -73,6 +73,14 @@ h3 {
 	color: #191970;
 }
 
+h4 {
+	font-size: 1.25rem;
+}
+
+h5 {
+	font-size: 1.125rem;
+}
+
 hr {
 	border: none;
 	height: 0.125em;
@@ -150,7 +158,7 @@ pre[class*='language-'] {
 	background-color: #e6e6fa;
 }
 
-.issue header h3 {
+.issue header h4 {
 	margin-block: 0;
 	display: flex;
 	flex-direction: column;

src/pages.njk

@@ -70,17 +70,6 @@ content:
         type: string
         list: true
         description: Enter technologies used to build the website.
-      - name: supported
-        label: Supported
-        type: select
-        list: true
-        required: false
-        options:
-          values:
-{%- for number, sc in successcriteria %}
-            - value: {{ number }}
-              label: "{{ number }}: {{ sc.name }}"
-{%- endfor %}
       - name: partiallySupported
         label: Partially Supported
         type: select
@@ -157,5 +146,5 @@ content:
           label: Body,
           name: body,
           type: rich-text,
-          default: "#### Problem\n\nDescribe the problem. Include code samples if necessary.\n\n#### Potential Solutions\n\nDescribe some potential solutions.\n\n#### Read more\n\nInclude some links to relevant examples and/or articles.",
+          default: "##### Problem\n\nDescribe the problem. Include code samples if necessary.\n\n##### Potential Solutions\n\nDescribe some potential solutions.\n\n##### Read more\n\nInclude some links to relevant examples and/or articles.",
         }