Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    RadioButton tabbing

    Using Chrome, build 08-16-11. Click into the Reason field. Start tabbing. when you get to the radio button, you'll notice that the focus goes to the yes button, then the yes label and then it skips to the No label, completely skipping the no button.

    In Firefox, the tabbing goes from the validate button to I can't even see where then eventually goes to the search bar of the browser.
    In IE, the tabbing goes from the yes label to the browser search bar

    Code:
    isc.DynamicForm.create({
        ID: "exampleForm",
        width: 250,
        titleOrientation: "top",
        fields: [
            
            {name: "reason",
             type: "text",
             title: "Reason",
             validators : [{
                type: "requiredIf",
                expression: "exampleForm.getValue('willAttend') == 'No'",
                errorMessage: "Please provide a reason"
             }]
            },
            {name: "validate",
             title: "Validate",
             type: "button",
             click: "form.validate()"
            },{name: "willAttend",
             type: "radioGroup",
             colSpan: "*",
             required: true,
             vertical: false,
             valueMap: ["Yes", "No"],
             redrawOnChange:true,
             title: "Will you be attending the meeting on April 4th? If no, please provide a reason"
            }
        ]
    });
    Last edited by acarur01; 16 Aug 2011, 10:59.

    #2
    The behavior of focus going to the labels in Chrome is odd - we'll look into this.

    Other than that we're not seeing anything obviously wrong here. The standard behavior for Radio items in an HTML form is that only the selected value is a tab-stop. You then choose the value you want via arrow keys. You can try this out yourself with some very simple HTML:

    Code:
    <html>
    <form>
    <input type="radio" name="group1" value="Yes"> Yes
    <input type="radio" name="group1" value="No" checked> No<br>
    </form>
    </html>
    Your description sounds like this is happening for you in Chrome and IE (though in Chrome you're also seeing focus go to the labels for each radio-item). You also say the focus is behaving strangely in FF (going to some mysterious, non obvious element). We're not reproducing this using your simple test case. If you keep seeing this, could you
    a) Ensure that you can reproduce it in a simple standalone file (IE outside the Feature Explorer, which has numerous other components that may be having an impact on this), and show us the test case
    b) Let us know exactly what OS / browser version you see this on.

    Thanks
    Isomorphic Software

    Comment


      #3
      I've tried the simple testcase I've provided in standalone and I can no longer reproduce the issue with Firefox - when you say that the feature explorer MAY have other components affecting tabbing, I think this is what we are seeing in one of our applications. We will need to create a more complex testcase.

      The standalone in IE though I think is still pretty strange - The simple html testcase, if I click on the yes button, then press the right arrow, it would go to the No button and show the selection on the no button whereas the simple testcase I provided would indeed go to the No button when I press the right arrow BUT the focus is still on the Yes label.

      I am using IE9, with Windows 7.

      Comment


        #4
        More issues found. Please see the html file with the standalone sample.
        SC version: SC_SNAPSHOT-2011-06-17/PowerEdition Development Only (2011-06-17)

        Note, in the attached sample the top layout has scrolling on purpose, so it is included in tabbing.

        IE 8, Windows 7:
        1) Problem with "Radiogroup" field:
        - When tabbing from "Snip To" select field to radiobutton group and nothing is selected, it sets focus to the "Radiogroup" label instead of first radio button choice label.
        - Try to use left and right keys: when it's supposed to highlight "I want the next available date" label, it actually highlights the "Radiobutton" label.
        (Seems like it messes up first choice label and the field label).
        - Select the first choice and try tabbing forward and backward: still highlights the field label instead of choice label.

        Chrome (13.0.782.112 m), Windows 7:
        1) When tabbing from address bar, when it's focus on the top layout (page), there is no indication of focus/highlighting (as dotted border in IE around the page).
        This is very confusing.

        2) "In Stock" checkbox: not highlighted at all when focused: no yellow or at least dotted border around the checkbox or label.
        (Note, when using SmartClient skin, it shows yellow border inside the checkbox, but in the Enterprise skin there is no indication at all).

        3) Our clients claims that select field is not highlighted properly:
        they want same Chrome style for the select field (should be yellow border, not dotted border). Is it achievable?
        (I know it's a div with styles, not a real select element, I guess this is the reason?).

        4) After "Text 3" field, pressing TAB is setting focus to labels of the first radiogroups: "Yes" -> "No", then to the second radiogroup:
        "I want the next available date" -> "I want a specific date"
        and only then goes back to the browser address bar.

        Firefox 5, Windows 7:
        1) When tabbing from address bar: there is one extra TAB between the page (top layout) and the first text field (comparing to other browsers).

        So, in IE: when the page is focused, you can see the dotted border and use up/down keys to scroll.
        In Chrome: when the page is focused, you CANNOT see the dotted border but at least you can use up/down keys to scroll.
        In FF: first you can the page is focused (dotted border), but keys are not working. Press TAB again: now you cannot see what is focused, but up/down keys are working for scrolling.

        2) Radiogroup field: not highlighted at all when focused. (No highlighting in the SmartClient skin either).
        In addition, it seems that it includes all choices in tab order (unlike IE and Chrome), which is double confusing, cz you cannot see what is focused.

        Safari 5, Windows 7:
        - Exactly same issues as in Chrome 1)-4), but only focused border should be blue for dropdowns. :)
        Attached Files

        Comment


          #5
          Tested with version: SC_SNAPSHOT-2011-08-16/PowerEdition Development Only (2011-08-16)

          Same issues.

          Comment


            #6
            We're investigating - we'll let you know when we have some information.

            Comment


              #7
              Note for the

              Firefox 5
              1) When tabbing from address bar: there is one extra TAB between the page (top layout) and the first text field (comparing to other browsers).

              Sometimes when page is focused and the border is shown, keys are actually working. To reproduce the case when it's not working:

              Set focus in the address bar, refresh the page (F5), start tabbing from the browser address bar -> when page is focused (with border) keys are not working.
              If then go one cycle of tabbing and come back to the page again -> keys are working (but still there is 1 extra TAB before text field).

              Comment


                #8
                Is there any progress on this one?

                Please let us know if any of this issues can be fixed by modifying element properties or styles?

                (For example to fix "Radiogroup" field issue we removed "right" label orientation and separated label and field).

                Comment


                  #9
                  We've resolved a number of these in the framework. A couple we're still looking at and a couple are likely wont-fix for now.

                  The fixes we have applied to the SmartClient 8.1.x branch so will show up in nightly builds under that branch going forward. We'll let you know when we resolve the remaining issues that are not called out as "wont-fix" below.

                  Here's a specific breakdown:

                  IE 8, Windows 7:
                  1) Problem with "Radiogroup" field:
                  - When tabbing from "Snip To" select field to radiobutton group and nothing is selected, it sets focus to the "Radiogroup" label instead of first radio button choice label.
                  - Try to use left and right keys: when it's supposed to highlight "I want the next available date" label, it actually highlights the "Radiobutton" label.
                  (Seems like it messes up first choice label and the field label).
                  - Select the first choice and try tabbing forward and backward: still highlights the field label instead of choice label.
                  Fixed

                  Chrome (13.0.782.112 m), Windows 7:
                  1) When tabbing from address bar, when it's focus on the top layout (page), there is no indication of focus/highlighting (as dotted border in IE around the page).
                  This is very confusing.
                  If this is coming up for specific cases in your application one possible workaround is to call 'setStyleName' (or setBorder, perhaps) to modify the appearance of a component in response to focus and blur events.
                  We're looking at whether this can be resolved in the framework but it's looking difficult to resolve at the framework level and likely a wont-fix for now.

                  2) "In Stock" checkbox: not highlighted at all when focused: no yellow or at least dotted border around the checkbox or label.
                  (Note, when using SmartClient skin, it shows yellow border inside the checkbox, but in the Enterprise skin there is no indication at all).

                  3) Our clients claims that select field is not highlighted properly:
                  they want same Chrome style for the select field (should be yellow border, not dotted border). Is it achievable?
                  (I know it's a div with styles, not a real select element, I guess this is the reason?).

                  4) After "Text 3" field, pressing TAB is setting focus to labels of the first radiogroups: "Yes" -> "No", then to the second radiogroup:
                  "I want the next available date" -> "I want a specific date"
                  and only then goes back to the browser address bar.
                  These are now fixed

                  Firefox 5, Windows 7:
                  1) When tabbing from address bar: there is one extra TAB between the page (top layout) and the first text field (comparing to other browsers).
                  This appears to be a native browser behavior and we're not currently seeing a way to avoid it. It appears that the browser treats the window body as a whole as a tab-stop before the first focusable element within the body (you can reproduce this in a simple HTML test case with no SmartClient elements). This is probably wont-fix.

                  2) Radiogroup field: not highlighted at all when focused. (No highlighting in the SmartClient skin either).
                  In addition, it seems that it includes all choices in tab order (unlike IE and Chrome), which is double confusing, cz you cannot see what is focused.
                  We're still investigating what's happening with the lack of any visual feedback (highlight outline or styling) in FF5 / Windows 7.
                  The behavior of including every choice in a radiogroup in the page's tab order (if nothing is selected from the group) is a native behavior that we don't intend to suppress, but this should not be confusing once we get focus highlighting working here.

                  Safari 5, Windows 7:
                  - Exactly same issues as in Chrome 1)-4), but only focused border should be blue for dropdowns. :)
                  Fixed.

                  Regards
                  Isomorphic Software

                  Comment


                    #10
                    Thank you so much for resolving those issues.

                    Firefox 5, Windows 7:
                    1) When tabbing from address bar: there is one extra TAB between the page (top layout) and the first text field (comparing to other browsers).
                    This one seems to be not a big issue, because we always set focus on the first editable field when displaying a form, so the user does not usually start tabbing from the address bar.

                    Still radiobuttons field in FF (not highlighting) seems to be a big problem for them. Let us know if you find a workaround for this.

                    Comment


                      #11
                      We're having some difficulty reproducing the issue where Firefox focus indicators don't show for radio-items in FF 5 / Windows 7. In our testing we're seeing a standard native dotted focus outline show up around the radio item that has focus.

                      Can you confirm the following:

                      - are you seeing this behavior on the TABBING.html file attached to this message, with no changes?
                      - exact version of Firefox from the "About..." dialog
                      - exact Windows 7 version you're using (including any service pack info, etc)

                      Thanks

                      Comment


                        #12
                        We've managed to reproduce the issue with no focus-indicator showing for Radio-Buttons on forms in Firefox 5 running on Windows 7.

                        It looks like fundamentally it's a native browser bug (you can see it on some other public websites - for example http://www.google.com/advanced_image_search?hl=en)

                        We're looking into whether we can come up with a workaround for this issue in the framework.

                        Comment


                          #13
                          Just want to confirm, any fixes I should be getting from http://www.smartclient.com/builds/SmartClient/8.x/PowerEdition/ right? We've noticed that tabbing is fixed on 08-25 but not in 09-07

                          Comment


                            #14
                            The fix hasnt been removed between those dates. Most likely you actually downloaded 8.1.x before, which is what you should probably continue to download as 8.x has all kinds of feature development going on.

                            Comment


                              #15
                              We have just tested tabbing and found a couple of more issues:

                              1) for Safari: issues are not fixed at all (different versions of Safari?)
                              (Tested with Safari 5.0.5 (7533.21.1), Windows 7)

                              Shortly:
                              - checkbox is not highlighted
                              - dropdowns are highlighted with dotted border instead of blue border as text fields;
                              - after tabbing reaches the end of the page, it comes back to radio buttons labels.

                              Other issues in Chrome (13.0.782.220, Windows 7) & Safari:

                              2) Section header is not highlighted (not even with a dotted border).

                              3) Buttons and MenuButtons are not highlighted if showFocused=false.
                              (In FF and IE we can see dotted border around buttons).

                              Code:
                              <HTML><HEAD>
                              	<SCRIPT>var isomorphicDir="../../isomorphic/";</SCRIPT>
                                  <SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
                                  <SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
                                  <SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
                                  <SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
                                  <SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
                                  <SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
                              	<SCRIPT SRC=../../isomorphic/skins/Enterprise/load_skin.js></SCRIPT>
                              </HEAD><BODY BGCOLOR='papayawhip' MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
                              
                              
                              <!--------------------------
                                Example code starts here
                              ---------------------------->
                              
                              <SCRIPT>
                              
                              isc.VLayout.create({
                                  height: "100%",
                                  width: "100%",
                                  overflow: "auto",
                                  members: [
                              
                              isc.HLayout.create({
                                  //height: 1000,
                                  //width: 500,
                              	overflow: "visible",
                                  members: [
                              
                              	isc.DynamicForm.create({
                              		fields: [
                              			{name:"textFld", title:"Text", type:"text"},
                              			{name:"pickListDate", title:"PickList Date", type:"date"},
                              			{name:"directInputDate", title:"Direct Input Date", type:"date", useTextField:true},
                              			{name:"chBox", title:"In Stock", type:"checkbox"},
                              			{name: "willAttend",
                              			 type: "radioGroup",
                              			 colSpan: "*",
                              			 required: true,
                              			 vertical: false,
                              			 valueMap: ["Yes", "No"],
                              			 redrawOnChange:true,
                              			 title: "Simple"
                              			},
                              			{name:"textFld2", title:"Text 2", type:"text"},
                              			{name: "shipTo", title: "Ship to", type: "select",
                              			 valueMap: {
                              				"US" : "<b>United States</b>",
                              				"CH" : "China",
                              				"JA" : "<b>Japan</b>",
                              				"IN" : "India",
                              				"GM" : "Germany",
                              				"FR" : "France",
                              				"IT" : "Italy",
                              				"RS" : "Russia",
                              				"BR" : "<b>Brazil</b>",
                              				"CA" : "Canada",
                              				"MX" : "Mexico",
                              				"SP" : "Spain"
                              			 }
                              			},
                              			{name: "rg2",
                              			 type: "radioGroup",
                              			 colSpan: "*",
                              			 required: true,
                              			 vertical: true,
                              			 valueMap:{"N":"I want the next available date","S":"I want a specific date"},
                              			 redrawOnChange:true,
                              			 title: "Radiogroup",
                              			 titleOrientation:"right",
                              			 isBoolean:"false",
                              			 wrap:false,
                              			 defaultValue:true
                              			},
                              			{name:"textFld2", title:"Text 3", type:"text"},
                              		]
                              	}),
                              
                              	isc.SectionStack.create({
                              		ID: "sectionStack",
                              		visibilityMode: "mutex",
                              		width: 200, height: 150,
                              		canTabToHeader: true,
                              		sections: [
                              			{title: "Section Header", expanded: true, canCollapse: true, showHeader: true, 
                              			canTabToHeader: true,
                              			items: [
                              				isc.VLayout.create({
                              					members: [
                              					isc.DynamicForm.create({
                              						fields: [
                              							{name:"textFldForm2", title:"Text", type:"text"}
                              						]
                              					})
                              					]
                              				})
                              			]}
                              		]
                              	}),
                              
                              	isc.VLayout.create({
                              		members: [
                              			isc.Button.create({
                              				ID: "button",
                              				title: "BUTTON",
                              				showFocused: false
                              			})
                              		]
                              	}),
                              
                              	isc.DynamicForm.create({
                              		fields: [
                              			{name:"textFldForm2", title:"Text", type:"text"}
                              		]
                              	})
                              
                              ]})
                              ]});
                              
                              </SCRIPT>
                              </BODY>
                              </HTML>
                              4) The other thing I found when was playing with the sample (in Chrome and Safari as well):
                              if you uncomment width and height for the second level HLayout, the tabbing will be broken: it will stop at the section stack and go back to the first field skipping the rest of the page.
                              If remove section stack, tabbing will stop at the button.

                              We have seen this behavior with tables and trees as well but could not reproduce with a standalone sample.

                              Comment

                              Working...
                              X