Latest revision as of 09:59, 25 October 2022

Since 9.5.0

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.

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.

@@ Line 1: / Line 1: @@
 {{ZKComponentReferencePageHeader}}
+{{versionSince|9.5.0}} {{ZK EE}}
-= Listbox =
-{{ZKComponentReferenceAccessibilityComponentInfo}}
-  since 9.5.0
 {{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 ==
-{| border="1px"
+{| class='wikitable'
 ! <center>Key</center>
 ! <center>Description</center>
@@ Line 20: / Line 16: @@
 | Focus on Listcells or Listheaders
 |-
-| Enter / Spacebar
+| Spacebar (on listitem)
-| If the checkmark is enabled, pressing Enter/Spacebar will 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.
 |}