Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-2535

Accessibility support for panel/window buttons

XMLWordPrintable

    • ZK 8.0.1 S1, ZK 8.0.1 S2

      To cover section 508 requirements on web application accessibility, keyboard should be able to navigate to and control the maximize/minimize/close buttons on panel/window caption.

      Specifically, those buttons should be reachable via Tab/Shit-Tab keys. Once reached, pressing any key should invoke the function of the button. The buttons should also have tooltip texts for a screen reader to parse.

      Workaround:

      <panel xmlns:w="client" border="normal" collapsible="true" closable="true" maximizable="true" w:tabindex="30">
    <attribute w:name="onBind"><![CDATA[
        var close = jq(this.$n()).find('.z-caption > .z-panel-close'),
            maximize = jq(this.$n()).find('.z-caption > .z-panel-maximize'),
            expand = jq(this.$n()).find('.z-caption > .z-panel-expand');
       
        // TODO: button ordering might be different, so tabindex for buttons must be configurable
        close[0].tabIndex = this.tabindex;
        maximize[0].tabIndex = this.tabindex;
        expand[0].tabIndex = this.tabindex;

        // TODO: button tooltip should be configurable
        close.attr("title", "Close");
        maximize.attr("title", "Maximize");
        expand.attr("title", "Expand");

        // press any key is like clicking the button
        close.keypress(function() { this.click() });
        maximize.keypress(function() { this.click() });
        expand.keypress(function() { this.click() });
    ]]></attribute>
    <caption label="Panel"/>
</panel>

            christopherszu christopherszu
            neillee neillee
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: