javascript – React – KeyBoard Navigation on ul li list-ThrowExceptions

Exception or error:

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.

How to solve:

As far as I know you can use tabIndex to move between elements with the Tab key. If you want to use custom keys – like the arrow keys – you should use javascript. And there is an already answered question here, which uses jQuery but you can transform it to pure javascript very easily.

Leave a Reply

Your email address will not be published. Required fields are marked *