CODEWITHSUNDEEP
htmlhoveronfocuslost-focuskeyboard-navigation
newbee-UI
newbee-UI

Reputation: 21

tabindex: unable to focus elements that are visible only on hover

I have a list of items(ul, li elements), where li contains left content and right content.for each li tabindex is set to 0.

By default left content is always visible, When user mouse hovers on each of the li, i am toggling visiblity of right content.

right content has three action icons all with tabindex set to 0.

The issue is when i am using keyboard TAB key to gain focus on each li, i am able to see the action icons in the right panel, but immediately pressing TAB key,i am losing the focus on li element, so the right action panel becomes invisible and not able to access elements inside li right panel using keyboard.

Requirement:

When i am focusing on a particular li, immediately pressing TAB key should select the action icons(which are visible only when there is focus on li element) inside the li, instead of skipping action icons as the action icons also have tabindex set to 0.

Below is the sample code snippet for reference

<ul>
<li tabindex="0">
    <div class="left-content">
        <label>{{cartList.item_name}}</label>
    </div>
    <div class="right-content">
        <div class="actionsBar">
            <span class="descriptionIcon" tabindex="0"></span>
            <span class="deleteIcon" tabindex="0"></span>
        </div>
    </div>
</li>
</ul>


<style type = "text/css"> 
         li:hover, li:focus  {
            cursor: pointer;
            background-color: #cccccc;
            color: #333333;
         }
         .right-content {
            visibility: hidden;
         }

        .right-content:hover, .right-content:focus  {
            visibility: visible;
        }
</style>

The right-content will be visible only on hover of li tag

Thanks in Advance.

Upvotes: 2

Views: 485

Answers (0)

Related Questions