feat: style improvements and syntax highlighting

inclusive-design · Mar 8, 2024 · aeaab88 · aeaab88
1 parent bdc2893
commit aeaab88
Show file tree

Hide file tree

Showing 22 changed files with 184 additions and 126 deletions.
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -54,6 +54,7 @@ export default function eleventy(eleventyConfig) {
 	});
 
 	eleventyConfig.addPassthroughCopy({
+		'node_modules/a11y-syntax-highlighting/dist/prism/a11y-dark.min.css': 'assets/styles/a11y-dark.min.css',
 		'node_modules/decap-cms/dist/decap-cms.js': 'lib/cms/decap-cms.js',
 		'node_modules/decap-cms/dist/decap-cms.js.map':
             'lib/cms/decap-cms.js.map',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "@11ty/eleventy": "3.0.0-alpha.5",
     "@11ty/eleventy-fetch": "^4.0.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+    "a11y-syntax-highlighting": "^0.2.0",
     "decap-cms": "^3.1.2",
     "eleventy-plugin-markdown-shortcode": "^1.1.0",
     "esbuild": "^0.20.1",

diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
-<html lang="{{ language }}">
+<html lang="en-CA">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{% block title %}{{ title }}{% endblock %}</title>
-  <link rel="stylesheet" href="assets/styles/main.css">
-	{# <style>code[class*="language-"],pre[class*="language-"]{color:#545454;background:none;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:1em;margin:1em 0;overflow:auto;}:not(pre) > code[class*="language-"],pre[class*="language-"]{background:#fefefe}:not(pre) > code[class*="language-"]{white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#696969}.token.punctuation{color:#545454}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#007faa}.token.boolean,.token.number{color:#008000}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#aa5d00}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#008000}.token.atrule,.token.attr-value,.token.function{color:#aa5d00}.token.keyword{color:#d91e18}.token.important,.token.regex{color:#d91e18}.token.bold,.token.important{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}@media screen and (-ms-high-contrast: active){code[class*="language-"],pre[class*="language-"]{color:windowText;background:window}:not(pre) > code[class*="language-"],pre[class*="language-"]{background:window}.token.important{background:highlight;color:window;font-weight:normal}.token.atrule,.token.attr-value,.token.function,.token.keyword,.token.operator,.token.selector{font-weight:bold}.token.attr-value,.token.comment,.token.doctype,.token.function,.token.keyword,.token.operator,.token.property,.token.string{color:highlight}.token.attr-value,.token.url{font-weight:normal}}@media (prefers-color-scheme:dark){code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2b2b2b}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#d4d0ab}.token.punctuation{color:#fefefe}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#ffa07a}.token.boolean,.token.number{color:#00e0e0}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#abe338}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#00e0e0}.token.atrule,.token.attr-value,.token.function{color:gold}.token.keyword{color:#00e0e0}.token.important,.token.regex{color:gold}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}}@media screen and (-ms-high-contrast:active){code[class*=language-],pre[class*=language-]{color:windowText;background:window}:not(pre)>code[class*=language-],pre[class*=language-]{background:window}.token.important{background:highlight;color:window;font-weight:400}.token.atrule,.token.attr-value,.token.function,.token.keyword,.token.operator,.token.selector{font-weight:700}.token.attr-value,.token.comment,.token.doctype,.token.function,.token.keyword,.token.operator,.token.property,.token.string{color:highlight}.token.attr-value,.token.url{font-weight:400}}</style>  #}
-   {% block meta %}{% endblock %}
+  <link rel="stylesheet" href="assets/styles/a11y-dark.min.css">
+  <link rel="stylesheet" href="assets/styles/report.css">
+  <link rel="stylesheet" href="assets/styles/print.css" media="print">
+  <link rel="stylesheet" href="assets/styles/screen.css" media="screen">
+  {% block meta %}{% endblock %}
 </head>
 <body>
     {{ content | safe }}

diff --git a/src/_layouts/report.njk b/src/_layouts/report.njk
@@ -1,16 +1,13 @@
 ---
 layout: base
 ---
-
-<link rel="stylesheet" href="assets/styles/report.css">
-
 {% set issueList = collections.issues %}
 {% set tipsList = collections.tips %}
 
 <section id="start">
   <img src="assets/images/logo.svg" alt="" class="logo">
 
-  <h1>Accessibility Conformance Report for {{ title }}</h1>
+  <h1>Accessibility Audit for {{ title }}</h1>
 
   <dl>
     <dt>Evaluated by</dt>
@@ -44,22 +41,27 @@ layout: base
   <h3>Pages</h3>
   {% if scope %}
   <p>Scope:
-  <ul>
+  <ol class="sample-list">
     {% for scope in scope %}
     <li id="{{ scope.title | slugify }}">
-      <a href="{{ scope.url }}">{{ scope.title }}<span class="external">(external link)</span> <svg aria-hidden="true" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="14" width="16" style="vertical-align: middle;"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z" fill="currentColor"></path></svg></a>
-      {% if scope.description %}<p>{{ scope.description }}</p>{% endif %}
+      <!-- TODO: Add screenhots -->
+      {# <div><img src="" alt="" /></div> #}
+      <div>
+        <strong>{{ scope.title }}</strong>
+        <a href="{{ scope.url }}">{{ scope.url }}</a>
+        {% if scope.description %}<p>{{ scope.description }}</p>{% endif %}
+      </div>
     </li>
     {% endfor %}
-  </ul>
+  </ol>
   {% endif %}
   {% if outOfScope %}
   <p>Not in scope:
   <ul>
     {% for outOfScope in outOfScope %}
     <li>
-      <a href="{{ outOfScope.url }}">{{ outOfScope.title }}<span class="external">(external link)</span> <svg aria-hidden="true" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="14" width="16" style="vertical-align: middle;"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z" fill="currentColor"></path></svg></a>
-      {% if outOfScope.description %}<p>{{ outOfScope.description }}</p>{% endif %}
+        <a href="{{ outOfScope.url }}">{{ outOfScope.url }}</a>
+        {% if outOfScope.description %}<p>{{ outOfScope.description }}</p>{% endif %}
     </li>
     {% endfor %}
     {% endif %}
@@ -92,7 +94,7 @@ layout: base
   {% for issue in issueList %}
     {% if issue.fileSlug !== page.fileSlug %}
     <article class="issue">
-      <h3 id="{{ issue.data.title  | slugify }}" data-issue="Issue" class="issue-title">{{ issue.data.title }}</h3>
+      <h3 id="{{ issue.data.title  | slugify }}" class="issue-title"><span class="number">Issue {{ loop.index }}</span>{{ issue.data.title }}</h3>
       {{ issue.templateContent | safe }}
 
       <div class="issue-meta">

diff --git a/src/admin/config.yml b/src/admin/config.yml
@@ -17,7 +17,7 @@ collections:
           - name: body
             label: About this report
             widget: markdown
-      - label: Report Data
+      - label: Report
         name: report
         file: src/report/index.md
         fields:

diff --git a/src/admin/previews.js b/src/admin/previews.js
@@ -4,16 +4,17 @@ import slugify from '@sindresorhus/slugify';
 
 const successCriteria = window.successCriteria;
 
-CMS.registerPreviewStyle('/assets/styles/cms.css');
-CMS.registerPreviewStyle('/assets/styles/main.css');
 CMS.registerPreviewStyle('/assets/styles/report.css');
+CMS.registerPreviewStyle('/assets/styles/screen.css');
+CMS.registerPreviewStyle('/assets/styles/cms.css');
 
 const IssuePreview = createClass({
 	render() {
 		const entry = this.props.entry;
 		return (
 			<article className='issue'>
 				<h3 data-issue='Issue' className='issue-title'>
+					<span className='number'>Issue 1</span>
 					{entry.getIn(['data', 'title'])}
 				</h3>
 				{this.props.widgetFor('body')}
@@ -22,8 +23,8 @@ const IssuePreview = createClass({
 						<div>
 							<dt>WCAG Criteria: </dt>
 							<dd>{entry.getIn(['data', 'sc']).map(sc => (
-								<a class='wcag-link' href={`https://www.w3.org/WAI/WCAG22/quickref/#${successCriteria[sc].id}`} rel='external'>
-									{sc} <span class='external'>(external link)</span>
+								<a className='wcag-link' href={`https://www.w3.org/WAI/WCAG22/quickref/#${successCriteria[sc].id}`} rel='external'>
+									{sc} <span className='external'>(external link)</span>
 									<svg aria-hidden='true' role='presentation' focusable='false' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' height='14' width='16'><path xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' d='M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z' fill='currentColor'></path></svg>
 								</a>
 							))}</dd>
@@ -58,7 +59,7 @@ const ReportPreview = createClass({
 		return (
 			<>
 				<section id='start'>
-					<h1>Accessibility Conformance Report for {entry.getIn(['data', 'title'])}</h1>
+					<h1>Accessibility Audit for {entry.getIn(['data', 'title'])}</h1>
 					<dl>
 						<dt>Evaluated by</dt>
 						<dd>{entry.getIn(['data', 'evaluators']).join(', ')}</dd>
@@ -80,26 +81,25 @@ const ReportPreview = createClass({
 					<h2>Scope</h2>
 					<h3>Pages</h3>
 					<p>Scope:</p>
-					<ul>
+					<ol className='sample-list'>
 						{this.props.widgetsFor('scope').map((scope, index) => (
 							<li key={index}>
-								<a href={scope.getIn(['data', 'url'])} rel='external'>
-									{scope.getIn(['data', 'title'])} <span class='external'>(external link)</span>
-									<svg aria-hidden='true' role='presentation' focusable='false' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' height='14' width='16'><path xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' d='M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z' fill='currentColor'></path></svg>
-								</a>{scope.getIn(['data', 'description']) ? (
-									<p>{scope.getIn(['data', 'description'])}</p>
-								) : ''}
+								<div>
+									<strong>{scope.getIn(['data', 'title'])}</strong>
+									<a href={scope.getIn(['data', 'url'])} rel='external'>{scope.getIn(['data', 'url'])}</a>
+									{scope.getIn(['data', 'description']) ? (
+										<p>{scope.getIn(['data', 'description'])}</p>
+									) : ''}
+								</div>
 							</li>
 						))}
-					</ul>
+					</ol>
 					<p>Not in scope:</p>
 					<ul>
 						{this.props.widgetsFor('outOfScope').map((outOfScope, index) => (
 							<li key={index}>
-								<a href={outOfScope.getIn(['data', 'url'])} rel='external'>
-									{outOfScope.getIn(['data', 'title'])} <span class='external'>(external link)</span>
-									<svg aria-hidden='true' role='presentation' focusable='false' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' height='14' width='16'><path xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' d='M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z' fill='currentColor'></path></svg>
-								</a>{outOfScope.getIn(['data', 'description']) ? (
+								<a href={outOfScope.getIn(['data', 'url'])} rel='external'>{outOfScope.getIn(['data', 'title'])}</a>
+								{outOfScope.getIn(['data', 'description']) ? (
 									<p>{outOfScope.getIn(['data', 'description'])}</p>
 								) : ''}
 							</li>

diff --git a/src/assets/fonts/noto-sans-mono-v30-latin-regular.ttf b/src/assets/fonts/noto-sans-mono-v30-latin-regular.ttf
diff --git a/src/assets/fonts/noto-sans-mono-v30-latin-regular.woff2 b/src/assets/fonts/noto-sans-mono-v30-latin-regular.woff2
diff --git a/src/assets/fonts/noto-serif-v23-latin-700.ttf b/src/assets/fonts/noto-serif-v23-latin-700.ttf
diff --git a/src/assets/fonts/noto-serif-v23-latin-700.woff2 b/src/assets/fonts/noto-serif-v23-latin-700.woff2
diff --git a/src/assets/fonts/noto-serif-v23-latin-700italic.ttf b/src/assets/fonts/noto-serif-v23-latin-700italic.ttf
diff --git a/src/assets/fonts/noto-serif-v23-latin-700italic.woff2 b/src/assets/fonts/noto-serif-v23-latin-700italic.woff2
diff --git a/src/assets/fonts/noto-serif-v23-latin-italic.ttf b/src/assets/fonts/noto-serif-v23-latin-italic.ttf
diff --git a/src/assets/fonts/noto-serif-v23-latin-italic.woff2 b/src/assets/fonts/noto-serif-v23-latin-italic.woff2
diff --git a/src/assets/fonts/noto-serif-v23-latin-regular.ttf b/src/assets/fonts/noto-serif-v23-latin-regular.ttf
diff --git a/src/assets/fonts/noto-serif-v23-latin-regular.woff2 b/src/assets/fonts/noto-serif-v23-latin-regular.woff2
diff --git a/src/assets/styles/cms.css b/src/assets/styles/cms.css
@@ -1,3 +1,16 @@
 .frame-content {
 	padding: 1.5rem;
 }
+
+.frame-content pre {
+	background: #2b2b2b;
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+.frame-content code[class*='language-'],
+.frame-content pre[class*='language-'] {
+	color: #f8f8f2;
+}
diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
diff --git a/src/assets/styles/print.css b/src/assets/styles/print.css
@@ -1 +1,31 @@
-/** TODO: Add print-specific styles. */
+body {
+	font-size: 10pt;
+}
+
+.issue {
+	border: none;
+	padding: 0;
+	break-before: page;
+}
+
+.issue-meta {
+	background-color: transparent;
+	border-top: 2px solid #dcdcdc;
+}
+
+.issue-meta div {
+	margin-bottom: 1em;
+}
+
+.issue img {
+	max-height: 5cm;
+}
+
+.wcag-link {
+	text-decoration: underline;
+	background-color: transparent;
+	color: #00e;
+	padding: 0;
+	font-size: inherit;
+	border-radius: 0;
+}