Changeset 4911


Ignore:
Timestamp:
01/12/10 06:48:12 (4 years ago)
Author:
garry.yao
Message:

Enhance ARIA support for dialogs in following aspects:

  1. ARIA-enable tabview within dialog.
  2. Adding 'aria-required' to mandatory fields.
Location:
CKEditor/branches/features/aria/_source/plugins
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • CKEditor/branches/features/aria/_source/plugins/dialog/plugin.js

    r4909 r4911  
    146146                        }); 
    147147 
     148                this.parts.tabs.setAttribute( 'role', 'tablist' ); 
    148149                // Call the CKEDITOR.event constructor to initialize this instance. 
    149150                CKEDITOR.event.call( this ); 
     
    811812                        // Create the HTML for the tab and the content block. 
    812813                        var page = CKEDITOR.dom.element.createFromHtml( pageHtml.join( '' ) ); 
    813                         var tab = CKEDITOR.dom.element.createFromHtml( [ 
     814                        page.setAttribute( 'role', 'tabpanel' ); 
     815 
     816                        var tabId = contents.id + '_' + CKEDITOR.tools.getNextNumber(), 
     817                                 tab = CKEDITOR.dom.element.createFromHtml( [ 
    814818                                        '<a class="cke_dialog_tab"', 
    815819                                                ( this._.pageCount > 0 ? ' cke_last' : 'cke_first' ), 
    816820                                                titleHtml, 
    817821                                                ( !!contents.hidden ? ' style="display:none"' : '' ), 
    818                                                 ' id="', contents.id + '_', CKEDITOR.tools.getNextNumber(), '"' + 
     822                                                ' id="', tabId, '"' + 
    819823                                                ' href="javascript:void(0)"', 
    820                                                 ' hidefocus="true">', 
     824                                                ' hidefocus="true"' + 
     825                                                ' role="tab">', 
    821826                                                        contents.label, 
    822827                                        '</a>' 
    823828                                ].join( '' ) ); 
     829                         
     830                        page.setAttribute( 'aria-labelledby', tabId ); 
    824831 
    825832                        // If only a single page exist, a different style is used in the central pane. 
     
    881888                                        page.hide(); 
    882889                                } 
     890                                page.setAttribute( 'aria-hidden', i != id ); 
    883891                        } 
    884892 
  • CKEditor/branches/features/aria/_source/plugins/dialogui/plugin.js

    r4909 r4911  
    1414                this._ || ( this._ = {} ); 
    1515                this._['default'] = this._.initValue = elementDefinition['default'] || ''; 
     16                this._.required = elementDefinition[ 'required' ] || false; 
    1617                var args = [ this._ ]; 
    1718                for ( var i = 1 ; i < arguments.length ; i++ ) 
     
    245246 
    246247                                        attributes[ 'aria-labelledby' ] = this._.labelId; 
     248                                        this._.required && ( attributes[ 'aria-required' ] = this._.required ); 
    247249                                        for ( var i in attributes ) 
    248250                                                html.push( i + '="' + attributes[i] + '" ' ); 
     
    293295                                var innerHTML = function() 
    294296                                { 
     297                                        attributes[ 'aria-labelledby' ] = this._.labelId; 
     298                                        this._.required && ( attributes[ 'aria-required' ] = this._.required ); 
    295299                                        var html = [ '<div class="cke_dialog_ui_input_textarea"><textarea class="cke_dialog_ui_input_textarea" id="', domId, '" ' ]; 
    296300                                        for ( var i in attributes ) 
     
    397401                                                        title = item[2] !== undefined ? item[2] : item[0], 
    398402                                                        value = item[1] !== undefined ? item[1] : item[0], 
     403                                                        inputId = CKEDITOR.tools.getNextNumber() + '_radio_input', 
     404                                                        labelId = inputId + '_label', 
    399405                                                        inputDefinition = CKEDITOR.tools.extend( {}, elementDefinition, 
    400406                                                                        { 
    401                                                                                 id : CKEDITOR.tools.getNextNumber() + '_radio_input', 
     407                                                                                id : inputId, 
    402408                                                                                title : null, 
    403409                                                                                type : null 
     
    405411                                                        labelDefinition = CKEDITOR.tools.extend( {}, inputDefinition, 
    406412                                                                        { 
    407                                                                                 id : null, 
    408413                                                                                title : title 
    409414                                                                        }, true ), 
     
    413418                                                                'class' : 'cke_dialog_ui_radio_input', 
    414419                                                                name : commonName, 
    415                                                                 value : value 
     420                                                                value : value, 
     421                                                                'aria-labelledby' : labelId 
    416422                                                        }, 
    417423                                                        inputHtml = []; 
     
    422428                                                children.push( new CKEDITOR.ui.dialog.uiElement( dialog, inputDefinition, inputHtml, 'input', null, inputAttributes ) ); 
    423429                                                inputHtml.push( ' ' ); 
    424                                                 new CKEDITOR.ui.dialog.uiElement( dialog, labelDefinition, inputHtml, 'label', null, { 'for' : inputAttributes.id }, 
     430                                                new CKEDITOR.ui.dialog.uiElement( dialog, labelDefinition, inputHtml, 'label', null, { id : labelId, 'for' : inputAttributes.id }, 
    425431                                                           item[0] ); 
    426432                                                inputHtmlList.push( inputHtml.join( '' ) ); 
  • CKEditor/branches/features/aria/_source/plugins/flash/dialogs/flash.js

    r4858 r4911  
    314314                                                                                        type : 'text', 
    315315                                                                                        label : '', 
     316                                                                                        required : true, 
    316317                                                                                        validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.flash.validateSrc ), 
    317318                                                                                        setup : loadValue, 
  • CKEditor/branches/features/aria/_source/plugins/image/dialogs/image.js

    r4869 r4911  
    474474                                                                                        type : 'text', 
    475475                                                                                        label : '', 
     476                                                                                        required: true, 
    476477                                                                                        onChange : function() 
    477478                                                                                        { 
  • CKEditor/branches/features/aria/_source/plugins/link/dialogs/link.js

    r4858 r4911  
    426426                                                                                id : 'url', 
    427427                                                                                label : editor.lang.common.url, 
     428                                                                                required: true, 
    428429                                                                                onLoad : function () 
    429430                                                                                { 
Note: See TracChangeset for help on using the changeset viewer.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy