ICEfaces
  1. ICEfaces
  2. ICE-6686

Add tabindex to rowSelector/dataTable

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.8.2-EE-GA_P02, 2.0.0, 2.0.0-EE-Beta1
    • Fix Version/s: EE-1.8.2.GA_P03, 2.1-Beta, 3.0
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      All
    • Assignee Priority:
      P1
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.)

      Description

      Feature Request: Add a tabindex to the rowSelector/dataTable to allow a user to tab into the table to allow proper tab key flow.

      Scenario: A form has a few inputs with tabindex's set, a dataTable that has row selection/keyboard nav enabled and then some more inputs with tabindex's set.

      <ice:inputText tabindex="1"/>
      <ice:inputText tabindex="2"/>
      <ice:dataTable tabindex="3">
           <ice:rowSelector.../>
           ...
      </ice:dataTable>
      <ice:commandButton tabindex="4"/>
      <ice:commandButton tabindex="5"/>

      When starting at tabindex 1 and tabbing the dataTable is skipped over and only received focus once the end of the tab order is hit.

        Activity

        Hide
        Arran Mccullough added a comment -

        Potential workaround is to not have any tabindex's defined on the form. This will allow the browser to use the natrural layout of the components to enable tabbing into the table

        Show
        Arran Mccullough added a comment - Potential workaround is to not have any tabindex's defined on the form. This will allow the browser to use the natrural layout of the components to enable tabbing into the table
        Hide
        yip.ng added a comment - - edited

        Tab index attribute added to row selector and rendered as tab index of hidden anchor. See screenshot 1. Markup is like this:

        <ice:inputText tabindex="1" value="tabindex = 1"/>
        <ice:inputText tabindex="2" value="tabindex = 2"/>
        <ice:dataTable ......>
        <ice:column>
        <ice:rowSelector tabindex="3" ...... />
        ......
        </ice:column>
        ......
        </ice:dataTable>
        <ice:commandButton tabindex="4" value="tabindex = 4"/>
        <ice:commandButton tabindex="5" value="tabindex = 5"/>

        Revision: 24482


        Modified : /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/ExtendedAttributeConstants.java
        Modified : /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/ext/renderkit/TableRenderer.java
        Modified : /icefaces/trunk/icefaces/component-metadata/src/main/resources/conf/ice_cust_properties/cust-rowselector-props.xml

        Revision: 24484


        Modified : /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/ext/RowSelector.java

        Revision: 24483


        Modified : /icefaces2/trunk/icefaces/compat/component-metadata/src/main/resources/conf/ice_cust_properties/cust-rowselector-props.xml
        Modified : /icefaces2/trunk/icefaces/compat/components/src/main/java/com/icesoft/faces/component/ExtendedAttributeConstants.java
        Modified : /icefaces2/trunk/icefaces/compat/components/src/main/java/com/icesoft/faces/component/ext/renderkit/TableRenderer.java

        Revision: 24485


        Modified : /icefaces2/trunk/icefaces/compat/components/src/main/java/com/icesoft/faces/component/ext/RowSelector.java

        Show
        yip.ng added a comment - - edited Tab index attribute added to row selector and rendered as tab index of hidden anchor. See screenshot 1. Markup is like this: <ice:inputText tabindex="1" value="tabindex = 1"/> <ice:inputText tabindex="2" value="tabindex = 2"/> <ice:dataTable ......> <ice:column> <ice:rowSelector tabindex="3" ...... /> ...... </ice:column> ...... </ice:dataTable> <ice:commandButton tabindex="4" value="tabindex = 4"/> <ice:commandButton tabindex="5" value="tabindex = 5"/> Revision: 24482 Modified : /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/ExtendedAttributeConstants.java Modified : /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/ext/renderkit/TableRenderer.java Modified : /icefaces/trunk/icefaces/component-metadata/src/main/resources/conf/ice_cust_properties/cust-rowselector-props.xml Revision: 24484 Modified : /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/ext/RowSelector.java Revision: 24483 Modified : /icefaces2/trunk/icefaces/compat/component-metadata/src/main/resources/conf/ice_cust_properties/cust-rowselector-props.xml Modified : /icefaces2/trunk/icefaces/compat/components/src/main/java/com/icesoft/faces/component/ExtendedAttributeConstants.java Modified : /icefaces2/trunk/icefaces/compat/components/src/main/java/com/icesoft/faces/component/ext/renderkit/TableRenderer.java Revision: 24485 Modified : /icefaces2/trunk/icefaces/compat/components/src/main/java/com/icesoft/faces/component/ext/RowSelector.java
        Hide
        Mandeep Hayher added a comment -

        Tested successfully on icefaces1.8 trunk revision# 24720 using FF3.6 & IE8.
        Test fails on chrome10, user can not tab into rowselector/ datatable.

        Show
        Mandeep Hayher added a comment - Tested successfully on icefaces1.8 trunk revision# 24720 using FF3.6 & IE8. Test fails on chrome10, user can not tab into rowselector/ datatable.
        Hide
        yip.ng added a comment - - edited

        This has nothing to do with tabindex being added. Tabbing wasn't working in Chrome even before this. You can see it in the live component showcase demo.

        The problem was caused by changes in ICE-5357. The image link used to simulate tabbing was reduced to width zero. And it seems Chrome just won't tab to a zero-width link.

        Even if we could revert this change, it could still upset layout of existing apps. See screenshot 2.

        Show
        yip.ng added a comment - - edited This has nothing to do with tabindex being added. Tabbing wasn't working in Chrome even before this. You can see it in the live component showcase demo. The problem was caused by changes in ICE-5357 . The image link used to simulate tabbing was reduced to width zero. And it seems Chrome just won't tab to a zero-width link. Even if we could revert this change, it could still upset layout of existing apps. See screenshot 2.
        Hide
        yip.ng added a comment -

        Issue separately documented in ICE-6921.

        Show
        yip.ng added a comment - Issue separately documented in ICE-6921 .

          People

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

            Dates

            • Created:
              Updated:
              Resolved: