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}} | ||
| − | + | {{ZKComponentReferenceAccessibilityNamingReference}} | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | 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 == | ||
| − | {| | + | {| 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 | ||
|- | |- | ||
| − | | | + | | Spacebar (on listitem) |
| − | | If the checkmark is enabled, | + | | 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. | ||
|} | |} | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Latest revision as of 09:59, 25 October 2022
Since 9.5.0
- Available for ZK:
-
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
| 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. |