From d73ee0ff63929423470c0a541ce4978c82fa0e46 Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Fri, 8 Mar 2024 10:33:26 -0400 Subject: [PATCH] feat: add Decap CMS previews --- .github/workflows/release-please.yml | 14 +++ .markdownlint-cli2.cjs | 2 +- eleventy.config.js | 2 +- ...success-criteria.js => successcriteria.js} | 2 +- .../{totals-by-level.js => totalsbylevel.js} | 2 +- .../{about-this-report.md => about.md} | 2 + src/_layouts/report.njk | 51 ++++------ src/_utils/sc-table.js | 2 +- src/_utils/sc-uri.js | 2 +- src/admin/admin.njk | 3 + src/admin/config.yml | 65 +++++++------ src/admin/previews.js | 96 ++++++++++++++++++- src/assets/styles/cms.css | 3 + src/assets/styles/report.css | 58 +++-------- src/report/index.md | 47 ++++----- src/sc.njk | 4 - 16 files changed, 209 insertions(+), 146 deletions(-) create mode 100644 .github/workflows/release-please.yml rename src/_data/{success-criteria.js => successcriteria.js} (91%) rename src/_data/{totals-by-level.js => totalsbylevel.js} (97%) rename src/_includes/{about-this-report.md => about.md} (72%) create mode 100644 src/assets/styles/cms.css delete mode 100644 src/sc.njk diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml new file mode 100644 index 0000000..85d10fd --- /dev/null +++ b/.github/workflows/release-please.yml @@ -0,0 +1,14 @@ +name: Publish release + +on: + push: + branches: [main] + +jobs: + release-please: + runs-on: ubuntu-latest + steps: + - uses: google-github-actions/release-please-action@v4 + id: release + with: + token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.markdownlint-cli2.cjs b/.markdownlint-cli2.cjs index 6d14e20..be62ab6 100644 --- a/.markdownlint-cli2.cjs +++ b/.markdownlint-cli2.cjs @@ -2,5 +2,5 @@ module.exports = { config: require("./node_modules/markdownlint-config-fluid/.markdownlintrc.json"), - ignores: ["node_modules", "src/collections", "CHANGELOG.md"] + ignores: ["node_modules", "src/_includes", "src/report", "CHANGELOG.md"] }; diff --git a/eleventy.config.js b/eleventy.config.js index 11f421f..4fd01a5 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -5,7 +5,7 @@ import scUri from './src/_utils/sc-uri.js'; import sanitizeNumber from './src/_utils/sanitize-number.js'; export default function eleventy(eleventyConfig) { - eleventyConfig.addFilter('sc_uri', scUri); + eleventyConfig.addFilter('scUri', scUri); eleventyConfig.addNunjucksAsyncShortcode('scTable', scTable); diff --git a/src/_data/success-criteria.js b/src/_data/successcriteria.js similarity index 91% rename from src/_data/success-criteria.js rename to src/_data/successcriteria.js index a14b6b5..9d5ded9 100644 --- a/src/_data/success-criteria.js +++ b/src/_data/successcriteria.js @@ -29,6 +29,6 @@ export default async function successCriteria() { return results; } catch (error) { - console.error(`Fetch failed in successCriteria.js. ${error}`); + console.error(`Fetch failed in successcriteria.js. ${error}`); } } diff --git a/src/_data/totals-by-level.js b/src/_data/totalsbylevel.js similarity index 97% rename from src/_data/totals-by-level.js rename to src/_data/totalsbylevel.js index 1bdcaeb..69d3034 100644 --- a/src/_data/totals-by-level.js +++ b/src/_data/totalsbylevel.js @@ -1,4 +1,4 @@ -import successCriteria from './success-criteria.js'; +import successCriteria from './successcriteria.js'; export default async function totalsByLevel() { const totals = { diff --git a/src/_includes/about-this-report.md b/src/_includes/about.md similarity index 72% rename from src/_includes/about-this-report.md rename to src/_includes/about.md index ca93d40..77b2b68 100644 --- a/src/_includes/about-this-report.md +++ b/src/_includes/about.md @@ -1,3 +1,5 @@ +## About this report + TODO. ### Methodology diff --git a/src/_layouts/report.njk b/src/_layouts/report.njk index 3ce3fdc..be78ace 100644 --- a/src/_layouts/report.njk +++ b/src/_layouts/report.njk @@ -14,7 +14,7 @@ layout: base
Evaluated by
-
{{ evaluator }}
+
{% for evaluator in evaluators %}{{ evaluator }}{% if not loop.last%}, {% endif %}{% endfor %}
Commissioned by
{{ commissioner }}
Target
@@ -35,9 +35,8 @@ layout: base {% scTable issueList, targetLevel, targetWcagVersion %} -
-

About this report

- {% renderFile "./src/_includes/about-this-report.md" %} +
+ {% renderFile "./src/_includes/about.md" %}
@@ -47,23 +46,29 @@ layout: base

Scope:

{% endif %} - {% if out_of_scope %} + {% if outOfScope %}

Not in scope:

    - {% for out_of_scope in out_of_scope %} -
  • {{ out_of_scope }}
    • + {% for outOfScope in outOfScope %} +
  • + {{ outOfScope.title }}(external link) + {% if outOfScope.description %}

    {{ outOfScope.description }}

    {% endif %} +
    • {% endfor %} {% endif %}
-

Accessibility support

-

The audited website should work in at least the following browsers and assistive technologies:

+

Tools used

+

In conducting this audit, the following tools were used:

    - {% for baseline in baseline %} -
  • {{ baseline }}
    • + {% for tool in tools %} +
  • {{ tool.name }}{% if tool.version %} {{ tool.version }}{% endif %}
    • {% endfor %}

Technologies used

@@ -75,24 +80,6 @@ layout: base
-
-

Sample

-

Representative sample

-
    - {% for sample in samples %} -
  • -
    - {# #} -
    -
    - {{ sample.title }} - {{ sample.url }} -

    {{ sample.description }}

    • - - {% endfor %} -
-
-

Issues

    @@ -114,10 +101,10 @@ layout: base
    WCAG Criteria:
    {% for sc in issue.data.sc | sort %} - + {{ sc }}: {{ successCriteria[sc]['name'] }} (external link) - + {% endfor %}
    diff --git a/src/_utils/sc-table.js b/src/_utils/sc-table.js index 2125fb8..d25447a 100644 --- a/src/_utils/sc-table.js +++ b/src/_utils/sc-table.js @@ -1,6 +1,6 @@ /* eslint-disable unicorn/no-array-callback-reference */ /* eslint-disable unicorn/no-array-reduce */ -import totalsByLevel from '../_data/totals-by-level.js'; +import totalsByLevel from '../_data/totalsbylevel.js'; import countSuccessCriterionOnce from './count-success-criteria-once.js'; export default async function scTable( diff --git a/src/_utils/sc-uri.js b/src/_utils/sc-uri.js index b71cb3a..45d6867 100644 --- a/src/_utils/sc-uri.js +++ b/src/_utils/sc-uri.js @@ -1,4 +1,4 @@ -import successCriteria from '../_data/success-criteria.js'; +import successCriteria from '../_data/successcriteria.js'; export default async function scUri(sc, targetWcagVersion) { const baseUri = `https://www.w3.org/WAI/WCAG22/quickref/?versions=${targetWcagVersion}`; diff --git a/src/admin/admin.njk b/src/admin/admin.njk index f5f5041..28b732d 100644 --- a/src/admin/admin.njk +++ b/src/admin/admin.njk @@ -9,6 +9,9 @@ eleventyExcludeFromCollections: true IDRC WCAG Reporter + diff --git a/src/admin/config.yml b/src/admin/config.yml index f41f0a0..4f6e824 100644 --- a/src/admin/config.yml +++ b/src/admin/config.yml @@ -9,27 +9,24 @@ editor: collections: - label: Report name: report - editor: - preview: false files: + - label: About + name: about + file: src/_includes/about.md + fields: + - name: body + label: About this report + widget: markdown - label: Report Data - name: reportData + name: report file: src/report/index.md fields: - - label: Layout - name: layout - widget: hidden - default: "report" - - label: Tags - name: tags - widget: hidden - default: "reports" - label: Title name: title widget: string - - name: "evaluator" - label: "Evaluator" - widget: "string" + - name: "evaluators" + label: "Evaluators" + widget: "list" - name: "commissioner" label: "Commissioner" widget: "string" @@ -47,37 +44,43 @@ collections: - name: specialRequirements label: Special Requirements widget: text + - name: body + label: Executive summary + widget: markdown - name: scope - label: Scope + label: In scope + label_singular: in scope item widget: list - hint: Enter page names or URLs in a comma-separated list. - - name: out_of_scope + fields: + - { name: "title", label: "Title", widget: "string" } + - { name: "url", label: "URL", widget: "string" } + - { name: "description", label: "Description", widget: "text", required: false } + - name: outOfScope label: Out of scope + label_singular: out of scope item widget: list - hint: Enter page names or URLs in a comma-separated list. - - name: baseline - label: Accessibility support + fields: + - { name: "title", label: "Title", widget: "string" } + - { name: "url", label: "URL", widget: "string" } + - name: tools + label: Tools used + label_singular: tool widget: list - hint: Enter browsers and assistive technologies with which the website is expected to work in a comma-separated list. + summary: '{{fields.name}} {{fields.version}}' + fields: + - { name: "name", label: "Tool", widget: "string" } + - { name: "version", label: "Version", widget: "string", required: false } + hint: Enter browsers and assistive technologies used in auditing the website. - name: technologies label: Technologies used widget: list + default: [HTML, CSS, JavaScript, WAI-ARIA, SVG] hint: Enter technologies used to build the website in a comma-separated list. - - name: samples - label: Samples - widget: list - fields: - - { name: "title", label: "Title", widget: "string" } - - { name: "url", label: "URL", widget: "string" } - - { name: "description", label: "Description", widget: "text" } - name: issues label: Issues link widget: string hint: Enter the link to the website's issues page on GitHub, Gitlab or JIRA. required: false - - name: body - label: Executive summary - widget: markdown - label: Issues label_singular: Issue name: issue diff --git a/src/admin/previews.js b/src/admin/previews.js index e21e61d..d9ddfc1 100644 --- a/src/admin/previews.js +++ b/src/admin/previews.js @@ -1,4 +1,11 @@ -/* global CMS, createClass */ +/* global CMS, createClass, window */ + +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'); const IssuePreview = createClass({ @@ -14,7 +21,12 @@ const IssuePreview = createClass({
    WCAG Criteria:
    -
    {entry.getIn(['data', 'sc'])}
    +
    {entry.getIn(['data', 'sc']).map(sc => ( + + {sc} (external link) + + + ))}
    {entry.getIn(['data', 'severity']) === 'High' ? (
    @@ -26,7 +38,10 @@ const IssuePreview = createClass({ )}
    Sample:
    -
    {entry.getIn(['data', 'sample'])}
    +
    {entry.getIn(['data', 'sample']) === 'all' + ? 'All pages' : ( + {entry.getIn(['data', 'sample'])} + )}
    @@ -36,3 +51,78 @@ const IssuePreview = createClass({ }); CMS.registerPreviewTemplate('issue', IssuePreview); + +const ReportPreview = createClass({ + render() { + const entry = this.props.entry; + return ( + <> +
    +

    Accessibility Conformance Report for {entry.getIn(['data', 'title'])}

    +
    +
    Evaluated by
    +
    {entry.getIn(['data', 'evaluators']).join(', ')}
    +
    Commissioned by
    +
    {entry.getIn(['data', 'commissioner'])}
    +
    Target
    +
    WCAG {entry.getIn(['data', 'targetWcagVersion'])}, Level {entry.getIn(['data', 'targetLevel'])}
    +
    Date
    +
    {new Intl.DateTimeFormat('en-CA', {dateStyle: 'long'}).format(entry.getIn(['data', 'date']))}
    +
    Special requirements
    +
    {entry.getIn(['data', 'specialRequirements'])}
    +
    +
    +
    +

    Executive summary

    + {this.props.widgetFor('body')} +
    +
    +

    Scope

    +

    Pages

    +

    Scope:

    + +

    Not in scope:

    + +

    Tools used

    +

    In conducting this audit, the following tools were used:

    +
      + {this.props.widgetsFor('tools').map((tool, index) => ( +
    • {tool.getIn(['data', 'name'])}{tool.getIn(['data', 'version']) ? ` ${tool.getIn(['data', 'version'])}` : ''}
      • + ))} +
    +

    Technologies used

    +

    The audited web page relies on the following technologies:

    +
      + {entry.getIn(['data', 'technologies']).map((technology, index) => ( +
    • {technology}
      • + ))} +
    +
    + + ); + }, +}); + +CMS.registerPreviewTemplate('report', ReportPreview); diff --git a/src/assets/styles/cms.css b/src/assets/styles/cms.css new file mode 100644 index 0000000..7d8fa64 --- /dev/null +++ b/src/assets/styles/cms.css @@ -0,0 +1,3 @@ +.frame-content { + padding: 1.5rem; +} diff --git a/src/assets/styles/report.css b/src/assets/styles/report.css index 6a66679..e94febd 100644 --- a/src/assets/styles/report.css +++ b/src/assets/styles/report.css @@ -47,6 +47,10 @@ img { max-height: 50%; } +a svg { + vertical-align: middle; +} + p code, li code { font-family: Monaco, monospace; @@ -83,6 +87,7 @@ code { color: #fff; border: none; margin-bottom: 0.4em; + width: max-content; } .issue-meta { @@ -145,8 +150,8 @@ code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 90vw; - inline-size: 35em; + max-width: 90%; + width: 35em; } .sample-list img { @@ -177,7 +182,7 @@ code { } } -.wcag-link .external { +.external { clip: rect(0 0 0 0); clip-path: inset(100%); height: 1px; @@ -202,6 +207,9 @@ th { font-weight: bold; } +.issue-meta a + a { + margin-left: 0.5rem; +} /* For Prince */ @@ -233,48 +241,4 @@ th { .issue img { max-height: 5cm; } - @page { - margin: 36pt; - size: a4; - @bottom-left { - font-size: smaller; - color: #666; - /* stylelint-disable-next-line function-no-unknown */ - content: string(doctitle); - } - @bottom-right { - color: #666; - font-size: smaller; - content: counter(page) ' / ' counter(pages); - } - } - - /* stylelint-disable-next-line at-rule-no-unknown */ - @page: first { - background-color: #eee; - @bottom-left { - content: ''; - } - @bottom-right { - content: ''; - } - } -} - -img, -input[type=''image] { - /* stylelint-disable-next-line property-no-unknown */ - prince-pdf-tag-type: figure; - /* stylelint-disable-next-line property-no-unknown */ - prince-alt-text: attr(alt); -} - -figure { - /* stylelint-disable-next-line property-no-unknown */ - prince-pdf-tag-type: div; -} - -figcaption { - /* stylelint-disable-next-line property-no-unknown */ - prince-pdf-tag-type: caption; } diff --git a/src/report/index.md b/src/report/index.md index d9d63fa..d53cc94 100644 --- a/src/report/index.md +++ b/src/report/index.md @@ -1,40 +1,41 @@ --- title: Example Client -evaluator: Lisa Liskovoi +evaluators: + - Lisa Liskovoi + - Ned Zimmerman commissioner: Example Client targetLevel: AAA targetWcagVersion: "2.2" date: 2024-03-07T18:07:28.281Z specialRequirements: Please also list accessibility problems that are not conformance failures. scope: - - All pages on example.com -out_of_scope: - - The RSS feed (https://foo.com/rss) - - Other page 2 - - Some other page -baseline: - - Microsoft Edge (last 3 versions) - - Mozilla Firefox (last 3 versions) - - Google Chrome (last 3 versions) - - Apple Safari (last 3 versions) - - Apple Safari on iOS - - JAWS - - VoiceOver -technologies: - - HTML - - CSS - - JavaScript - - WAI-ARIA - - SVG -samples: - title: Homepage - id: homepage url: https://example.com description: The homepage of Example Company. - title: Blog post - id: blog-post url: https://example.com/blog/example-post description: An example of a blog post +outOfScope: + - title: RSS Feed + url: https://example.com/feed +tools: + - name: Mozilla Firefox + version: 123.0 + - name: Google Chrome + version: 122.0 + - name: Apple Safari + version: 17.4 + - name: Apple Safari (iOS) + version: 17.4 + - name: JAWS + - name: VoiceOver +technologies: + - HTML + - CSS + - JavaScript + - WAI-ARIA + - SVG + issues: https://github.com/inclusive-design/idrc-wcag-reporter/ --- This website is partly accessible. Some severe issues were found and described in this report. diff --git a/src/sc.njk b/src/sc.njk deleted file mode 100644 index 43ace75..0000000 --- a/src/sc.njk +++ /dev/null @@ -1,4 +0,0 @@ ---- -permalink: false ---- -{{ successCriteria | dump | safe }}