Details
-
Type: Bug
-
Status: Closed
-
Priority: Major
-
Resolution: Fixed
-
Affects Version/s: EE-3.0.0.GA, 3.1
-
Fix Version/s: EE-3.0.0.GA_P01, 3.2
-
Component/s: ICE-Components
-
Labels:None
-
Environment:Chrome, Fire Fox, Internet Explorer
-
Assignee Priority:P1
-
Affects:Compatibility/Configuration
Description
The following sample markup for an ice:panelTab, produces an HTML output where alt attributes of the spacer.gif images are missing.
This causes web accessibility errors "Linked Image missing alternative text" and breaks web page 508 compliance.
<?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:ice="http://www.icesoft.com/icefaces/component">
<h:head>
<title>ICEfaces 3</title>
<ice:outputStyle href="./xmlhttp/css/rime/rime.css" />
</h:head>
<h:body>
<h:form id="iceForm">
<ice:panelTabSet>
<ice:panelTab id="activeExceptionsTabId" title="Active Exceptions">
<f:facet name="label">
<h:graphicImage value="/resources/images/LightBulbOn.png" alt="home" id="homeId" height="16" width="16"/>
</f:facet>
<h:outputText value="Test" />
</ice:panelTab>
</ice:panelTabSet>
</h:form>
</h:body>
</html>
Source code and screen shot attached.
NOTES:
Originally this bug was reported for cases where tab labels were using an image, but I was able to reproduce it with a string label as well.
This causes web accessibility errors "Linked Image missing alternative text" and breaks web page 508 compliance.
<?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:ice="http://www.icesoft.com/icefaces/component">
<h:head>
<title>ICEfaces 3</title>
<ice:outputStyle href="./xmlhttp/css/rime/rime.css" />
</h:head>
<h:body>
<h:form id="iceForm">
<ice:panelTabSet>
<ice:panelTab id="activeExceptionsTabId" title="Active Exceptions">
<f:facet name="label">
<h:graphicImage value="/resources/images/LightBulbOn.png" alt="home" id="homeId" height="16" width="16"/>
</f:facet>
<h:outputText value="Test" />
</ice:panelTab>
</ice:panelTabSet>
</h:form>
</h:body>
</html>
Source code and screen shot attached.
NOTES:
Originally this bug was reported for cases where tab labels were using an image, but I was able to reproduce it with a string label as well.
Activity
Evgheni Sadovoi
created issue -
Evgheni Sadovoi
made changes -
Field | Original Value | New Value |
---|---|---|
Attachment | screenShot.jpg [ 14688 ] | |
Attachment | sourceCode.rar [ 14689 ] |
Evgheni Sadovoi
made changes -
Salesforce Case | [5007000000NGLUk] | |
Description |
The following sample markup for an ice ice:panelTab, produces an HTML output where alt attributes of the spacer.gif images are missing. This causes web accessibility errors "Linked Image missing alternative text" and breaks web page 508 compliance. <?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:ice="http://www.icesoft.com/icefaces/component"> <h:head> <title>ICEfaces 3</title> <ice:outputStyle href="./xmlhttp/css/rime/rime.css" /> </h:head> <h:body> <h:form id="iceForm"> <ice:panelTabSet> <ice:panelTab id="activeExceptionsTabId" title="Active Exceptions"> <f:facet name="label"> <h:graphicImage value="/resources/images/LightBulbOn.png" alt="home" id="homeId" height="16" width="16"/> </f:facet> <h:outputText value="Test" /> </ice:panelTab> </ice:panelTabSet> </h:form> </h:body> </html> Source code and screen shot attached. NOTES: Originally this bug was reported for cases where tab labels were using an image, but I was able to reproduce it with a string label as well. |
The following sample markup for an ice:panelTab, produces an HTML output where alt attributes of the spacer.gif images are missing. This causes web accessibility errors "Linked Image missing alternative text" and breaks web page 508 compliance. <?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:ice="http://www.icesoft.com/icefaces/component"> <h:head> <title>ICEfaces 3</title> <ice:outputStyle href="./xmlhttp/css/rime/rime.css" /> </h:head> <h:body> <h:form id="iceForm"> <ice:panelTabSet> <ice:panelTab id="activeExceptionsTabId" title="Active Exceptions"> <f:facet name="label"> <h:graphicImage value="/resources/images/LightBulbOn.png" alt="home" id="homeId" height="16" width="16"/> </f:facet> <h:outputText value="Test" /> </ice:panelTab> </ice:panelTabSet> </h:form> </h:body> </html> Source code and screen shot attached. NOTES: Originally this bug was reported for cases where tab labels were using an image, but I was able to reproduce it with a string label as well. |
Evgheni Sadovoi
made changes -
Environment | Chrome, FF, Internet Explorer | Chrome, Fire Fox, Internet Explorer |
Evgheni Sadovoi
made changes -
Assignee | Ken Fyten [ ken.fyten ] |
Ken Fyten
made changes -
Fix Version/s | 3.1 [ 10312 ] | |
Fix Version/s | EE-3.0.0.GA_P01 [ 10327 ] | |
Assignee Priority | P1 | |
Assignee | Ken Fyten [ ken.fyten ] | Mark Collette [ mark.collette ] |
Evgheni Sadovoi
made changes -
Summary | alt="" tag missing in panelTab when facet for label is used | alt="" tag missing in panelTab/datatable when facet for label is used |
Ken Fyten
made changes -
Fix Version/s | 3.2 [ 10338 ] | |
Fix Version/s | 3.1 [ 10312 ] |
Repository | Revision | Date | User | Message |
ICEsoft Public SVN Repository | #30101 | Wed Jul 18 23:43:54 MDT 2012 | mark.collette | |
Files Changed | ||||
MODIFY
/icefaces3/branches/icefaces-3.0.x-maintenance/icefaces/compat/components/src/main/java/com/icesoft/faces/component/paneltabset/PanelTabSetRenderer.java
MODIFY /icefaces3/branches/icefaces-3.0.x-maintenance/icefaces/compat/components/src/main/java/com/icesoft/faces/component/selectinputdate/SelectInputDateRenderer.java MODIFY /icefaces3/branches/icefaces-3.0.x-maintenance/icefaces/compat/components/src/main/java/com/icesoft/faces/component/ext/renderkit/TableRenderer.java MODIFY /icefaces3/branches/icefaces-3.0.x-maintenance/icefaces/compat/components/src/main/java/com/icesoft/faces/component/panelcollapsible/PanelCollapsibleRenderer.java |
Repository | Revision | Date | User | Message |
ICEsoft Public SVN Repository | #30516 | Thu Aug 16 09:45:39 MDT 2012 | mark.collette | |
Files Changed | ||||
MODIFY
/icefaces3/trunk/icefaces/compat/components/src/main/java/com/icesoft/faces/component/ext/renderkit/TableRenderer.java
MODIFY /icefaces3/trunk/icefaces/compat/components/src/main/java/com/icesoft/faces/component/selectinputdate/SelectInputDateRenderer.java MODIFY /icefaces3/trunk/icefaces/compat/components/src/main/java/com/icesoft/faces/component/paneltabset/PanelTabSetRenderer.java MODIFY /icefaces3/trunk/icefaces/compat/components/src/main/java/com/icesoft/faces/component/panelcollapsible/PanelCollapsibleRenderer.java |
Mark Collette
made changes -
Status | Open [ 1 ] | Resolved [ 5 ] |
Resolution | Fixed [ 1 ] |
Ken Fyten
made changes -
Summary | alt="" tag missing in panelTab/datatable when facet for label is used | alt attribute missing in panelTab/datatable when facet for label is used |
Component/s | Components [ 10012 ] | |
Component/s | Framework [ 10013 ] | |
Affects | [Compatibility/Configuration] | |
Affects Version/s | 3.1 [ 10312 ] |
Ken Fyten
made changes -
Status | Resolved [ 5 ] | Closed [ 6 ] |
Assignee Priority | P1 [ 10010 ] |
Ken Fyten
made changes -
Resolution | Fixed [ 1 ] | |
Status | Closed [ 6 ] | Reopened [ 4 ] |
Assignee Priority | P1 [ 10010 ] |
Ken Fyten
made changes -
Comment |
[ The customer issue is that we are now rendering out alt="" for the spacer.gif, but they would prefer that text be included. So I would suggest that we change it so that alt="spacer" instead of alt="".
] |
Ken Fyten
made changes -
Status | Reopened [ 4 ] | Resolved [ 5 ] |
Resolution | Fixed [ 1 ] |
Ken Fyten
made changes -
Status | Resolved [ 5 ] | Closed [ 6 ] |
Similar problem when a Datatable has a rowSelector.
The img spacer.gif does not have an alt="" tag generated.
Example
{cashReconciliationMappingBean.results}========
<ice:dataTable id="TestId" var="tableRow" styleClass="data"
sortable="true" value="#
" >
{cashReconciliationMappingBean.selectionListener}<ice:column>
<f:facet name="header">
<ice:commandSortHeader columnName="Column 1" arrow="true">
<h:outputText value="Column 1" />
</ice:commandSortHeader>
</f:facet>
<ice:rowSelector id="rowSelector"
selectionListener="#
"
{cashReconciliationMappingBean.editMappingAction}immediate="true" multiple="false"
selectionAction="#
" />
<h:outputText value="colData 1" />
</ice:column>
<ice:column>
<f:facet name="header">
<ice:commandSortHeader columnName="Column 2" arrow="true">
<h:outputText value="Column 2" />
</ice:commandSortHeader>
</f:facet>
<h:outputText value="colData 2" />
</ice:column>
</ice:dataTable
Rendered HTML
=============
<tr id="form:mainTabSetId:0:TestId:0" class="iceDatTblRow1 dataRow1 iceRowSel" tabindex="0" onmouseover="this.className=' iceRowSelMouseOver';" onmouseout="Ice.enableTxtSelection(document.body); this.className='iceDatTblRow1 dataRow1 iceRowSel'" onclick="Ice.tableRowClicked(event, false,'0', 'form', 'form:mainTabSetId:0:TestIdsel_rows','', this);">
<td class="iceDatTblCol1 dataCol1" scope="row">
<a id="form:mainTabSetId:0:TestId_idx_0" class="iceHdnLnk" onfocus="return Ice.tblRowFocus(this, false);" onblur="return Ice.tblRowBlur(this);" href="#">
<img src="/hornet/xmlhttp/css/xp/css-images/spacer.gif">
</a>
<span id="form:mainTabSetId:0:TestId:0:_t523">colData 1</span>
</td>
<td class="iceDatTblCol2 dataCol2">
<span id="form:mainTabSetId:0:TestId:0:_t525">colData 2</span>
</td>
</tr>