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
- All
- Comments
- History
- Activity
- Remote Attachments
- Subversion
I searched throughout compat and found and fixed these uses of spacer.gif without a corresponding alt="" attribute:
dataTable with rowSelector having keyboardNavigationEnabled=true
dataTable with resizable=true, using ice:column with groupOn set where the ice:column isn't the last one
dataTable with resizable=true where the column is the last one, regardless of if it's h:column or ice:column or groupOn is set
dataTable with resizable=true when the row being rendered isn't the last one
panelCollapsible with toggleOnClick=true and disabled=false
panelTabSet with disabled=false and has a label facet
selectInputDate when imageDir is not set
icefaces3-maintenance branch
Subversion 30101
trunk
Subversion 30516
Show
Mark Collette
added a comment - - edited I searched throughout compat and found and fixed these uses of spacer.gif without a corresponding alt="" attribute:
dataTable with rowSelector having keyboardNavigationEnabled=true
dataTable with resizable=true, using ice:column with groupOn set where the ice:column isn't the last one
dataTable with resizable=true where the column is the last one, regardless of if it's h:column or ice:column or groupOn is set
dataTable with resizable=true when the row being rendered isn't the last one
panelCollapsible with toggleOnClick=true and disabled=false
panelTabSet with disabled=false and has a label facet
selectInputDate when imageDir is not set
icefaces3-maintenance branch
Subversion 30101
trunk
Subversion 30516
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>