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

Accessibility support for panel/window buttons

    XMLWordPrintable

Details

    • ZK 8.0.1 S1, ZK 8.0.1 S2

    Description

      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>
      

      Attachments

        Issue Links

          Activity

            People

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

              Dates

                Created:
                Updated:
                Resolved: