I am using Primefaces 11.0.0 and try to include a Spinner Component.
A requirement for my task is to get a WCAG 2.0 Level A. This is why the rendered input-element must have the role spinbutton.
This role should be added by spinner.js (line 371), but everytime I run my application the role of the input-element is set to textbox, and I cannot figure out why this is happening.
Even if i have a simple .xhtml-File with only the Spinner the role is textbox.
<?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" xml:lang="en" lang="en"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Title</title>
</h:head>
<h:body>
<p:spinner/>
</h:body>
</html>
Rendered output (role="textbox" instead of role="spinbutton"):
<span id="j_idt5" class="ui-spinner ui-widget ui-corner-all ui-spinner-stacked">
<input id="j_idt5_input"
name="j_idt5_input"
type="text"
class="ui-spinner-input ui-inputfield ui-state-default ui-corner-all"
autocomplete="off"
role="textbox"
aria-multiline="false"
aria-readonly="false"
aria-disabled="false"/>
<a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only">
<span class="ui-button-text">
<span class="ui-icon ui-c ui-icon-triangle-1-n"></span>
</span>
</a>
<a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only">
<span class="ui-button-text"><span class="ui-icon ui-c ui-icon-triangle-1-s"></span>
</span>
</a>
</span>
<div id="textarea_simulator" style="position: absolute; top: 0px; left: 0px; visibility: hidden;"></div>
Does anyone know why the role is not set correctly or where I can find a solution for this?
The role="textbox" is set by PrimeFaces.skinInput(this.input) which is executed after the right ARIA role was set. This is fixed in PrimeFaces 12 by https://github.com/primefaces/primefaces/pull/8397
See also:
https://github.com/primefaces/primefaces/blob/38c62b7eb8acf8aa5663be43b19e8a14c16f7bae/primefaces/src/main/resources/META-INF/resources/primefaces/core/core.js#L312
As Jasper de Vries mentions in his answer, this is a bug, which is fixed in PrimeFaces 12.
Workaround with Primefaces 11
I found a "hacky" workaround for this. If you are using Primefaces 11, follow these 3 steps:
Create a copy from the actual spinner.js file
Add it to the resources of the webapp (path in my case: .../webapp/resources/script/spinner.js)
Add the added script to the bottom of the page where the spinner is used (see example below)
<?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" xml:lang="en" lang="en"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Title</title>
</h:head>
<h:body>
<p:spinner/>
<h:outputScript name="script/spinner.js"/>
</h:body>
</html>
Related
I've been learning about facelets, and I can't seem to get a simple <ui:include> tag to work.
I have the following xhtml file:
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head />
<body>
<f:view>
<h:form>
<ui:include src="header.xhtml" />
Body text here.
</h:form>
</f:view>
</body>
</html>
and the following is header.xhtml (in the same directory):
<?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://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head />
<body>
<ui:composition>
<h2>Our Company</h2>
</ui:composition>
</body>
</html>
But when I open the first file in Chrome, the <h2>Our Company<\h2> does not display. What am I doing wrong?
I have done template in 3 steps:
Firstly i created a xhtml file with content that is common to all the pages:
AllComponentsTemplate.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<title>State Transport Department- Work Schedule</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" type="text/css" href="../../CSS/CompleteTemplateCSS.css"/>
<link rel="stylesheet" type="text/css" href="../../CSS/templateCSS.css"/>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="menu">
<h:outputLabel class="welcomeNote" value="#{welcomeBean.fullname}" />
<ul class="ulForMyAccount"><li> <h:outputLabel value="My Account" id="mainAnchor"/>
<ul ><li> <a href="/webpages/ChangePasswordxhtml.xhtml" id="subAnchor" >Change my Password</a> </li> </ul></li></ul> </div>
<div class="contentBody">
<div class="menuTable">
<table class="templateBody" >
<tr>
<td class="navigationLink" > <ul><li>
<h:link value="Home" outcome="/webpages/NewWelcome.xhtml" rendered="#{welcomeBean.home}" class="mainLinks"/>
</li></ul> </td>
</tr> </table> </div> </div>
<div class="footer"></div>
</div> </body> </html>
Then i created a MainTemplate.xhtml page which i would be using in other pages as templates:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view>
<h:head>
<title>State Transport Department-Work Schedule</title>
</h:head>
<h:body>
<ui:include src="AllComponentsTemplate.xhtml"/>
<ui:insert name="informationBody"></ui:insert>
</h:body> </f:view> </html>
Then i added this template to my first page Trial.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/webpages/templates/CompleteTemplate.xhtml">
<ui:define name="informationBody">
<h:form>
<h:commandButton id="allocateButton" value="Test Submit" action="#{empDutySchedBean.testMethod}"/>
</h:form>
</ui:define>
</ui:composition>
Note: trial.xhtml doesn't have a html, head, body tag.
Problem: till the MainTemplate.xhtml page, all the components including the link etc were perfectly visible. However after including the template into Trial.xhtml page, The My Account, Welcome label, Home naviagation link didn't appear.
Apart from this, all the css i applied for the webpage's background color appeared.
I dont know why. Help would be dearly appreciated. I am a beginner at coding.
Thank You! :)
Define your AllComponentsTemplate.xhtml as ui:composition as well it doesn't need html, head and body, and as AllComponentsTemplate.xhtml will be included, it doesn't need to add template attribute, or define sections.
If i were you I would set AllComponentsTemplate.xhtml as the main template it self with html, h:head and h:body, etc.., and let Trial.xhtml implement it.
Later on if you needed another pages to have a shared view, you go ahead and create AnotherComponentsTemplate.xhtml and let them implement it.
Refer this link it will help you as you are begineer.
http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/
and considering your problem use h:head and h:body for all html tags as Najjar metioned in his answer.
I am working on html5 offline mode in sales-force. I added following line to cache current page.
<html manifest="{!$Page.offlineCache}">
I turn off the developer mode and check the console. It is by default taking parent tag as follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!DOCTYPE html>
<html manifest="/apex/offlineCache">
<head>
As parent tag is not taking manifest attribute, Current page is not getting cached.
How can I remove that auto appended <html> parent tag?
Apex page code :
<apex:page standardStylesheets="false" cache="true" showHeader="false" sidebar="false" controller="offlineCon" title="Offline Page" docType="html-5.0">
<html manifest="/apex/offlineCache">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Offline page</title>
<apex:includeScript value="{!$Resource.all}"/>
</head>
<body>
<label >Contact First Name</label>
<input type="text" id="FirstName"></input>
<button id="savebtn">Save</button><br/><br/>
<label>Contact Last Name </label>
<input type="text" id="LastName"></input>
<button id="test">test</button>
<ol id="state"></ol>
</body>
</html>
</apex:page>
In the apex:page tag, add applyHtmlTag="false". Reverting back to a very old API version is not a very good idea!
You should have something like this:
<apex:page docType="html-5.0" showHeader="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" controller="AppController">
try by setting the docType attribute on apex:page
sample:
<apex:page sidebar="false" showHeader="false" standardStylesheets="false" docType="html-5.0" >
<html manifest="/apex/offlineCache">
<head>
<style> body{color : red;}</style>
</head>
<body>
<h1>Congratulations</h1>
This is your new Page: :)
</body>
</html>
</apex:page>
Is it possible to us a display:block for and input submit? or do I have to create an image for the submit button?
<div class="signin_btn">
<a title="Current Members Sign-In" class="l_helpl" href="/">SIGN-IN</a>
</div>
You can even do this
<!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">
<head>
<title>Test</title>
</head>
<body>
<style type="text/css">
.button
{
width: 100px;
height: 200px;
background-color: Red;
cursor: pointer;
display: block;
</style>
<div>
</div>
</body>
</html>
<a title="Current Members Sign-In" class="l_helpl" href="/">
<span class="signin_btn">
SIGN-IN
</span>
</a>
This should do the trick. And of course change your styling to suit the changes.
I think it is stupid for a person having more than 500 reps to ask this question. Anyway here is how I would do it
<div class="signin_btn">
<a title="Current Members Sign-In" class="l_helpl" href="/" style="display:block;">SIGN-IN</a>
</div>
But please be remembered that it is a bad practice to have a block level element inside an inline element.
It's all in the question but here's a simple example
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>TEST</title>
</head>
<body style="margin:0;padding:0">
<div style="background-color:#eeeeee;margin:auto;height:500px;width:500px">
<div style="position:relative">
<span style="position:absolute;display:block;height:250px;width:250px;background:green;z-layer:2"><br /><br />Should be on top</span>
</div>
<span style="position:relative;display:block;width:500px;background:blue;z-layer:1">Actually on top</span>
</div>
</body>
</html>
instead of "z-layer" use "z-index"
also the absolute span is in a relative div with no z-index
Here is the correct html:
<div style="background-color:#eeeeee;margin:auto;height:500px;width:500px">
<div style="position:relative;z-index:2">
<span style="position:absolute;display:block;height:250px;width:250px;background:green"><br /><br />Should be on top</span>
</div>
<span style="position:relative;display:block;width:500px;background:blue;z-index:1">Actually on top</span>
</div>
It happens because when you position an element "absolutely" it is removed from the flow of the document in the Document Object Model and so elements that remain in the flow of the document appear "above" the removed element. For cross-browser compatibility place your z-index adjustments on the parent element of the absolutely positioned element.