-
Type:
New Feature
-
Resolution: Done
-
Priority:
Normal
-
Affects Version/s: 9.6.3
-
Component/s: None
-
Security Level: Jimmy
-
None
Steps to Reproduce
<listbox sizedByContent="false" >
<listhead sizable="true">
<listheader label="default0" />
<listheader label="default1" />
<listheader label="default2" />
</listhead>
<listitem>
<listcell label="Row 1" />
<listcell label="Hello World" />
<listcell label="Hello World2" />
</listitem>
</listbox>
1. move a focus to the listbox by pressing a tab key
Current result
no obvious visual effect for the focused listbox
Expected result
end-users can clearly identify the listbox is focused right now
Details
- Currently, when focusing on a listbox, it actually on a 1x1 button .z-focus-a which is hard to be identified by end users:
- please also fix
ZK-5486
workaround
<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>
