I'd like to use the pa11y axe runner and include custom rules.
Deque documents that axe can process custom rules at https://www.deque.com/axe/core-documentation/api-documentation/#synopsis-1.
I can configure axe to use a custom rule with this configuration:
{
disableOtherRules: true,
rules: [
{
id: 'my-cool-rule',
enabled: true,
all: ['auto-fail'],
},
],
checks: [
{
id: 'auto-fail',
metadata: {
impact: 'critical',
messages: {
pass: 'Surprise! This test passed!',
fail: 'This test did not pass, sadly.',
},
},
evaluate: function () {
return false;
},
},
],
}
I can use this configuration with other axe implementations, such as with Cypress.
Pa11y defines a rules property in its configuration docs also: https://github.com/pa11y/pa11y#configuration, and it looks like the pa11y axe runner picks up on those - but not the corresponding rules definitions in the axe config's checks property.
How can I get pa11y to execute my custom rules?
Related
I am working on a gatsby project where everything is working fine, except for when I load any page of the website as there is a flash of unstyled content for like a second. The issue persists in all the pages and my research on fixing this issue revealed this to be a persisting issue when working with styled-components. My project does not use styled components as there is one global style sheet that is shared across the project as the style sheet is loaded in the gatsby-browser.js.
code in the config below. Can anyone assist me here?
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`
});
module.exports = {
siteMetadata: {
title: 'name of site',
siteUrl: `https://lffff.com`,
description: `some description.`,
author: 'name',
image: 'image link'
},
pathPrefix: '/v2',
plugins: [
'gatsby-transformer-sharp',
'gatsby-plugin-react-helmet',
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`
}
},
{
resolve: 'gatsby-source-contentful',
options: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
}
},
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /assets/
}
}
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `GatsbyJS`,
short_name: `GatsbyJS`,
start_url: `/`,
display: `standalone`,
icon: 'src/images/5f8e0f3ace9452d1a7fbe65b_LP_Logo_Square.png'
}
}
]
};
this is what is in gatsby-browser.js
import './src/styles/globalStyles.css';
You are using prefixed paths at:
pathPrefix: '/v2',
In development (gatsby develop) paths don't need to be prefixed, however, during the build and server process (gatsby build && gatsby server) it's a needed specification
If you are building a path manually, you can use withPrefix helper function that prepends your path prefix in production.
Change your build and serve commands to:
gatsby build --prefix-paths
And:
gatsby serve --prefix-paths
If you are not using the pathPrefix, just remove it from your configuration and keep your commands as at the beginning.
It seems like everything i'm finding online is old and doesn't seem to work for me.. Any help is appreciated.
I ran "npm run eject". Then I installed with NPM
"devDependencies": {
"less": "^3.12.2",
"less-loader": "^6.2.0"
},
and in my "webpack.config.js" file this is how i have it so far:
module: {
strictExportPresence: true,
rules: [
{
test: /\.less$/,
loader: 'less-loader', // compiles Less to CSS
},
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
enforce: 'pre',
use: [
{
options: {
cache: true,
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
and then i get this error message when trying to run:
Failed to compile ./src/styles/index.less
(./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./node_modules/file-loader/dist/cjs.js??ref--7-oneOf-7!./src/styles/index.less)
module.exports = webpack_public_path +
"static/media/index.1f54121a.less";
^ Unrecognised input
Error in G:\Work Projects\uno\src\styles\index.less (line 1, column 15)
Hopefully this helps someonme. I found the answer here: https://segmentfault.com/a/1190000018858055
Short Version:
const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;
...
...
...
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex, // edited to add less above
exclude: cssModuleRegex, // edited to add less above
use: getStyleLoaders({
importLoaders: 2, // changed from 1 to 2
modules: true, // added this line
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
// etc
I'm trying to get background images to work in my Angular project's SASS when I don't know where the application root will be. For example, the app's home page could be:
localhost:9000/home
or
localhost:9000/foo/home
or
localhost:9000/bar/home
I figured I could address this by just making the paths in my background-image properties relative, like this:
div {
background-image: url("assets/smiley.png");
}
However, that doesn't work. When I compile the app, it can't find the assets. In the console, it says:
Error: Can't resolve './assets/smiley.png'
It gives me this same message whether my background-image url value starts with ./ or not. But even ./ I imagine should work.
What DOES work is if I hard-code the path into the background-image property, making the path ABSOLUTE, like so:
div {
background-image: url("/foo/assets/smiley.png");
}
However, that's not an option, since I don't know if the app root will be at /foo/ or /bar/ or something else.
Another thing that works is using the --base-href option of ng build to hard-code the path, like so:
ng build --base-href /foo/
But if possible, I'd really like to accomplish this with code changes that don't involve passing parameters to the ng build command on a build-by-build basis.
Here is my Webpack Config located at node_modules/#angular/cli/models/webpack-config.js. Is that the right file? Sorry if it's not - I'm pretty unfamiliar with webpack:
/**
* Adapted from angular2-webpack-starter
*/
const helpers = require('./config/helpers'),
webpack = require('webpack');
/**
* Webpack Plugins
*/
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
module.exports = {
devtool: 'inline-source-map',
resolve: {
extensions: ['.ts', '.js']
},
entry: helpers.root('ng2-translate.ts'),
output: {
path: helpers.root('bundles'),
publicPath: '/',
filename: 'ng2-translate.umd.js',
libraryTarget: 'umd',
library: 'ng2-translate'
},
// require those dependencies but don't bundle them
externals: [/^\#angular\//, /^rxjs\//],
module: {
rules: [{
enforce: 'pre',
test: /\.ts$/,
loader: 'tslint-loader',
exclude: [helpers.root('node_modules')]
}, {
test: /\.ts$/,
loader: 'awesome-typescript-loader?declaration=false',
exclude: [/\.e2e\.ts$/]
}]
},
plugins: [
// fix the warning in ./~/#angular/core/src/linker/system_js_ng_module_factory_loader.js
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
helpers.root('./src')
),
new webpack.LoaderOptionsPlugin({
options: {
tslintLoader: {
emitErrors: false,
failOnHint: false
}
}
})
]
};
I am using the Polymer starter kit as a reference for routing in a single page app. If I run the app on Cloud9 (the dev environment I am using) everything works as expected.
I run polymer build using the polymer-cli and then firebase deploy. The same app that runs with no issues on the Cloud9 instance produces multiple errors on Firebase Hosting.
Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'my-view1'. A type with that name is already registered.
The links are navigating as expected, but the console ends up loaded with errors like the one above. I'm guessing it has to do with the redirect to index.html in firebase.json.
firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "build/bundled",
"rewrites": [
{
"source": "**/!{*.*}",
"destination": "/index.html"
}
]
}
}
polymer.json:
{
"entrypoint": "index.html",
"shell": "src/my-app.html",
"fragments": [
"src/my-app.html",
"src/my-view1.html",
"src/my-view2.html",
"src/my-view3.html"
],
"sources": [
"src/**/*",
"images/**/*",
"bower.json"
],
"includeDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
]
}
EDIT: Here is the routing section of the starter kit
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
}
});
</script>
There is an importHref call in there, is there a better way to handle the routing here?
Any tips, tricks, or words of wisdom are greatly appreciated.
Did you use importHref? Your my-view1 has been registered multiple times. Check again to ensure that my-view1 is not being registered more than once somewhere in your code.
I'm using Yeoman and I can't find a way to trigger the CSS task upon file change.
I have a project structure like
\ app
-----\ module1
------- style.css
-----\ module2
------- style.css
-----\ module3
------- style.css
-----\ styles
------- main.css
and I'd like Yeoman to
watch all the CSS files within the modules;
trigger the CSS concat/minification task;
overwrite app/styles/main.css.
Here's my Gruntfile.js:
module.exports = function( grunt ) {
'use strict';
//
// Grunt configuration:
//
// https://github.com/cowboy/grunt/blob/master/docs/getting_started.md
//
grunt.initConfig({
// Project configuration
// ---------------------
// specify an alternate install location for Bower
bower: {
dir: 'app/components'
},
// Coffee to JS compilation
coffee: {
compile: {
files: {
// 'app/scripts/*.js': 'app/scripts/**/*.coffee',
// 'test/spec/*.js': 'test/spec/**/*.coffee'
}
}
},
// compile .scss/.sass to .css using Compass
compass: {
dist: {}
},
// default watch configuration
watch: {
reload: {
files: [
'Gruntfile.js',
'app/*.html',
'app/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*',
'app/app/**/*'
],
tasks: 'css reload'
}
},
// default lint configuration, change this to match your setup:
// https://github.com/cowboy/grunt/blob/master/docs/task_lint.md#lint-built-in-task
lint: {
files: [
'Gruntfile.js',
'app/scripts/**/*.js',
'spec/**/*.js'
]
},
// specifying JSHint options and globals
// https://github.com/cowboy/grunt/blob/master/docs/task_lint.md#specifying-jshint-options-and-globals
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true
},
globals: {
angular: true
}
},
// Build configuration
// -------------------
// the staging directory used during the process
staging: 'temp',
// final build output
output: 'dist',
mkdirs: {
staging: 'app/'
},
// Below, all paths are relative to the staging directory, which is a copy
// of the app/ directory. Any .gitignore, .ignore and .buildignore file
// that might appear in the app/ tree are used to ignore these values
// during the copy process.
// concat css/**/*.css files, inline #import, output a single minified css
css: {
'app/styles/main.css': ['app/styles/*.css', 'app/app/**/*.css']
},
// renames JS/CSS to prepend a hash of their contents for easier
// versioning
rev: {
js: 'scripts/**/*.js',
css: 'styles/**/*.css',
img: 'images/**'
},
// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
html: 'index.html'
},
// update references in HTML/CSS to revved files
usemin: {
html: ['**/*.html'],
css: ['**/*.css']
},
// HTML minification
html: {
files: ['**/*.html']
},
// Optimizes JPGs and PNGs (with jpegtran & optipng)
img: {
dist: '<config:rev.img>'
},
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true
}
});
// Alias the `test` task to run `testacular` instead
grunt.registerTask('test', 'run the testacular test driver', function () {
var done = this.async();
require('child_process').exec('testacular start --single-run', function (err, stdout) {
grunt.log.write(stdout);
done(err);
});
});
};
I am new to grunt, but what I did to write a custom watch task was this. First I registered a new task which included only the things I want to run while I am developing. I want my project to run against unminified js, for example. So I don't ask for the min or concat tasks to be executed. Just lint them, test them and rewrite the html for development mode using grunt-targethtml.
grunt.registerTask('devel', 'lint qunit targethtml');
Then I replace the default watch configuration to run the devel task
watch: {
files: '<config:lint.files>',
tasks: 'devel'
}
This is using the file list as defined for the lint task but you should be able to replace this with
files: ['app/**/*.css']