Here is an alternative way of implementing widgets which will work
properly in high contrast mode. This approach creates a new widget in
dojo.widget.a11y that contains the accessibility modifications. This class
is derived from the original widget class. The drawback of this approach
is that if people make changes to the default widget they may not also
make any necessary changes to the derived a11y class. If the code is
within the widget class the accessibility changes may be more difficult to
ignore. The advantage of derived class approach is that the code is
cleaner and less burdened with if (makeAccessible ) statements.

The technique in checkbox is to add an additional template and create an
html input type=checkbox when needed to support high contrast and /or
images off. The technique in TabContainer is to replace the CSS
background-image used for the panel close icon with an actual image. I
also created a TabContainerA11y.css that duplicates the original css but
removes the background-images. This isn't entirely necessary because if
the browser is truly in high contrast or images off mode, those background
images won't be visible. So, we may want to rethink adding an additional
css file.

This patch also contains the code that will check for high contrast mode
and images turned off in the browser. If the browser is in high contrast
or image off mode, the a11y version of widgets (if available) will be
loaded. Currently the check is performed in
widget.Manger.getImplementationNames(). As we discussed on the
accessibility call on August 10, this check should be moved elsewhere (I
need some help finding the correct location) . We also discussed that the
default will be to perform the check but we will provide a mechanism to
turn off accessibility checking. And, the a11y file will be moved from
src.widget.a11y.js to src.a11y.js.

In addition, revision 5228 of ContentPane.js breaks keyboard navigation in
IE. It took me awhile to track that down (I just assumed it was something
I had done :) so I haven't been able to track down the actual problem.

So, obviously this isn't ready to check in but I wanted to share it with
the group to get feed back.



Also note that I am on vacation for the next 3 days so, if there is
discussion, I might not immediately respond.


Becky Gibson
Web Accessibility Architect

IBM Emerging Internet Technologies
5 Technology Park Drive
Westford, MA 01886
Voice: 978 399-6101; t/l 333-6101
Email: gibsonb@us.ibm.com
-------------- next part --------------
An embedded and charset-unspecified text was scrubbed...
Name: a11ycheck.txt
Url: http://dojotoolkit.org/pipermail/dojo-contributors/attachments/20060810/a31bbf5e/a11ycheck-0001.txt
-------------- next part --------------
A non-text attachment was scrubbed...
Name: a11y.js
Type: application/octet-stream
Size: 1580 bytes
Desc: not available
Url : http://dojotoolkit.org/pipermail/dojo-contributors/attachments/20060810/a31bbf5e/a11y-0001.obj
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://dojotoolkit.org/pipermail/dojo-contributors/attachments/20060810/a31bbf5e/CheckboxA11y-0001.html
-------------- next part --------------
A non-text attachment was scrubbed...
Name: TabContainerA11y.css
Type: application/octet-stream
Size: 3212 bytes
Desc: not available
Url : http://dojotoolkit.org/pipermail/dojo-contributors/attachments/20060810/a31bbf5e/TabContainerA11y-0001.obj

