Details
-
Type: Improvement
-
Status: Closed
-
Priority: Minor
-
Resolution: Fixed
-
Affects Version/s: 4.0
-
Fix Version/s: 4.1
-
Component/s: ACE-Components
-
Labels:None
-
Environment:Any
-
Assignee Priority:P2
Description
To match the ease of use, accessibility, and functionality of h:outputLabel the "label" attribute used on many ACE components (ace:textEntry, etc.) should render an HTML <label> associated with the input instead of a <span>.
http://www.w3schools.com/tags/tag_label.asp
http://www.w3schools.com/tags/tag_label.asp
Activity
Ken Fyten
made changes -
Status | Resolved [ 5 ] | Closed [ 6 ] |
Arturo Zambrano
made changes -
Status | Open [ 1 ] | Resolved [ 5 ] |
Resolution | Fixed [ 1 ] |
Ken Fyten
made changes -
Assignee | Ken Fyten [ ken.fyten ] | Arturo Zambrano [ artzambrano ] |
Assignee Priority | P2 [ 10011 ] |
Ken Fyten
made changes -
Field | Original Value | New Value |
---|---|---|
Assignee | Ken Fyten [ ken.fyten ] | |
Fix Version/s | 4.1 [ 11375 ] | |
Priority | Major [ 3 ] | Minor [ 4 ] |
Carlo Guglielmin
created issue -
<label> is rendering properly now, but some parent <span> elements are added to the rendered markup which means we still can't reliably use the label/labelPosition inside an h:panelGrid due to column counting. Although when panelGrid is processed in the rendering lifecycle I don't know if we'll ever be able to properly use the label approach.
Ideally we want to be able to say:
<h:panelGrid columns="3">
<ace:someComp id="test" label="Test"/>
<ace:message for="test"/>
</h:panelGrid>
And have it render out as 3 distinct columns, the first being <label>, the second our component, and the third an error message.
Meanwhile for the span wrapping issue this JSF code...
{postBean.toAdd.name}<h:panelGrid columns="2">
<ace:textEntry id="itemNIn" value="#
"
required="true" maxlength="20"
autocapitalize="true" autocorrect="true"
placeholder="Enter item name"
requiredIndicator="*"
validator="UniqueItemNameValidator"
label="Item Name:" labelPosition="left">
<f:validateLength minimum="3" maximum="20"/>
</ace:textEntry>
<ace:message for="itemNIn"/>
</h:panelGrid>
Renders to this HTML...
{'source':'p:itemNIn','execute':'p:itemNIn','render':'p','event':'valueChange'}<table>
<tbody>
<tr>
<td>
<span id="p:itemNIn">
<span>
<label id="label_p:itemNIn" for="p:itemNIn_input" class="ui-input-label ui-input-label-left">Item Name:</label><input type="text" value="Brocolli" role="textbox" placeholder="Enter item name" onfocus="ice.ace.lazy('TextEntry',['p:itemNIn',{'autoTab':false,'secret':false,'originalType':'text','indicatorPosition':'right','labelPosition':'left','immediate':false,'behaviors':{'change':
}}]);" name="p:itemNIn_input" maxlength="20" id="p:itemNIn_input" data-elementupdate="p:itemNIn" class="ui-inputfield ui-textentry ui-widget ui-state-default ui-corner-all ui-state-required" autocorrect="true" autocapitalize="true" aria-required="true" aria-labelledby="label_p:itemNIn"><span class="ui-required-indicator ui-required-indicator-right">*</span></span>
</span>
</td>
<td>
NEXT CONTENT
</td>
</tr>
</tbody>
</table>
The important part being the <span id="p:itemNIn"> and basic <span> wrapping the label and input.