Listbox"

From Documentation
(Created page with "{{ZKComponentReferencePageHeader}} = Listbox = *Demonstration: N/A *Style Guide: N/A *[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] since 9.5.0 == Relate...")
 
 
(11 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{ZKComponentReferencePageHeader}}
 
{{ZKComponentReferencePageHeader}}
 +
{{versionSince|9.5.0}} {{ZK EE}}
  
= Listbox =
+
{{ZKComponentReferenceAccessibilityNamingReference}}
*Demonstration: N/A
 
*Style Guide: N/A
 
*[http://www.zkoss.org/product/edition.dsp Available in ZK EE only]
 
  since 9.5.0
 
 
 
== Related components ==
 
Auxhead, Auxheader, Listcell, Listfooter, Listgroup, Listgroupfoot, Listheader, Listitem
 
 
 
== Required Settings ==
 
'''aria-label''' is required.
 
  
 +
You need to label a Listbox first, then ZK will add <code>aria-labelledby</code> on the <code>z-focus-a</code> button.
 
== Keyboard Support ==
 
== Keyboard Support ==
{| border="1px"
+
{| class='wikitable'
 
! <center>Key</center>
 
! <center>Key</center>
 
! <center>Description</center>
 
! <center>Description</center>
 
|-
 
|-
| ArrowUp/ArrowDown
+
| ArrowUp / ArrowDown
 
| Select Listitems or focus on Listheaders.
 
| Select Listitems or focus on Listheaders.
 
|-
 
|-
| ArrowLeft/ArrowRight
+
| ArrowLeft / ArrowRight
 
| Focus on Listcells or Listheaders
 
| Focus on Listcells or Listheaders
 
|-
 
|-
| Enter/Spacebar
+
| Spacebar (on listitem)
| If the checkmark is enabled, press Enter/Spacebar would toggle the checkbox.
+
| If the checkmark is enabled, pressing Spacebar will toggle selection of the listitem.
 +
|-
 +
| Enter / Spacebar (on listgroup)
 +
| pressing Enter/Spacebar will open or close the listgroup.
 +
|-
 +
| Enter / Spacebar (on "select all" checkbox)
 +
| pressing Enter/Spacebar trigger select / unselect all.
 
|}
 
|}
 
== Example ==
 
<source lang="xml">
 
    <zk xmlns:ca="client/attribute">
 
        <listbox width="350px" ca:aria-label="Team Member">
 
    <listhead>
 
        <listheader label="name" sort="auto" />
 
                <listheader label="gender" />
 
                <listheader label="phone" />
 
    </listhead>
 
    <listitem>
 
        <listcell label="Mary" />
 
        <listcell label="FEMALE" />
 
        <listcell label="000000000" />
 
    </listitem>
 
    <listitem>
 
        <listcell label="John" />
 
        <listcell label="MALE" />
 
    </listitem>
 
</listbox>
 
    </zk>
 
</source>
 

Latest revision as of 09:59, 25 October 2022

Since 9.5.0

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

Label a Component

To name a component with ARIA attribute by adding the aria-label client attribute to the component, please refer to ZK_Developer's_Reference/Accessibility#Specify_ARIA_Attributes

You need to label a Listbox first, then ZK will add aria-labelledby on the z-focus-a button.

Keyboard Support

Key
Description
ArrowUp / ArrowDown Select Listitems or focus on Listheaders.
ArrowLeft / ArrowRight Focus on Listcells or Listheaders
Spacebar (on listitem) If the checkmark is enabled, pressing Spacebar will toggle selection of the listitem.
Enter / Spacebar (on listgroup) pressing Enter/Spacebar will open or close the listgroup.
Enter / Spacebar (on "select all" checkbox) pressing Enter/Spacebar trigger select / unselect all.