Search Discussions

  • Bill Keese at Aug 10, 2006 at 6:22 pm
    Hi Becky,

    This looks basically good. (I looked at the widget parts.) For
    CheckboxA11y.html, you are missing the hookup to the onClick handler,
    and also tabIndex setting. Also, it seems like the outer span is not
    necessary. Finally, I'm not sure why you rearranged the disabled flag
    handling. I thought the current checked in code was working fine.

    For TabContainer, it looks good I think. I remembered why we _don't_
    use an image for the close button (for the normal version of the
    widget). Besides customizability reasons, it's because the X has two
    versions (mouse over and non-mouse over)

    Becky Gibson wrote:
    Here is an alternative way of implementing widgets which will work
    properly in high contrast mode. This approach creates a new widget in
    dojo.widget.a11y that contains the accessibility modifications. This class
    is derived from the original widget class. The drawback of this approach
    is that if people make changes to the default widget they may not also
    make any necessary changes to the derived a11y class. If the code is
    within the widget class the accessibility changes may be more difficult to
    ignore. The advantage of derived class approach is that the code is
    cleaner and less burdened with if (makeAccessible ) statements.

    The technique in checkbox is to add an additional template and create an
    html input type=checkbox when needed to support high contrast and /or
    images off. The technique in TabContainer is to replace the CSS
    background-image used for the panel close icon with an actual image. I
    also created a TabContainerA11y.css that duplicates the original css but
    removes the background-images. This isn't entirely necessary because if
    the browser is truly in high contrast or images off mode, those background
    images won't be visible. So, we may want to rethink adding an additional
    css file.

    This patch also contains the code that will check for high contrast mode
    and images turned off in the browser. If the browser is in high contrast
    or image off mode, the a11y version of widgets (if available) will be
    loaded. Currently the check is performed in
    widget.Manger.getImplementationNames(). As we discussed on the
    accessibility call on August 10, this check should be moved elsewhere (I
    need some help finding the correct location) . We also discussed that the
    default will be to perform the check but we will provide a mechanism to
    turn off accessibility checking. And, the a11y file will be moved from
    src.widget.a11y.js to src.a11y.js.

    In addition, revision 5228 of ContentPane.js breaks keyboard navigation in
    IE. It took me awhile to track that down (I just assumed it was something
    I had done :) so I haven't been able to track down the actual problem.

    So, obviously this isn't ready to check in but I wanted to share it with
    the group to get feed back.



    Also note that I am on vacation for the next 3 days so, if there is
    discussion, I might not immediately respond.


    Becky Gibson
    Web Accessibility Architect

    IBM Emerging Internet Technologies
    5 Technology Park Drive
    Westford, MA 01886
    Voice: 978 399-6101; t/l 333-6101
    Email: gibsonb@us.ibm.com


    ------------------------------------------------------------------------

    Index: C:/work/eclipse/workspace/dojoTrunk/src/widget/Manager.js
    ===================================================================
    --- C:/work/eclipse/workspace/dojoTrunk/src/widget/Manager.js (revision 5230)
    +++ C:/work/eclipse/workspace/dojoTrunk/src/widget/Manager.js (working copy)
    @@ -181,6 +181,12 @@
    if(!namespace){namespace="dojo";}
    var lowerCaseWidgetName = widgetName.toLowerCase();

    + if (djConfig["makeAccessible"] || dojo.widget.a11y.checkAccessible()){
    + dojo.render.html.prefixes.unshift("a11y");
    + djConfig["makeAccessible"] = true;
    +
    + }
    +
    if(!knownWidgetImplementations[namespace]){knownWidgetImplementations[namespace]={};}

    var impl = knownWidgetImplementations[namespace][lowerCaseWidgetName];
    Index: C:/work/eclipse/workspace/dojoTrunk/src/widget/Checkbox.js
    ===================================================================
    --- C:/work/eclipse/workspace/dojoTrunk/src/widget/Checkbox.js (revision 5230)
    +++ C:/work/eclipse/workspace/dojoTrunk/src/widget/Checkbox.js (working copy)
    @@ -2,39 +2,50 @@

    dojo.require("dojo.widget.*");
    dojo.require("dojo.event");
    -dojo.require("dojo.html.style");

    +
    +
    dojo.widget.defineWidget(
    "dojo.widget.Checkbox",
    dojo.widget.HtmlWidget,
    - {
    + {
    templatePath: dojo.uri.dojoUri('src/widget/templates/Checkbox.html'),
    templateCssPath: dojo.uri.dojoUri('src/widget/templates/Checkbox.css'),

    // parameters
    + disabledStr: "",
    disabled: "enabled",
    name: "",
    - checked: false,
    + checked: "",
    + checkedStr: "",
    tabIndex: "0",
    id: "",
    inputNode: null,

    - postMixInProperties: function(){
    + postMixInProperties: function(){
    // set the variables referenced by the template
    - this.disabledStr = this.disabled=="enabled" ? "" : "disabled";
    +
    + // assume if user entered a disabled attribute with any value - the checkbox should be disabled
    + // convert to boolean NOTE: this doesn't catch disabled with no value
    + this.disabled = this.disabled == "enabled" ? false : true;
    + this.disabledStr = this.disabled==false ? "" : "disabled";
    + // assume is user entered a checked attribue with any value - the checkbox should be checked
    + // convert to boolean NOTE: this doesn't catch checked with no value
    + this.checked = (this.checked == "") ? false : true;
    + if (this.checked == true){
    + this.checkedStr = "checked";
    + }
    },

    - postCreate: function(args, frag){
    + postCreate: function(args, frag){
    // find any associated label and create a labelled-by relationship
    // assumes <label for="inputId">label text </label> rather than
    // <label><input type="xyzzy">label text</label>
    - this.inputNode.id = this.widgetId;
    - var inputId = this.inputNode.id;
    - if(inputId != null){
    + if(this.id != ""){
    var labels = document.getElementsByTagName("label");
    if (labels != null && labels.length > 0){
    for(var i=0; i<labels.length; i++){
    - if (labels[i].htmlFor == inputId){
    + if (labels[i].htmlFor == this.id){
    labels[i].id = (labels[i].htmlFor + "label");
    dojo.widget.wai.setAttr(this.domNode, "waiState", "labelledby", labels[i].id);
    break;
    @@ -42,14 +53,19 @@
    }
    }
    }
    + //remove tabIndex when disabled
    + if (this.disabled == true){
    + this.domNode.removeAttribute("tabIndex");
    + }
    },

    +
    fillInTemplate: function(){
    this._setInfo();
    },

    onClick: function(e){
    - if(this.disabled == "enabled"){
    + if(this.disabled == false){
    this.checked = !this.checked;
    this._setInfo();
    }
    @@ -62,15 +78,51 @@
    this.onClick(e);
    }
    },
    +
    + mouseOver: function(e){
    + this.hover(e, true);
    + },
    +
    + mouseOut: function(e){
    + this.hover(e, false);
    + },
    +
    + hover: function(e, isOver){
    + if (this.disabled == false){
    + var state = this.checked ? "On" : "Off";
    + var style = "dojoHtmlCheckbox" + state + "Hover";
    + if (isOver){
    + dojo.html.addClass(this.domNode, style);
    + }else{
    + dojo.html.removeClass(this.domNode,style);
    + }
    + }
    + },

    // set CSS class string according to checked/unchecked and disabled/enabled state
    _setInfo: function(){
    - var prefix = (this.disabled == "enabled" ? "dojoHtmlCheckbox" : "dojoHtmlCheckboxDisabled");
    + var prefix = (this.disabled == false ? "dojoHtmlCheckbox" : "dojoHtmlCheckboxDisabled");
    var state = prefix + (this.checked ? "On" : "Off");
    dojo.html.setClass(this.domNode, "dojoHtmlCheckbox " + state);
    - this.inputNode.checked = this.checked;
    + this.inputNode.checked = this.checked;
    + this.inputNode.disabled = this.disabled;
    dojo.widget.wai.setAttr(this.domNode, "waiState", "checked", this.checked);
    }
    }
    +
    );
    +dojo.widget.defineWidget(
    + "dojo.widget.a11y.Checkbox",
    + dojo.widget.Checkbox,
    + {
    + templatePath: dojo.uri.dojoUri('src/widget/templates/CheckboxA11y.html'),
    +
    + postCreate: function(args, frag){
    + // nothing to do but don't want Checkbox version to run
    + },
    + fillInTemplate: function(){
    + }
    + }
    +);

    +
    Index: C:/work/eclipse/workspace/dojoTrunk/src/widget/TabContainer.js
    ===================================================================
    --- C:/work/eclipse/workspace/dojoTrunk/src/widget/TabContainer.js (revision 5230)
    +++ C:/work/eclipse/workspace/dojoTrunk/src/widget/TabContainer.js (working copy)
    @@ -21,9 +21,9 @@

    templatePath: dojo.uri.dojoUri("src/widget/templates/TabContainer.html"),
    templateCssPath: dojo.uri.dojoUri("src/widget/templates/TabContainer.css"),
    -
    +
    selectedTab: "", // initially selected tab (widgetId)
    -
    +
    fillInTemplate: function(args, frag) {
    // Copy style info from input node to output node
    var source = this.getFragNodeRef(frag);
    @@ -40,14 +40,13 @@

    if (this.closeButton=="pane") {
    var div = document.createElement("div");
    - dojo.html.addClass(div, "dojoTabPanePaneClose");
    + this.dojoTabLabels.appendChild(div);
    + var img = this._setupCloseButton("pane");
    + div.appendChild(img);
    dojo.event.connect(div, "onclick", dojo.lang.hitch(this,
    function(){ this._runOnCloseTab(this.selectedTabWidget); }
    )
    );
    - dojo.event.connect(div, "onmouseover", function(){ dojo.html.addClass(div, "dojoTabPanePaneCloseHover"); });
    - dojo.event.connect(div, "onmouseout", function(){ dojo.html.removeClass(div, "dojoTabPanePaneCloseHover"); });
    - this.dojoTabLabels.appendChild(div);
    }

    if(!this.doLayout){
    @@ -94,17 +93,14 @@
    dojo.html.disableSelection(titleSpan);

    if(this.closeButton=="tab" || tab.tabCloseButton){
    - var img = document.createElement("span");
    - dojo.html.addClass(img, "dojoTabPaneTabClose");
    - dojo.event.connect(img, "onclick", dojo.lang.hitch(this,
    - function(evt){
    - this._runOnCloseTab(tab); dojo.event.browser.stopEvent(evt);
    - }
    + var closeButton = this._setupCloseButton("tab");
    + innerDiv.appendChild(closeButton);
    +
    + dojo.event.connect(closeButton, "onclick", dojo.lang.hitch(this,
    + function(evt){
    + this._runOnCloseTab(tab); dojo.event.browser.stopEvent(evt);}
    )
    );
    - dojo.event.connect(img, "onmouseover", function(){ dojo.html.addClass(img,"dojoTabPaneTabCloseHover"); });
    - dojo.event.connect(img, "onmouseout", function(){ dojo.html.removeClass(img,"dojoTabPaneTabCloseHover"); });
    - innerDiv.appendChild(img);
    }
    tab.div.appendChild(innerDiv);
    tab.div.tabTitle=titleSpan;
    @@ -118,7 +114,7 @@
    function(evt){ this.tabNavigation(evt, tab); }
    )
    );
    -
    +
    if(!this.selectedTabWidget || this.selectedTab==tab.widgetId || tab.selected || (this.children.length==0)){
    // Deselect old tab and select new one
    // We do this instead of calling selectTab in this case, becuase other wise other widgets
    @@ -202,9 +198,27 @@
    this._showTab(tab, _noRefresh);
    },

    + _setupCloseButton: function(type){
    + var prefix = "";
    + elemType = "div";
    + if (type == "pane"){
    + prefix = "dojoTabPanePane";
    + }else if (type == "tab"){
    + elemType = "span";
    + prefix = "dojoTabPaneTab";
    + }
    + //else bad type - create a div but styles will be invalid
    + var div = document.createElement(elemType);
    + dojo.html.addClass(div, prefix + "Close " + prefix + "CloseImage");
    + dojo.event.connect(div, "onmouseover", function(){ dojo.html.addClass(div, prefix + "CloseHover"); });
    + dojo.event.connect(div, "onmouseout", function(){ dojo.html.removeClass(div, prefix + "CloseHover"); });
    +
    + return div;
    + },
    +
    tabNavigation: function(evt, tab){
    if( (evt.keyCode == evt.KEY_RIGHT_ARROW)||
    - (evt.keyCode == evt.KEY_LEFT_ARROW) ){
    + (evt.keyCode == evt.KEY_LEFT_ARROW) ){
    var current = null;
    var next = null;
    for(var i=0; i < this.children.length; i++){
    @@ -212,47 +226,52 @@
    current = i;
    break;
    }
    - }
    - if(evt.keyCode == evt.KEY_RIGHT_ARROW){
    + } dojo.debug("current = " + current);
    + if(evt.keyCode == evt.KEY_RIGHT_ARROW){ dojo.debug(this.children.length);
    next = this.children[ (current+1) % this.children.length ];
    }else{ // is LEFT_ARROW
    next = this.children[ (current+ (this.children.length-1)) % this.children.length ];
    }
    - this.selectTab(next);
    - dojo.event.browser.stopEvent(evt);
    - next.div.tabTitle.focus();
    + this.selectTab(next); dojo.debug("selectTab");
    + dojo.event.browser.stopEvent(evt); dojo.debug("stopevent");
    + next.div.tabTitle.focus();dojo.debug("focus");
    }

    },
    -
    +
    keyDown: function(e){
    if(e.keyCode == e.KEY_UP_ARROW && e.ctrlKey){
    // set focus to current tab
    this.selectTab(this.selectedTabWidget);
    dojo.event.browser.stopEvent(e);
    this.selectedTabWidget.div.tabTitle.focus();
    + }else if(e.keyCode == e.KEY_DELETE && e.altKey){
    + if (this.closeButton == "tab" || this.closeButton == "pane" || this.selectedTabWidget.tabCloseButton){
    + this._runOnCloseTab(this.selectedTabWidget);
    + dojo.event.browser.stopEvent(e);
    + }
    }
    },

    _showTab: function(tab, _noRefresh) {
    dojo.html.addClass(tab.div, "current");
    tab.selected=true;
    - tab.div.tabTitle.setAttribute("tabIndex","0");
    + tab.div.tabTitle.setAttribute("tabIndex","0");dojo.debug("set tabindex");
    if ( this.useVisibility && !dojo.render.html.ie){
    tab.domNode.style.visibility="visible";
    - }else{
    + }else{ dojo.debug((_noRefresh && tab.refreshOnShow));
    // make sure we dont refresh onClose and on postCreate
    // speeds up things a bit when using refreshOnShow and fixes #646
    - if(_noRefresh && tab.refreshOnShow){
    + if(_noRefresh && tab.refreshOnShow){ dojo.debug("here");
    var tmp = tab.refreshOnShow;
    - tab.refreshOnShow = false;
    - tab.show();
    + tab.refreshOnShow = false; dojo.debug("about to call show");
    + tab.show(); dojo.debug("after show");
    tab.refreshOnShow = tmp;
    - }else{
    - tab.show();
    + }else{ dojo.debug("else tab.show()");
    + tab.show(); dojo.debug("after tab.show()");
    }

    - if(this.doLayout){
    + if(this.doLayout){ dojo.debug("do layout");
    var content = dojo.html.getContentBox(this.containerNode);
    tab.resizeTo(content.width, content.height);
    }
    @@ -295,3 +314,31 @@
    selected: false, // is this tab currently selected?
    tabCloseButton: false
    });
    +
    +dojo.widget.defineWidget(
    + "dojo.widget.a11y.TabContainer",
    + dojo.widget.TabContainer,
    + {
    + templateCssPath: dojo.uri.dojoUri("src/widget/templates/TabContainerA11y.css"),
    + imgPath: dojo.uri.dojoUri("src/widget/templates/images"),
    +
    + _setupCloseButton: function(type){
    + var typeClass="";
    + if (type == "pane"){
    + typeClass = "dojoTabPanePaneClose";
    + }else if(type == "tab"){
    + typeClass = "dojoTabPaneTabClose";
    + }
    + var img = document.createElement("img");
    + dojo.html.addClass(img, typeClass);
    + img.src = this.imgPath + "/tab_close.gif";
    + img.alt = "[x]";
    + var over = this.imgPath + "/tab_close_h.gif";
    + var off = this.imgPath + "/tab_close.gif";
    + dojo.event.connect(img, "onmouseover", function() { img.src = over; });
    + dojo.event.connect(img, "onmouseout", function() { img.src = off; });
    +
    + return img;
    + }
    + }
    +);
    \ No newline at end of file
    Index: C:/work/eclipse/workspace/dojoTrunk/src/widget/templates/TabContainer.css
    ===================================================================
    --- C:/work/eclipse/workspace/dojoTrunk/src/widget/templates/TabContainer.css (revision 5230)
    +++ C:/work/eclipse/workspace/dojoTrunk/src/widget/templates/TabContainer.css (working copy)
    @@ -53,6 +53,9 @@
    right : 6px;
    height : 12px;
    width : 12px;
    + font-size : small;
    +}
    +.dojoTabPanePaneCloseImage {
    background : url(images/tab_close.gif) no-repeat right top;
    }

    @@ -66,10 +69,14 @@
    width : 12px;
    padding : 0 12px 0 0;
    margin : 0 -10px 0 10px;
    - background : url(images/tab_close.gif) no-repeat right top;
    cursor : default;
    + font-size: small;
    }

    +.dojoTabPaneTabCloseImage {
    + background : url(images/tab_close.gif) no-repeat right top;
    +}
    +
    .dojoTabPaneTabCloseHover {
    background-image : url(images/tab_close_h.gif);
    }
    Index: C:/work/eclipse/workspace/dojoTrunk/src/widget/templates/Checkbox.css
    ===================================================================
    --- C:/work/eclipse/workspace/dojoTrunk/src/widget/templates/Checkbox.css (revision 5230)
    +++ C:/work/eclipse/workspace/dojoTrunk/src/widget/templates/Checkbox.css (working copy)
    @@ -1,12 +1,9 @@
    .dojoHtmlCheckbox {
    border: 0px;
    - text-decoration: none;
    -
    width: 20px;
    height: 20px;
    display: -moz-inline-box;
    display: inline-block;
    -
    margin-right: 5px;
    }

    @@ -22,9 +19,9 @@
    .dojoHtmlCheckboxDisabledOff {
    background: url(check.gif) -60px 0px;
    }
    -.dojoHtmlCheckboxOn:hover {
    +.dojoHtmlCheckboxOnHover {
    background: url(check.gif) -80px 0px;
    }
    -.dojoHtmlCheckboxOff:hover {
    +.dojoHtmlCheckboxOffHover {
    background: url(check.gif) -100px 0px;
    }
    \ No newline at end of file
    Index: C:/work/eclipse/workspace/dojoTrunk/src/widget/templates/Checkbox.html
    ===================================================================
    --- C:/work/eclipse/workspace/dojoTrunk/src/widget/templates/Checkbox.html (revision 5230)
    +++ C:/work/eclipse/workspace/dojoTrunk/src/widget/templates/Checkbox.html (working copy)
    @@ -1,6 +1,5 @@
    -<a class='dojoHtmlCheckbox' tabIndex="${this.tabIndex}" href="#" ${this.disabledStr}
    - dojoAttachEvent="onClick;keyPress" waiRole="checkbox">
    - <input type="checkbox" name="${this.name}" checked="${this.checked}" style="display: none"
    +<span class='dojoHtmlCheckbox' tabIndex="${this.tabIndex}" dojoAttachEvent="mouseOver; mouseOut; keyPress; onClick;" waiRole="checkbox">
    + <input type="checkbox" name="${this.name}" id="${this.id}" ${this.disabledStr} ${this.checkedStr} style="display: none"
    dojoAttachPoint="inputNode">
    &nbsp;
    -</a>
    +</span>
    Index: C:/work/eclipse/workspace/dojoTrunk/src/widget/DomWidget.js
    ===================================================================
    --- C:/work/eclipse/workspace/dojoTrunk/src/widget/DomWidget.js (revision 5230)
    +++ C:/work/eclipse/workspace/dojoTrunk/src/widget/DomWidget.js (working copy)
    @@ -112,6 +112,14 @@
    }else{
    return node.getAttributeNS(this[ns].namespace, attr);
    }
    + },
    +
    + removeAttr: function(node, ns, attr){
    + if (dojo.render.html.ie){
    + return node.removeAttribute(this[ns].alias+":"+attr);
    + }else{
    + node.removeAttributeNS(this[ns].namespace, attr);
    + }
    }
    };



    ------------------------------------------------------------------------

    =


    ------------------------------------------------------------------------

    _______________________________________________
    dojo-contributors mailing list
    dojo-contributors@dojotoolkit.org
    http://dojotoolkit.org/mailman/listinfo/dojo-contributors
    --

    Bill
  • Becky Gibson at Aug 15, 2006 at 6:24 am
    <bill>
    This looks basically good. (I looked at the widget parts.) For
    CheckboxA11y.html, you are missing the hookup to the onClick handler,
    and also tabIndex setting. Also, it seems like the outer span is not
    necessary. Finally, I'm not sure why you rearranged the disabled flag
    handling. I thought the current checked in code was working fine.
    </bill>

    I don't need a tab index in the accessible version - an input field is put
    into the tab order by default. I also don't need the onclick handler as
    the input type=checkbox handles that. I didn't see anything in onclick
    that was separate from just recording the current checkbox value. The
    outer span may not be necessary. I kept it to allow for styling if
    necessary - I can remove it. I was trying tot make the disabled flag
    more efficient - rather than doing a string compare I have converted it
    into a boolean. This allows disabled =true as well as
    disabled="disabled" to work but perhaps that is not what we want. Just
    "disabled" on the input in the markup never worked (and still doesn't).
    But, I can return this back to the original - we may not want
    disbled="true" to be valid - I need to check if that is valid in XHTML or
    HTML 4.01.

    <bill>
    For TabContainer, it looks good I think. I remembered why we _don't_
    use an image for the close button (for the normal version of the
    widget). Besides customizability reasons, it's because the X has two
    versions (mouse over and non-mouse over)
    </bill>

    I have also implemented the mouse over and mouse out behavior on the image
    version of the tabContainer. I think customizing remains the only reason
    for using a background image over a real <img> in the "normal" version.



    Becky Gibson
    Web Accessibility Architect

    IBM Emerging Internet Technologies
    5 Technology Park Drive
    Westford, MA 01886
    Voice: 978 399-6101; t/l 333-6101
    Email: gibsonb@us.ibm.com
  • Bill Keese at Aug 15, 2006 at 10:22 am

    Becky Gibson wrote:
    I don't need a tab index in the accessible version - an input field is put
    into the tab order by default. I also don't need the onclick handler as
    the input type=checkbox handles that.
    Let me put it this way. The markup below works for a normal checkbox
    widget. It needs to work also for the accessibility checkbox also.

    <div dojoType="Checkbox" onClick="alert('foo');" tabIndex>
    I was trying tot make the disabled flag
    more efficient - rather than doing a string compare I have converted it
    into a boolean. This allows disabled =true as well as
    disabled="disabled" to work but perhaps that is not what we want.
    Oh, ok. I guess that make sense.
    Just
    "disabled" on the input in the markup never worked (and still doesn't).
    Really? I thought that was working. We should try to get it to work.
    <bill>
    For TabContainer, it looks good I think. I remembered why we _don't_
    use an image for the close button (for the normal version of the
    widget). Besides customizability reasons, it's because the X has two
    versions (mouse over and non-mouse over)
    </bill>

    I have also implemented the mouse over and mouse out behavior on the image
    version of the tabContainer. I think customizing remains the only reason
    for using a background image over a real <img> in the "normal" version.
    By "mouse over and mouse out behavior", do you mean that it displays a
    separate image when you mouse over and when you mouse out? That's what
    the normal version does, but it seems like overkill for the
    accessibility version (although the cursor should change, I think)
  • Becky Gibson at Aug 15, 2006 at 3:29 pm
    <bill>
    Let me put it this way. The markup below works for a normal checkbox
    widget. It needs to work also for the accessibility checkbox also.

    <div dojoType="Checkbox" onClick="alert('foo');" tabIndex>
    </bill>

    OK, I get it now. Is the correct way to do this add a dojoAttachEvent
    ="onClick" and then create an empty onClick function in the accessible
    checkbox code? This works but I'm not sure that is the correct
    implementation. Although what about onBlur or other handlers? If I
    don't explicitly account for them in the widget code they won't get
    preserved? For example, if I add an onBlur to one of the text examples in
    text_checkbox.html it gets lost.

    <bill>
    Just
    "disabled" on the input in the markup never worked (and still doesn't).
    Really? I thought that was working. We should try to get it to work.
    </bill>

    If I add just disabled (which validates in HTML 4.01) to one of the test
    checkboxes in test_Checkbox.html it does not become disabled. I added a
    dojo.debug() of the disabled string in postMixInProperties() and it has
    the default value set in the object when just "disabled" appears in the
    markup. So, I suspected that the parsing code didn't know how to handle
    attributes without a value but I haven't checked the code to verified
    that.

    <bill>
    By "mouse over and mouse out behavior", do you mean that it displays a
    separate image when you mouse over and when you mouse out? That's what
    the normal version does, but it seems like overkill for the
    accessibility version (although the cursor should change, I think)
    </bill>
    Yes, it displays a separate image for mouse over and mouse out just like
    the normal version. It is perhaps overkill since the change in the image
    is pretty subtle but I was trying to maintain the same functionality.

    Attached is updated checkbox coded. This takes a different approach to
    keep using booleans for disabled but to output a valid string for disabled
    and checked. This may not be the most efficient way to handle this, it
    depends upon how we end up supporting the disabled attribute with no
    value.



    Becky Gibson
    Web Accessibility Architect

    IBM Emerging Internet Technologies
    5 Technology Park Drive
    Westford, MA 01886
    Voice: 978 399-6101; t/l 333-6101
    Email: gibsonb@us.ibm.com
    -------------- next part --------------
    An HTML attachment was scrubbed...
    URL: http://dojotoolkit.org/pipermail/dojo-contributors/attachments/20060815/33e4c3af/CheckboxA11y-0001.html
    -------------- next part --------------
    An embedded and charset-unspecified text was scrubbed...
    Name: updatedchkbox.txt
    Url: http://dojotoolkit.org/pipermail/dojo-contributors/attachments/20060815/33e4c3af/updatedchkbox-0001.txt
  • Bill Keese at Aug 16, 2006 at 4:29 am

    Becky Gibson wrote:
    <bill>
    Let me put it this way. The markup below works for a normal checkbox
    widget. It needs to work also for the accessibility checkbox also.

    <div dojoType="Checkbox" onClick="alert('foo');" tabIndex>
    </bill>

    OK, I get it now. Is the correct way to do this add a dojoAttachEvent
    ="onClick" and then create an empty onClick function in the accessible
    checkbox code? This works but I'm not sure that is the correct
    implementation.
    Yes.

    Actually, there's another issue here, unrelated to your changes. For
    normal checkbox, when the user clicks the checkbox we want two things to
    happen:
    1) run the default click code in Checkbox.onClick()
    2) call user defined onclick handler

    The markup

    <div dojoType="Checkbox" onClick="alert('foo');">

    does something similar to

    dojo.event.connect(this, "onClick", function(){ alert('foo'))

    and everything works fine. However, the markup

    <div dojoType="Checkbox" onClick="myFunc">

    will override Checkbox.onClick() with myFunc, so the builtin onClick
    code will never be called. Thus, the builtin function should probably
    be called _onClick(), and it should call a function called onClick that
    is empty by default. See Menu2.js for an example.

    But that's a different topic.
    Although what about onBlur or other handlers? If I
    don't explicitly account for them in the widget code they won't get
    preserved? For example, if I add an onBlur to one of the text examples in
    text_checkbox.html it gets lost.
    Yeah, that is true. That's just a limitation of how checkbox works. It
    might become an issue at some point.
    <bill>
    Just
    "disabled" on the input in the markup never worked (and still doesn't).
    Really? I thought that was working. We should try to get it to work.
    </bill>

    If I add just disabled (which validates in HTML 4.01) to one of the test
    checkboxes in test_Checkbox.html it does not become disabled. I added a
    dojo.debug() of the disabled string in postMixInProperties() and it has
    the default value set in the object when just "disabled" appears in the
    markup. So, I suspected that the parsing code didn't know how to handle
    attributes without a value but I haven't checked the code to verified
    that.
    Hmm, ok. Too bad; it would be good to support that.
    <bill>
    By "mouse over and mouse out behavior", do you mean that it displays a
    separate image when you mouse over and when you mouse out? That's what
    the normal version does, but it seems like overkill for the
    accessibility version (although the cursor should change, I think)
    </bill>
    Yes, it displays a separate image for mouse over and mouse out just like
    the normal version. It is perhaps overkill since the change in the image
    is pretty subtle but I was trying to maintain the same functionality.
    Yeah, my feeling is that it's overkill too. BTW (this is also unrelated
    to your changes), for performance reasons the two icons for closing a
    tab should really be stored in the same image file, just like all the
    checkbox icons are in one image file.
    Attached is updated checkbox coded. This takes a different approach to
    keep using booleans for disabled but to output a valid string for disabled
    and checked. This may not be the most efficient way to handle this, it
    depends upon how we end up supporting the disabled attribute with no
    value.
    Sounds good. So is everything ready to check in now? Or is there still
    some work left?
  • Becky Gibson at Aug 16, 2006 at 1:30 pm

    Just
    "disabled" on the input in the markup never worked (and still doesn't).
    Really? I thought that was working. We should try to get it to work.
    Actually, this WILL work in IE and I updated checkbox.js to take that into
    account. With just disabled in FF, this.disabled remains at the default
    value. In IE, entering just disabled results in this.disabled=true
    (boolean).

    Yeah, my feeling is that it's overkill too. BTW (this is also unrelated
    to your changes), for performance reasons the two icons for closing a
    tab should really be stored in the same image file, just like all the
    checkbox icons are in one image file.
    I removed the onmouseover and onmouseout behavior for the real <img> in
    the accessible version of the checkbox.
    Sounds good. So is everything ready to check in now? Or is there still
    some work left?
    I think this is ready to check in. I added additional api's to a11y.txt
    so that you can specify no accessibility check (the default is to perform
    the check): dojo.setAccessibleCheck(false); set the Accessible mode based
    on a check: setAccessibleMode(); check for accessibility mode just once:
    checkAccessible(); or force a test for accessibility: testAccessible(). I
    moved a11y.js directly under the src dir as we discussed on the
    accessibility call. I moved the call to check for accessibility into
    dojo.hostenv.makeWidgets() in hostenv_browser.js. This way the check only
    runs once (at most).

    I also updated DomWidget.js to include removeAttr() functions in the wai
    object. And I tweaked test_Checkbox.html to include a checkbox from a div
    (although I don't have any preference for that getting checked in).

    The attached zip contains a patch and the new files.



    Becky Gibson
    Web Accessibility Architect

    IBM Emerging Internet Technologies
    5 Technology Park Drive
    Westford, MA 01886
    Voice: 978 399-6101; t/l 333-6101
    Email: gibsonb@us.ibm.com
    -------------- next part --------------
    A non-text attachment was scrubbed...
    Name: a11y8_16.zip
    Type: application/zip
    Size: 7214 bytes
    Desc: not available
    Url : http://dojotoolkit.org/pipermail/dojo-contributors/attachments/20060816/cfc6a5d7/a11y8_16-0001.zip

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupdojo-contributors @
categoriesdojo
postedAug 10, '06 at 3:37p
activeAug 16, '06 at 1:30p
posts7
users2
websitedojotoolkit.org

2 users in discussion

Becky Gibson: 4 posts Bill Keese: 3 posts

People

Translate

site design / logo © 2022 Grokbase