fractal-tenon
is a Fractal add-on that let's you test your components against Tenon for accessibility issues.
Installation
To add Tenon support to your Fractal instance, run
npm install fractal-tenon --save
Configuration
To add the Tenon tab to your component view and enable accessibility testing, you need to add some lines to your fractal.js
project configuration:
'use strict';
const fractal = module.exports = require('@frctl/fractal').create();
const mandelbrot = require('@frctl/mandelbrot');
const tenon = require('fractal-tenon');
const theme = mandelbrot();
tenon(theme, {
apiKey: 'TENON_API_KEY',
publicUrl: 'http://fractal.example.com'
});
fractal.web.theme(theme);
You need to provide two parameters to configure Tenon support:
- Tenon API Key: You will find this one under the "API Key" section on your tenon.io dashboard (account required).
- Public URL: Your Fractal instance needs to be publicly available for Tenon to fetch and test your components. Provide the fully qualified URL (including scheme and port if necessary).
If configured correctly, Fractal should show you a new panel labelled "Tenon" in your component view.
You may control its position by explicitly configuring the panels
option of your Fractal theme (e.g. Mandelbrot):
const theme = mandelbrot({
panels: ['html', 'view', 'tenon', 'info']
});
Hitting the "Test with Tenon" button will call Tenon and display a short version the issues found for your component. You may view the full test results on tenon.io;
Known problems
- The client JavaScript involved requires you to use a fairly recent browser version
- The module is in a very early stage and might have bugs. Please let me know if you spot one!
To-do
Changelog
Please refer to the changelog for a complete release history.
Legal
Copyright © 2017 Joschi Kuphal joschi@kuphal.net / @jkphl. fractal-tenon is licensed under the terms of the MIT license.