ICEfaces
  1. ICEfaces
  2. ICE-5994

Add a tabindex attribute to the panelTabSet

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.8.2-EE-GA_P01
    • Fix Version/s: 1.8.3, 1.8.2-EE-GA_P02, 2.0.0
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      All

      Description

      Feature Request: Add a tabindex attribute to the <ice:panelTabSet/> component.

      This will allow a user to tab into a tab set when there are other form inputs on a page with their tab indexes set. Once the tab set has focus a user can use katboard navigation to move through and select desired tabs.

      Currently if there are other form inputs that have tab indexes set the tab set gets focus after the last index is reached which disrupts smooth form tabbing.

      Here is some sample code that displays the issue:

                  <ice:form>
                      <ice:panelGrid columns="2">
                          <ice:outputText value="Input:"/>
                          <ice:inputText tabindex="1"/>
                          <ice:outputText value="Input:"/>
                          <ice:inputText tabindex="2"/>
                          <ice:outputText value="Input:"/>
                          <ice:inputText tabindex="3"/>
                          <ice:outputText value="Input:"/>
                          <ice:inputText tabindex="4"/>
                      </ice:panelGrid>
                      <ice:panelTabSet>
                          <ice:panelTab>
                              <f:facet name="label">
                                  <ice:panelGroup >
                                      <ice:outputText value="Tab 1"/>
                                  </ice:panelGroup>
                              </f:facet>
                              <ice:outputText value="Tab 1 Contents"/>
                          </ice:panelTab>
                          <ice:panelTab>
                              <f:facet name="label">
                                  <ice:panelGroup>
                                      <ice:outputText value="Tab 2"/>
                                  </ice:panelGroup>
                              </f:facet>
                              <ice:outputText value="Tab 2 Contents"/>
                          </ice:panelTab>
                          <ice:panelTab>
                              <f:facet name="label">
                                  <ice:panelGroup>
                                      <ice:outputText value="Tab 3"/>
                                  </ice:panelGroup>
                              </f:facet>
                              <ice:outputText value="Tab 3 Contents"/>
                          </ice:panelTab>
                      </ice:panelTabSet>
                      <ice:panelGrid columns="2">
                          <ice:outputText value="Input:"/>
                          <ice:inputText tabindex="6"/>
                          <ice:outputText value="Input:"/>
                          <ice:inputText tabindex="7"/>
                          <ice:outputText value="Input:"/>
                          <ice:inputText tabindex="8"/>
                          <ice:outputText value="Input:"/>
                          <ice:inputText tabindex="9"/>
                      </ice:panelGrid>
                  </ice:form>

        Activity

          People

          • Assignee:
            yip.ng
            Reporter:
            Arran Mccullough
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: