w3c validator warning: The type attribute is unnecessary for JavaScript resources.

[OBreidenbach]

1) Environment

• PrimeFaces version: 6.2
• Does it work on the newest released PrimeFaces version? Version? No, 6.2
• Does it work on the newest sources in GitHub? (Build by source -> https://github.com/primefaces/primefaces/wiki/Building-From-Source) No
• Application server + version: wildfly 11
• Affected browsers: FF, ... (does not matter)

2) Expected behavior

No warning by the w3c validator.

3) Actual behavior

If Html 5 is used, the validator is complaining that the attribute 'type="text/javascript"' is unnecessary.

4) Steps to reproduce

Let the validator validate the primefaces showcase.
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.primefaces.org%2Fshowcase%2F

I can provide a PR, but I do not know what would be the best solution.

• Adding a config parameter to en-/disable rendering the type attribute.
• Suppress rendering of type attribute if Html 5 is used. Is there a way to figure this out?
• Is there a central place to handle it? ResponceWriter?

[tandraschko]

1. there are only ~5-10 places in PF which renders the type, we can of course change them but script includes are rendered by the JSF impl (if you don't use MOVE_SCRIPTS_TO_BOTTOM)

2. i don't think there is a easy way, i would just check the config

3. -1, we can easily change these 5-10 places

[cnsgithub]

I like where you are going, PrimeFaces should definetely render valid markup in order for users to be able to include W3C QA validation icons on their websites for example.

But shouldn't we first take care of the errors:

Since script type is allowed in HTML5 as well, I wouldn't spend too much effort on this.

[tandraschko]

+1 @cnsgithub

[melloware]

+1. @tandraschko do you have an idea of where those errors are coming from? if not I can help investigate if you want.

[tandraschko]

no idea, sry

[melloware]

understood. I will investigate and see what I can find out.

[melloware]

OK the errors are weird. The W3C validator is reporting type="button" is in the DOM twice but I when inspect the DOM in Chrome or any other tool its only there once. So I have no idea why its reporting this an an error and twice unless the JS is doing something to the DOM after it loads the W3C only looks at the original DOM sent from the server and not the JS manipulated DOM?

[cnsgithub]

@melloware Just right-click and view the page source, then you'll find them twice.

[melloware]

Ahh interesting. Chrome and Firefox in the Inspector filter this out but View Source shows it. The issue is due to this..

<p:button type="button" value="GET STARTED" icon="fa fa-download" outcome="/getstarted"/>

So its just bad markup in the showcase as that type="button" is not necessary.

[cnsgithub]

Ok, it's rather a showcase issue then...

[melloware]

Yep I will submit a Showcase PR.

[OBreidenbach]

As a solution for my problem, do not render the type attribute for the script element, I did write my own response writer. This solves the problem for primefaces and the standard jsf components.

[melloware]

@OBreidenbach Do you care to share your response writer here please?

[OBreidenbach]

@melloware sure, no big deal. Why are you coming back to this ticket after over 2 years?

public class Html5ResponseWriter extends ResponseWriterWrapper {
    private boolean inScriptStartTag;
    public Html5ResponseWriter(ResponseWriter wrapped) {
        super(wrapped);
    }

    @Override
    public void startElement(String name, UIComponent component) throws IOException {
        super.startElement(name, component);
        inScriptStartTag = "script".equals(name);
    }

    @Override
    public void endElement(String name) throws IOException {
        super.endElement(name);
        if ("script".equals(name)) {
            inScriptStartTag = false;
        }
    }

    @Override
    public void writeAttribute(String name, Object value, String property) throws IOException {
        if (inScriptStartTag && "text/javascript".equals(value)) {
            return;
        }
        super.writeAttribute(name, value, property);
    }
}

public class MyFacesContext extends FacesContextWrapper {

    public MyFacesContext(FacesContext context) {
        super(context);
    }

    @Override
    public void setResponseWriter(ResponseWriter responseWriter) {
        super.setResponseWriter(new Html5ResponseWriter(responseWriter));
    }
}

public class MyFacesContextFactory extends FacesContextFactoryImpl {

    private final FacesContextFactory wrapped;

    public MyFacesContextFactory(FacesContextFactory facesContextFactory) {
        wrapped = facesContextFactory;
    }

    @Override
    public FacesContext getFacesContext(Object context, Object request, Object response, Lifecycle lifecycle) throws FacesException {
        FacesContext wrappedContext = this.wrapped.getFacesContext(context, request, response, lifecycle);
        return wrappedContext instanceof MyFacesContext ? wrappedContext : new MyFacesContext(wrappedContext);
    }
}

<faces-config>
    <factory>
        <faces-context-factory>my.package.MyFacesContextFactory</faces-context-factory>
    </factory>
</faces-config>

[melloware]

@OBreidenbach I think I might add this code in PFE for people to be able to enable with just...

<faces-config>
    <factory>
        <faces-context-factory>org.primefaces.extensions.Html5ContextFactory</faces-context-factory>
    </factory>
</faces-config>

My client is running our HTML through WCAG and is seeing this and asking "WHY?" and they don't like my answer. :)

[OBreidenbach]

Cool, good idea.

[tandraschko]

just to clarify as i dont understand this 2 different factories?

JSF/Java Server Faces API/Specs = javax:*
Jakarta Faces API/Specs = jakarta.*

Mojarra 2.3 = JSF impl
Mojarra 3.0 = Jakarta Faces Impl

MyFaces 2.3 = JSF Impl
MyFaces 3.0 = Jakarta Faces Impl

[tandraschko]

Therefor if we need to 2 different factories, they should be called Mojarra/MyFaces, not MyFaces/Jakarta, that doesnt make any sense.

Its even better to only have 1 factory and add if-else statements for myfaces/mojarra

[tandraschko]

And yes, the factory doenst need to extend a mojarra or myfaces class actually? Just check PrimeFaces, we have FactoryContextFactory there AFAIR

[melloware]

Let me look I assumed i needed to extend the factory.

[melloware]

Got it modeled after PrimeContextFactory now its just one class Html5ContextFactory.

<faces-config>
    <factory>
        <faces-context-factory>org.primefaces.extensions.application.Html5ContextFactory</faces-context-factory>
    </factory>
</faces-config>

[melloware]

This is now a first class citizen in Faces 4.0: jakartaee/faces#1568