ICEfaces
  1. ICEfaces
  2. ICE-10694

"label" attribute should render an HTML <label>

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Minor 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

        Activity

        Hide
        Ken Fyten added a comment -

        Need to assess the implications of this in terms of potential backwards compatibility and ARIA/accessibility concerns.

        Show
        Ken Fyten added a comment - Need to assess the implications of this in terms of potential backwards compatibility and ARIA/accessibility concerns.
        Hide
        Arturo Zambrano added a comment -

        r46094: added aria-labelledby attribute to <button> element in ace:checkboxButton and ace:radioButton, and also corrected the value of the 'for' attribute of the label to point to the <button> element itself and not the main container; added aria-labelledby attribute to ace:slider via client side and to ace:themeSelect; removed rendering of aria-labelledby and aria-describedby attributes in ace:linkButton and ace:pushButton, which were rendering incorrect values: they were rendering label texts instead of an id of a <label> element.

        This improvement of using <label> elements had already been done under ICE-10721. However, all components with label attributes were surveyed and assessed in regards to ARIA and accessibility. The components mentioned above weren't rendering aria-labelledby or weren't doing so correctly. The following components were already rendering aria-labelledby correctly: ace:autoCompleteEntry, ace:comboBox, ace:dateTimeEntry, ace:maskedEntry, ace:selectMenu, ace:simpleSelectOneMenu, ace:textEntry, and ace:textAreaEntry.

        Show
        Arturo Zambrano added a comment - r46094: added aria-labelledby attribute to <button> element in ace:checkboxButton and ace:radioButton, and also corrected the value of the 'for' attribute of the label to point to the <button> element itself and not the main container; added aria-labelledby attribute to ace:slider via client side and to ace:themeSelect; removed rendering of aria-labelledby and aria-describedby attributes in ace:linkButton and ace:pushButton, which were rendering incorrect values: they were rendering label texts instead of an id of a <label> element. This improvement of using <label> elements had already been done under ICE-10721 . However, all components with label attributes were surveyed and assessed in regards to ARIA and accessibility. The components mentioned above weren't rendering aria-labelledby or weren't doing so correctly. The following components were already rendering aria-labelledby correctly: ace:autoCompleteEntry, ace:comboBox, ace:dateTimeEntry, ace:maskedEntry, ace:selectMenu, ace:simpleSelectOneMenu, ace:textEntry, and ace:textAreaEntry.
        Hide
        Liana Munroe added a comment -

        Verified ICEfaces 4 trunk r46094. Tomcat 7, IE 11, FF 34, Chrome 45.

        Show
        Liana Munroe added a comment - Verified ICEfaces 4 trunk r46094. Tomcat 7, IE 11, FF 34, Chrome 45.
        Hide
        Carlo Guglielmin added a comment -

        <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...
        <h:panelGrid columns="2">
        <ace:textEntry id="itemNIn" value="#

        {postBean.toAdd.name}

        "
        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...
        <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':

        {'source':'p:itemNIn','execute':'p:itemNIn','render':'p','event':'valueChange'}

        }}]);" 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.

        Show
        Carlo Guglielmin added a comment - <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... <h:panelGrid columns="2"> <ace:textEntry id="itemNIn" value="# {postBean.toAdd.name} " 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... <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': {'source':'p:itemNIn','execute':'p:itemNIn','render':'p','event':'valueChange'} }}]);" 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.

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Carlo Guglielmin
          • Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: