cjduncana commented 8 years ago

TL;DR

I get errors from this plugin, even though the HTML file already has these problems fixed. I use a templating engine, but I do not think it is relevant since this plugin is used once the files are converted into HTML.

Problem

I am using Nunjucks as a templating engine. These are the files that I have:

~/test/gulpfile.js

var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');
var access = require('gulp-accessibility');

gulp.task('build', function() {
    return gulp.src('app/templates/*.njk')
    .pipe(nunjucksRender({
        path: ['app/templates/']
    }))
    .pipe(access()).on('error', console.log)
    .pipe(gulp.dest('dist'))
});

~/test/app/templates/layout.njk

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>{% block title %}Test Page{% endblock %}</title>
        <link rel="stylesheet" href="/styles/main.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        {% block content %} {% endblock %}
    </body>
</html>

~/test/app/templates/index.njk

{% extends "layout.njk" %}

{% block content %}
    <h1>Test Page</h1>
{% endblock %}

If I run gulp build in ~/test/, I get the following error:

Tested ~/test/app/templates/index.html

ERROR WCAG2A.Principle2.Guideline2_4.2_4_2.H25.1.NoTitleEl
A title should be provided for the document, using a non-empty title element in the head section.
--------------------
<head></head>

ERROR WCAG2A.Principle3.Guideline3_1.3_1_1.H57.2
The html element should have a lang or xml:lang attribute which describes the language of the document.
--------------------
<html><head></head><body></body></html>

There was 2 errors

As you can see from the Nunjucks templates, I have those two rules fulfilled. We can even check the output of this build process:

~/test/dist/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Test Page</title>
        <link rel="stylesheet" href="/styles/main.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>

    <h1>Test Page</h1>

    </body>
</html>

The output of the Nunjucks render does have a title in its head tag and there is a lang attribute in the html tag, but the error still appears. I do not think it has to do with Nunjucks since by the time that this plugin is used, its input is an HTML file. Do you know why this is happening?

dpmorrow commented 8 years ago

Also experiencing this issue. Not using templating, same exact errors. Going to attempt to use AccessSniff directly to see if it changes anything.

dpmorrow commented 8 years ago

It would appear for me that it was detecting files within my glob that it was not reporting that it tested. For instance, it reported my index.html had the issues which were really occurring in my angular templates.

YMMV but check your templates. EDIT: I meant to say check things like templates and other things nested within the structure that you're testing that may html be partials.

@cjduncana should investigate why it's not reporting the files the errors are originating in properly.

EDIT: Also note that the reports are not produced properly as well. The issue is the same there, wrong errors are placed in the wrong file.

Thanks in advance!

dpmorrow commented 8 years ago

I think I've isolated the problem to having a resulting glob string such as "wwwroot*/.html". Changing it to "wwwroot/*/.html" gets the errors reported properly.

Oh and I think the bug is actually in AccessSniffer, not the gulp implementation.

Zafuzi commented 8 years ago

Any chance of this error being fixed?

yargalot / gulp-accessibility

Get error even after correcting it #12

TL;DR

Problem