Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
ZK-EE 9.6.1 / Using Module za11y! for accessibility.
I have a listbox (bound to a ListModelList with single selection).
I added a tabindex="0" to the <listindex /> element.
Now I can "tab" with the keyboard into the listbox. Cool.
But I do not see that happen. There is no visual clue that I entered the listbox.
As soon as I use the cursor-keys (up/down/left/right) the selected row gets highlighted (selected).
My Question: What do I have to change to let the user know (visually), that he entered the listbox and can start using the cursor-keys?
Funfact: If I use a grid there is a bright visual hint whenever the grid is entered via keyboard. But here the selected line(s) in the ListModelList are not highlighted. And: keyboard navigation does not happen with the arrow keys but with the tab key.
So if anybody could assist that would be greatly appreciated as obviously both variants fail for different reasons.
Thanks for pointing out the issue with pointer not working after applying style.
Turns out I forgot that the display element would catch pointer events :D
Here's a corrected style:
<style>
.z-listbox:focus-within {
position: relative;
}
.z-listbox:focus-within::before {
z-index: 1;
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
box-shadow: inset 0 0 0 2px #E67626, inset 0 0 0 0px #FFFFFF;
pointer-events: none;
}
</style>
Hey there,
Regarding the Grid, the explanation is fairly simple: Grid is not a selectable component. It just displays stuff in a table-like structure.
In contrast, the listbox does support selection and focus on individual rows.
As a result, the grid doesn't have any selection or manipulation workflow of grid rows.
Regarding Listbox:
I'm not clear as to what you mean by "adding tabindex="0" to the <listindex /> element".
Could you provide a short code sample?
Listbox with za11y should already accept tab focus without modification. This said, I agree that it is not very visually nice that there is no default highlight of the focus position.
I think something like this would be appropriate: (add a border to the entire listbox while focus is located anywhere inside of it)
<style>
.z-listbox:focus-within {
position: relative;
}
.z-listbox:focus-within::before {
z-index: 1;
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
box-shadow: inset 0 0 0 2px #E67626, inset 0 0 0 0px #FFFFFF;
}
</style>
Thanks for the answer: The answer to your question:
> I'm not clear as to what you mean by "adding tabindex="0" to the <listindex />
is exactly what you guessed: I thought I'd need tabindex="0" to make the listbox focusable but if this is not needed I'll give it a try.
holos ( 2023-07-04 15:51:26 +0800 )editThere is now a problem. As soon as I apply the css I can no longer select a listitem by clicking - only "enter" works. After clicking the entire listbox freezes. Even the scrollbar is no longer active. If I remove content: "" it works again - but then there is no focus frame.
holos ( 2023-07-06 04:44:11 +0800 )editAsked: 2023-06-29 23:32:43 +0800
Seen: 10 times
Last updated: Jul 08
FYI I also updated the tracker ticket to reflect this topic: https://tracker.zkoss.org/browse/ZK-5486
MDuchemin ( 2023-07-04 15:00:24 +0800 )edit