Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    How to exclude radio group items from the tab order?

    We have a requirement to exclude a radio group from the tab order.

    I tried to set "tabIndex" of the RadioGroupItem to -1.
    Seems like it's working fine with checkboxes and buttons, but not with radio group. It excludes it from the tab order WITHIN the form, but comes back to the item after all items on the page.

    In this sample, it focuses on the radio group items after the Validate button:

    Code:
    isc.DynamicForm.create({
    ID: "boundForm",
    dataSource: "users",
    useAllDataSourceFields: true,
    fields: [
        {type:"header", defaultValue:"Registration Form"},
        {name: "password"},
        {name: "password2", title: "Password Again", type: "password", required: true, 
         length: 20, validators: [{
             type: "matchesField",
             otherField: "password",
             errorMessage: "Passwords do not match"
         }]
        },
        {name: "acceptTerms", title: "I accept the terms of use.", type: "radioGroup", required: true, width: "150", isBoolean:true, valueMap:{"true":"True", "false": "False"}, tabIndex:-1},
        {name: "validateBtn", title: "Validate", type: "button", click: "form.validate()"}
    ],
    values : {
        firstName: "Bob",
        email: "bob@.com",
        password: "sekrit",
        password2: "fatfinger"
    }
});
    I also tried setting other properties:
    canFocus=false,
    itemProperties: {tabIndex:-1, canFocus:false}

    but nothing helps.
    Last edited by ESherbakova; 25 May 2011, 08:09.
    Tags: None
    #2
    Any suggestions?
    I see that DOM input element for the radio button actually has tabIndex=-1 attribute. Is it browser issue?

    Comment

      #3
      This has been assigned and is being looked into, we'll have answers soon.

      Comment

        #4
        Unfortunately we're running into native limitations here. Only Firefox will respect taking radio items out of the tab order. IE, Chrome and Safari are all broken here.

        A workaround is to set the item to disabled instead. This works reliably and makes more sense from an accessibility perspective.

        Code:
        <html>
<head>
<script type="text/javascript">
</script>
</head>
<body>

<input type="text" tabindex="1">
<input type="text">
<input type="text" tabindex="2">

<input type="radio" name="hello" value="true" tabindex="-1">
<input type="radio" name="hello" value="false" tabindex="-1">

<input type="submit" tabindex="-1">
</body>
</html>

        Comment

          #5
          Yeah, I guessed so...

          Sorry, did not get what is the workaround you suggested...
          We need to skip enabled (editable) radio groups, so no workaround for this, right?

          Comment

            #6
            No, no workaround for that.. but unless unusual circumstances apply, that would be an accessibility violation so you wouldn't want to do it anyway.

            Comment

              #7
              Ok, thanks.

              Comment

              Previous template Next
              Working...
              X