-
Type:
New Feature
-
Resolution: Done
-
Priority:
Major
-
Affects Version/s: 9.6.4
-
Component/s: None
-
Security Level: Jimmy
-
None
Steps to Reproduce
<tree id="tree" rows="5">
<treecols sizable="true">
<treecol label="Name"/>
<treecol label="Description"/>
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 1"/>
<treecell label="Item 1 description"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2"/>
<treecell label="Item 2 description"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.1"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2.2"/>
<treecell
label="Item 2.2 is something who cares"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem label="Item 3"/>
</treechildren>
</tree>
1. select the 1st item with the keyboard
2. press UP arrow key to focus on the 1st column header
Current result
no obvious visual effect for the focused header
Expected result
end-users can clearly identify which header is focused on right now
Workaround
dotted
.z-treecol-sort:focus{
outline: 3px dotted red;
outline-offset: -2px;
}
blinking
@keyframes blinking {
0% { opacity: 1;
background-color: inherit;}
50% { opacity: 0.5;
background-color: white;}
100% { opacity: 1;
background-color: inherit;}
}
.z-treecol-sort:focus{
animation: blinking 1s infinite;
}
- relates to
-
-
- Closed
-