I have a list of item with ul li list which build through a map function, looks like -
sizeData.map((size, index) => {
return (
<li
role="none"
className="size-dropdownlist__item"
key={sizeData.label}
onMouseOver={() => this.sizeDataHover(size.price)}
onFocus={() => this.sizeDataHover(size.price)}
>
<div className="size-dropdownlist__item____holder">
<a
role="menuitem"
aria-setsize={size.length}
aria-posinset={index + 1}
tabIndex="0"
aria-label={size.label}
href={size.URL}
onClick={(e) => { this.onSizeDataSelect(e, size.ID); }}
className={
classNames('size-dropdownlist__item____holder--link',
{
'holder--link-selected': size.isSelected
})
}
>
{size.label}
</a>
</div>
</li>
})
}
The HTML output like -
<ul className="size-dropdownlist">
<li className="size-dropdownlist__item">
<div className="size-dropdownlist__item____holder">
<a href="#" className="size-dropdownlist__item____holder--link">A</a>
</div>
</li>
<li className="size-dropdownlist__item">
<div className="size-dropdownlist__item____holder">
<a href="#" className="size-dropdownlist__item____holder--link">B</a>
</div>
</li>
<li className="size-dropdownlist__item">
<div className="size-dropdownlist__item____holder">
<a href="#" className="size-dropdownlist__item____holder--link">C</a>
</div>
</li>
<li className="size-dropdownlist__item">
<div className="size-dropdownlist__item____holder">
<a href="#" className="size-dropdownlist__item____holder--link">D</a>
</div>
</li>
<li className="size-dropdownlist__item">
<div className="size-dropdownlist__item____holder">
<a href="#" className="size-dropdownlist__item____holder--link">E</a>
</div>
</li>
<li className="size-dropdownlist__item">
<div className="size-dropdownlist__item____holder">
<a href="#" className="size-dropdownlist__item____holder--link">F</a>
</div>
</li>
</ul>
Using CSS I was set it with two rows, display: flex.
|A|B|
|C|D|
|E|F|
Now I wanted to move a selected item through keyboard like - if user move mouse pointer to A and press arrow right the B will show selected and if user press arrow down then C with selected. Similarlly if user press up arrow when on C it's move to A.
