Ticket #2367: honor_tabindex_textbox.patch

File honor_tabindex_textbox.patch, 12.8 kB (added by ghenry@…, 23 months ago)

patch for TextBox? and ValidationTextBox?, plus tests.

  • src/widget/templates/Textbox.html 

    diff -urN dojo-0.4.1-kitchen_sink/src/widget/templates/Textbox.html dojo/src/widget/templates/Textbox.html
    old new  
    11<span style='float:${this.htmlfloat};'> 
    22        <input dojoAttachPoint='textbox' dojoAttachEvent='onblur;onfocus' 
    33                id='${this.widgetId}' name='${this.name}' 
    4                 class='${this.className}' type='${this.type}' > 
     4                class='${this.className}' type='${this.type}' tabindex='${this.tabindex}'> 
    55</span> 

  • src/widget/templates/ValidationTextbox.html 

    diff -urN dojo-0.4.1-kitchen_sink/src/widget/templates/ValidationTextbox.html dojo/src/widget/templates/ValidationTextbox.html
    old new  
    11<span style='float:${this.htmlfloat};'> 
    22        <input dojoAttachPoint='textbox' type='${this.type}' dojoAttachEvent='onblur;onfocus;onkeyup' 
    33                id='${this.widgetId}' name='${this.name}' size='${this.size}' maxlength='${this.maxlength}' 
    4                 class='${this.className}' style=''> 
     4                class='${this.className}' style='' tabindex='${this.tabindex}'> 
    55        <span dojoAttachPoint='invalidSpan' class='${this.invalidClass}'>${this.messages.invalidMessage}</span> 
    66        <span dojoAttachPoint='missingSpan' class='${this.missingClass}'>${this.messages.missingMessage}</span> 
    77        <span dojoAttachPoint='rangeSpan' class='${this.rangeClass}'>${this.messages.rangeMessage}</span> 

  • src/widget/Textbox.js 

    diff -urN dojo-0.4.1-kitchen_sink/src/widget/Textbox.js dojo/src/widget/Textbox.js
    old new  
    4545                //              Basic input tag type declaration. 
    4646                type: "", 
    4747 
     48                // tabindex: Integer 
     49                //              Tab order. 
     50                tabindex: "", 
     51 
    4852                //      trim: Boolean 
    4953                //              Removes leading and trailing whitespace if true.  Default is false. 
    5054                trim: false, 

  • src/widget/ValidationTextbox.js 

    diff -urN dojo-0.4.1-kitchen_sink/src/widget/ValidationTextbox.js dojo/src/widget/ValidationTextbox.js
    old new  
    4040                // size: String 
    4141                //              Basic input tag size declaration. 
    4242                size: "", 
     43                // tabindex: Integer 
     44                //              Tab order. 
     45                tabindex: "", 
    4346                // maxlength: String 
    4447                //              Basic input tag maxlength declaration.   
    4548                maxlength: "", 

  • tests/widget/test_validate.html 

    diff -urN dojo-0.4.1-kitchen_sink/tests/widget/test_validate.html dojo/tests/widget/test_validate.html
    old new  
    9797                                <span class="noticeMessage"> Textbox class, Attributes: {trim: true, ucFirst: true, class: 'medium'}, First letter of each word is upper case.</span> 
    9898                        </div> 
    9999                        <div class="formAnswer"> 
    100                                 <input id="q1" type="text" name="firstname" value="testing testing" class="medium" 
     100                                <input id="q1" type="text" name="firstname" value="testing testing" class="medium" tabindex="1" 
    101101                                        dojoType="Textbox" 
    102102                                        trim="true"  
    103103                                        ucfirst="true" /> 
    … …  
    108108                                <span class="noticeMessage"> Textbox class, Attributes: {trim: true, uppercase: true, class: 'medium'}, all letters converted to upper case. </span> 
    109109                        </div> 
    110110                        <div class="formAnswer"> 
    111                                 <input type="text" name="lastname" value="testing testing" class="medium" 
     111                                <input type="text" name="lastname" value="testing testing" class="medium" tabindex="2" 
    112112                                        dojoType="Textbox" 
    113113                                        trim="true"  
    114114                                        uppercase="true" /> 
    … …  
    119119                                <span class="noticeMessage"> Textbox class, Attributes: {trim: true, digit: true, class: 'small'}, all but digits extracted. </span> 
    120120                        </div> 
    121121                        <div class="formAnswer"> 
    122                                 <input type="text" name="age" value="38" class="small" 
     122                                <input type="text" name="age" value="38" class="small" tabindex="3" 
    123123                                        dojoType="Textbox" 
    124124                                        trim="true"  
    125125                                        digit="true" /> 
    … …  
    131131                                        Attributes: {lowercase: true, required: true}. Displays message if field is missing. </span> 
    132132                        </div> 
    133133                        <div class="formAnswer"> 
    134                                 <input type="text" name="occupation" class="medium" 
     134                                <input type="text" name="occupation" class="medium" tabindex="4" 
    135135                                        dojoType="ValidationTextbox" 
    136136                                        lowercase="true"  
    137137                                        required="true"  
    … …  
    144144                                        Attributes: {trim: true, required: true, signed: true classPrefix: "myValidateColor"}, Enter feet above sea level with a sign. (note: these colors are drastically different due to demonstrating the effects of classPrefix.)</span> 
    145145                        </div> 
    146146                        <div class="formAnswer"> 
    147                                 <input type="text" name="elevation" class="medium" value="300" 
     147                                <input type="text" name="elevation" class="medium" value="300" tabindex="5" 
    148148                                        dojoType="IntegerTextbox" 
    149149                                        trim="true" 
    150150                                        classPrefix="myValidateColor" 
    … …  
    173173                        required: "true", 
    174174                        signed: "false", 
    175175                        separator: ",", 
     176                        tabindex: "6", 
    176177                        invalidMessage: "Invalid population.  Be sure to use commas." 
    177178                }; 
    178179                var refNode = document.getElementById("attach-here"); 
    … …  
    187188                                        Attributes: {trim: true, required: true}. Enter any sort of real number.</span> 
    188189                        </div> 
    189190                        <div class="formAnswer"> 
    190                                 <input type="text" name="real1" class="medium" value="+0.1234" 
     191                                <input type="text" name="real1" class="medium" value="+0.1234" tabindex="7" 
    191192                                        dojoType="RealNumberTextbox" 
    192193                                        trim="true"  
    193194                                        required="true"  
    … …  
    200201                                        Attributes: {exponent: true}. Enter a real number in exponential notation.</span> 
    201202                        </div> 
    202203                        <div class="formAnswer"> 
    203                                 <input type="text" name="real2" class="medium" value="+0.12" 
     204                                <input type="text" name="real2" class="medium" value="+0.12" tabindex="8" 
    204205                                        dojoType="RealNumberTextbox" 
    205206                                        trim="true"  
    206207                                        required="true"  
    … …  
    214215                                        Attributes: {fractional: true}. Enter dollars and cents.</span> 
    215216                        </div> 
    216217                        <div class="formAnswer"> 
    217                                 <input type="text" name="income" class="medium" value="$54,775.53" 
     218                                <input type="text" name="income" class="medium" value="$54,775.53" tabindex="9" 
    218219                                        dojoType="CurrencyTextbox" 
    219220                                        trim="true"  
    220221                                        required="true"  
    … …  
    228229                                        Attributes: {allowIPv6: false, allowHybrid: false}. Also Dotted Hex works, 0x18.0x11.0x9b.0x28</span> 
    229230                        </div> 
    230231                        <div class="formAnswer"> 
    231                                 <input type="text" name="ipv4" class="medium" value="24.17.155.40" 
     232                                <input type="text" name="ipv4" class="medium" value="24.17.155.40" tabindex="10" 
    232233                                        dojoType="IpAddressTextbox" 
    233234                                        trim="true"  
    234235                                        required="true"  
    … …  
    244245                                        Also hybrid works, x:x:x:x:x:x:d.d.d.d</span> 
    245246                        </div> 
    246247                        <div class="formAnswer"> 
    247                                 <input type="text" name="ipv6" class="long" value="0000:0000:0000:0000:0000:0000:0000:0000" 
     248                                <input type="text" name="ipv6" class="long" value="0000:0000:0000:0000:0000:0000:0000:0000" tabindex="11" 
    248249                                        dojoType="IpAddressTextbox" 
    249250                                        trim="true"  
    250251                                        uppercase = "true"  
    … …  
    261262                                        Attributes: {required: true, trim: true, scheme: true}. </span> 
    262263                        </div> 
    263264                        <div class="formAnswer"> 
    264                                 <input type="text" name="url" class="long" value="http://www.xyz.com/a/b/c?x=2#p3" 
     265                                <input type="text" name="url" class="long" value="http://www.xyz.com/a/b/c?x=2#p3" tabindex="12" 
    265266                                        dojoType="UrlTextbox" 
    266267                                        trim="true"  
    267268                                        required="true"  
    … …  
    275276                                        Attributes: {required: true, trim: true}. </span> 
    276277                        </div> 
    277278                        <div class="formAnswer"> 
    278                                 <input type="text" name="email" class="long" value="fred&barney@stonehenge.com" 
     279                                <input type="text" name="email" class="long" value="fred&barney@stonehenge.com" tabindex="13" 
    279280                                        dojoType="EmailTextbox" 
    280281                                        trim="true"  
    281282                                        required="true"  
    … …  
    288289                                        Attributes: {required: true, trim: true}. </span> 
    289290                        </div> 
    290291                        <div class="formAnswer"> 
    291                                 <input type="text" name="email" class="long" value="a@xyz.com; b@xyz.com; c@xyz.com; " 
     292                                <input type="text" name="email" class="long" value="a@xyz.com; b@xyz.com; c@xyz.com; " tabindex="14" 
    292293                                        dojoType="EmailListTextbox" 
    293294                                        trim="true"  
    294295                                        required="true"  
    … …  
    301302                                        Attributes: {lang: "en-us", required: true, trim: true}. Works for leap years</span> 
    302303                        </div> 
    303304                        <div class="formAnswer"> 
    304                                 <input type="text" name="date1" class="medium" value="12/30/05" lang="en-us" 
     305                                <input type="text" name="date1" class="medium" value="12/30/05" lang="en-us" tabindex="15" 
    305306                                        dojoType="DateTextbox" 
    306307                                        trim="true"  
    307308                                        required="true"  
    … …  
    314315                                        Attributes: {formatLength:"medium", lang: "de-de", required: true, trim: true}. Works for leap years</span> 
    315316                        </div> 
    316317                        <div class="formAnswer"> 
    317                                 <input type="text" name="date2" class="medium" value="30.12.2005" lang="de-de" formatLength="medium" 
     318                                <input type="text" name="date2" class="medium" value="30.12.2005" lang="de-de" formatLength="medium" tabindex="16" 
    318319                                        dojoType="DateTextbox" 
    319320                                        trim="true"  
    320321                                        required="true"  
    … …  
    328329                                        Attributes: {format:"YYYY.MM.DD", required: true, trim: true}. Works for leap years</span> 
    329330                        </div> 
    330331                        <div class="formAnswer"> 
    331                                 <input type="text" name="date2" class="medium" value="2005.12.30" 
     332                                <input type="text" name="date2" class="medium" value="2005.12.30" tabindex="17" 
    332333                                        dojoType="DateTextbox" 
    333334                                        trim="true"  
    334335                                        required="true"  
    … …  
    342343                                        Attributes: {formatLength: "medium", required: true, trim: true}</span> 
    343344                        </div> 
    344345                        <div class="formAnswer"> 
    345                                 <input type="text" name="time1" class="medium" value="5:45:00 pm" formatLength="medium" 
     346                                <input type="text" name="time1" class="medium" value="5:45:00 pm" formatLength="medium" tabindex="18" 
    346347                                        dojoType="TimeTextbox" 
    347348                                        trim="true"  
    348349                                        required="true"  
    … …  
    355356                                        Attributes: {displayFormat:"HH:mm:ss", required: true, trim: true}</span> 
    356357                        </div> 
    357358                        <div class="formAnswer"> 
    358                                 <input type="text" name="time2" class="medium" value="17:45:00" 
     359                                <input type="text" name="time2" class="medium" value="17:45:00" tabindex="19" 
    359360                                        dojoType="TimeTextbox" 
    360361                                        trim="true"  
    361362                                        required="true"  
    … …  
    369370                                        Attributes: {format:"HH:mm:ss", required: true, trim: true}</span> 
    370371                        </div> 
    371372                        <div class="formAnswer"> 
    372                                 <input type="text" name="time2" class="medium" value="17:45:00" 
     373                                <input type="text" name="time2" class="medium" value="17:45:00" tabindex="20" 
    373374                                        dojoType="TimeTextbox" 
    374375                                        trim="true"  
    375376                                        required="true"  
    … …  
    383384                                        Attributes: {required: true, trim: true, uppercase: true}</span> 
    384385                        </div> 
    385386                        <div class="formAnswer"> 
    386                                 <input type="text" name="state" class="small" value="CA" 
     387                                <input type="text" name="state" class="small" value="CA" tabindex="21" 
    387388                                        dojoType="UsStateTextbox" 
    388389                                        allowTerritories = "false" 
    389390                                        trim="true"  
    … …  
    398399                                        Attributes: {required: true, trim: true} Five digit Zip code or 5 + 4.</span> 
    399400                        </div> 
    400401                        <div class="formAnswer"> 
    401                                 <input type="text" name="zip" class="medium" value="98225-1649" 
     402                                <input type="text" name="zip" class="medium" value="98225-1649" tabindex="22" 
    402403                                        dojoType="UsZipTextbox" 
    403404                                        trim="true"  
    404405                                        required="true"  
    … …  
    411412                                        Attributes: {required: true, trim: true} </span> 
    412413                        </div> 
    413414                        <div class="formAnswer"> 
    414                                 <input type="text" name="ssn" class="medium" value="123-45-6789" 
     415                                <input type="text" name="ssn" class="medium" value="123-45-6789" tabindex="23" 
    415416                                        dojoType="UsSocialSecurityNumberTextbox" 
    416417                                        trim="true"  
    417418                                        required="true"  
    … …  
    424425                                        Attributes: {required: true, trim: true} </span> 
    425426                        </div> 
    426427                        <div class="formAnswer"> 
    427                                 <input type="text" name="phone" class="medium" value="(123) 456-7890" 
     428                                <input type="text" name="phone" class="medium" value="(123) 456-7890" tabindex="24" 
    428429                                        dojoType="UsPhoneNumberTextbox" 
    429430                                        trim="true"  
    430431                                        required="true"  
    … …  
    437438                                        Attributes: {required: true, trim: true} </span> 
    438439                        </div> 
    439440                        <div class="formAnswer"> 
    440                                 <input type="text" name="phone" class="medium" value="someTestString" 
     441                                <input type="text" name="phone" class="medium" value="someTestString" tabindex="25" 
    441442                                        dojoType="RegexpTextbox" 
    442443                    regexp="^[\w]+$" 
    443444                                        required="true"  
    … …  
    449450                                <span class="noticeMessage">(just a test that type attribute is obeyed) </span> 
    450451                        </div> 
    451452                        <div class="formAnswer"> 
    452                                 <input type="password" name="password" class="medium" 
     453                                <input type="password" name="password" class="medium" tabindex="26" 
    453454                                        dojoType="Textbox" /> 
    454455                        </div> 
    455456<script> 
    … …  
    465466        } 
    466467</script> 
    467468 
    468                         <div><button name="button" onclick="displayData(); return false;">view data</button></div> 
     469                        <div><button name="button" onclick="displayData(); return false;" tabindex="27">view data</button></div> 
    469470 
    470471                </form> 
    471472        </body>