OpenACR Editor

With this tool, people can generate Accessibility Conformance Report in the OpenACR format.

W3C Web Accessibility Initiative (WAI) Reporting Tools

Development

This application is built with Svelte. To run it locally, you need to clone it this repository, have Node installed and then run this in the project's directory:

npm install

This may take a while the first time, but it only needs to be done once.

Then, to build the app with Rollup, and serve it on a local dev server, run:

export NODE_ENV=development; npm run dev

Navigate to localhost:10001. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

Deployment

To create an optimised version of the app:

npm run build

Release to GitHub pages

The site serves what's on GitHub pages. To release to GitHub pages, create a new release. This should trigger a deploy action.

Environment-specific variables in HTML and JavaScript (.svelte)

In some deployment contexts, things like paths may need to vary. There are two steps to this:

Add environment specific settings to config/[environment-name].json, for example { pathPrefix: "/editor" } or { imageDir: "/images" }
Before running npm run build or npm run dev, set export NODE_ENV=[environment-name]

Using in HTML

Use variables in HTML, with {{ variable-name }}, for instance {{ pathPrefix }}. If you need these non-escaped, use triple brackets, for instance {{{ pathPrefix }}}.

Mustache replaces the variables in src/index.html and places the resulting HTML in public/index.html.

Using in JavaScript

In JavaScript, __buildEnv__ is replaced with the name of the build environment using the replace plugin for rollup.

To use variables, this is how you can import the JSON file that your build environment needs:

import vars from "../../config/__buildEnv__.json";

The vars are now in the vars object, you can reference them with vars.variableName, for instance vars.pathPrefix.

Data structure

The editor uses the OpenACR schema and catalog as data structures.

patrickhlauke/openacr-editor