Search code examples
jsffaceletswai-aria

Putting <a role> in Facelets composition shows message "Attribute role is not allowed here"

I just tried to setup my jsf project with bootstrap. Everything works fine except that when I added a bootstrap template that includes the "role" attribute. I get a message that says Attribute role is not allowed here

I'm not good with design and I'm focusing more with the backend so I really need to use bootstrap.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:composition>
    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="..." alt="..."/>
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
    </div>
</ui:composition>
</html>

enter image description here

I can't figure out why it won't read that attribute when all other tags and attributes are recognized.

Any possible solution?

Thank you.

Solution

  • Your doctype is wrong. The role attribute is part of HTML5 (ARIA), not XHTML 1.0.

    Fix the doctype accordingly.

    <!DOCTYPE html>

    Your editor (IDE) is just validating the document based on doctype. This is not a JSF nor Bootstrap specific problem. This is related to basic HTML.

    By the way, in Facelets compositions you actually don't strictly need a XML prolog nor doctype. Those will be ignored by Facelets anyway. Below should work as good in its entirety:

    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
>
    <!-- Content here -->
</ui:composition>

    See also: