Tab functionality for a hover state

Question

Tab functionality for a hover state

I am working on a component that displays a button and a link when hovered over. This is not a conventional menu, but rather a box located in the center of the page.

Considering accessibility guidelines, I want users to be able to tab into the container, which currently reveals its content with the .HiddenUntilHover class, and then continue tabbing to reach the button and link displayed during hover/focus state.

Presently, focusing on the container triggers the hover state; however, tabbing just moves to the next element without allowing access to the button or link WITHIN the hover state.

Here is a pseudo code example:

/* My component .jsx */
<div tabIndex="0" className="MainContainer">
 <div className="SomeOtherClass">
   <div className="HiddenUntilHover">
     /* Tabbable clickable items */
     <button>Click me!</button>
     <a href="...">I am also clickable</a>
   </div>
 </div>
</div>

And here's my SCSS snippet:

.HiddenUntilHover {
  display: none;
}

MainContainer:focus,
MainContainer:hover,
> .HiddenUntilHover {
    display: block
}

css reactjs sass accessibility jsx

Answer 1

Answer №1

A few days back, I encountered a problem and resolved it by utilizing CSS classes to ensure that the content is accessible via keyboard navigation when hovered.

To achieve this functionality, I made use of CSS pseudo-classes to guarantee that the buttons inside the div element are displayed when active and focused. Specifically, incorporating :focus-within and :focus-visible ensures that the contents become visible and keyboard-accessible as you navigate through the list items using the tab key.

.MainContainer  {
  &:not(:hover, :focus, :active, :focus-visible, :focus-within) {
    .HiddenUntilHover {
      visibility: hidden;
    }
  }
}

<body>
    <div tabIndex="0" className="MainContainer">
        Content
        <div className="SomeOtherClass">
          <div className="HiddenUntilHover">
            <button>Click me!</button>
            <a href="...">I am also clickable</a>
          </div>
        </div>
      </div>
  </body>

For those interested, check out the Codesandbox demo showcasing this feature in action

Answer 2

A few days back, I encountered a problem and resolved it by utilizing CSS classes to ensure that the content is accessible via keyboard navigation when hovered.

To achieve this functionality, I made use of CSS pseudo-classes to guarantee that the buttons inside the div element are displayed when active and focused. Specifically, incorporating :focus-within and :focus-visible ensures that the contents become visible and keyboard-accessible as you navigate through the list items using the tab key.

.MainContainer  {
  &:not(:hover, :focus, :active, :focus-visible, :focus-within) {
    .HiddenUntilHover {
      visibility: hidden;
    }
  }
}

<body>
    <div tabIndex="0" className="MainContainer">
        Content
        <div className="SomeOtherClass">
          <div className="HiddenUntilHover">
            <button>Click me!</button>
            <a href="...">I am also clickable</a>
          </div>
        </div>
      </div>
  </body>

For those interested, check out the Codesandbox demo showcasing this feature in action

Answer 3

Answer №2

When the box is in focus, tabbing to the button will cause the box to blur and hide, with its contents disappearing, so that focus can shift to the next accessible element. This seems to be the behavior you are encountering.

To address this issue, consider incorporating an aria-activedescendant or tabindex attribute when the box gains focus. Implementing this solution may require a bit of JavaScript.

It's important to note that you don't necessarily have to rely on the hover state to make that control accessible. One alternative approach involves including an offscreen (or clipped) button/link that is not a direct child of the hidden (display:none) box. If you opt for this method, be sure to familiarize yourself with the aria-owns attribute.

As long as the button or link is properly marked up (or has a tabindex="0" set), and isn't truly hidden from accessibility tools, it should be feasible to navigate to it using the tab key.

Answer 4

When the box is in focus, tabbing to the button will cause the box to blur and hide, with its contents disappearing, so that focus can shift to the next accessible element. This seems to be the behavior you are encountering.

To address this issue, consider incorporating an aria-activedescendant or tabindex attribute when the box gains focus. Implementing this solution may require a bit of JavaScript.

It's important to note that you don't necessarily have to rely on the hover state to make that control accessible. One alternative approach involves including an offscreen (or clipped) button/link that is not a direct child of the hidden (display:none) box. If you opt for this method, be sure to familiarize yourself with the aria-owns attribute.

As long as the button or link is properly marked up (or has a tabindex="0" set), and isn't truly hidden from accessibility tools, it should be feasible to navigate to it using the tab key.

Answer 5

Answer №3

Consider adjusting the attributes within the MainContainer class to achieve the desired effect.

.MainContainer {
  width: 100%;
  height: 100px;
}
.MainContainer .HiddenUntilHover {
  display: none;
}
.MainContainer:hover .HiddenUntilHover, .MainContainer:focus .HiddenUntilHover {
  display: block;
}

Answer 6

Consider adjusting the attributes within the MainContainer class to achieve the desired effect.

.MainContainer {
  width: 100%;
  height: 100px;
}
.MainContainer .HiddenUntilHover {
  display: none;
}
.MainContainer:hover .HiddenUntilHover, .MainContainer:focus .HiddenUntilHover {
  display: block;
}

Answer 7

Answer №4

Hover effects can pose accessibility challenges, as elements that appear on hover may not be easily accessible to all users. This becomes particularly problematic for keyboard navigation and touch screen devices like smartphones or tablets.

To address this issue, one approach is to use focusin and focusout events instead of relying solely on hover effects. By structuring your HTML code differently and adding some JavaScript, you can create a more accessible solution:

<div id="outer">
<div id="hover">
...
</div><!--hover-->
<button>Your button which only appears on hover</utton>
</div><!--outer-->

And in the JavaScript:

$('#outer').on('focusin', __=>$('#hover').classNames.add('keep-visible'));
$('#outer').on('focusout', __=>$('#hover').classNames.remove('keep-visible'));

This script will toggle a "keep-visible" class when an element within #outer receives focus, making the hidden element visible. The class is removed when focus leaves the last element within #outer.

While onfocusin/out events are not standard, they are widely supported by major browsers, including IE. Firefox introduced support in version 52.0, indicating their importance for accessibility and usability.

Answer 8

Hover effects can pose accessibility challenges, as elements that appear on hover may not be easily accessible to all users. This becomes particularly problematic for keyboard navigation and touch screen devices like smartphones or tablets.

To address this issue, one approach is to use focusin and focusout events instead of relying solely on hover effects. By structuring your HTML code differently and adding some JavaScript, you can create a more accessible solution:

<div id="outer">
<div id="hover">
...
</div><!--hover-->
<button>Your button which only appears on hover</utton>
</div><!--outer-->

And in the JavaScript:

$('#outer').on('focusin', __=>$('#hover').classNames.add('keep-visible'));
$('#outer').on('focusout', __=>$('#hover').classNames.remove('keep-visible'));

This script will toggle a "keep-visible" class when an element within #outer receives focus, making the hidden element visible. The class is removed when focus leaves the last element within #outer.

While onfocusin/out events are not standard, they are widely supported by major browsers, including IE. Firefox introduced support in version 52.0, indicating their importance for accessibility and usability.

Tab functionality for a hover state

Answer №1

For those interested, check out the Codesandbox demo showcasing this feature in action

Answer №2

Answer №3

Answer №4

Similar questions

Exploring NextJS with Typescript

What is the best way to determine the width of a device, rather than just the

Automatically remove the entered data

Can Page Transitions be implemented when linking to an external website?

Guide on adjusting the height of the material ui popover that appears when an option is selected

Performing React axios requests to an Express API on a Heroku server deployment

The last image in the Bootstrap 4 carousel maintains a wider width than the slider itself, not resizing to fit within the slider during animations when the screen is adjusted

Is there a way to set the starting position of the overflow scroll to the middle?

What is the best way to vertically center my text on the right and left sides of an image?

What is the best way to retrieve the current route or path using typescript?

The FileReader encountered an error because the first parameter is not a 'Blob' type

Eliminate the need for pressing the "tab" key on my website

Limit the size of images with CSS properties like max-height or max-width

Switch background color multiple times on click using JavaScript loop

Tips on modifying the background color of a read-only field in an edit form

Utilizing React to send email communications

"Experiencing a problem with Next.js 13 where the User Context is not functioning properly outside of _app

What are the consequences of directly modifying prevState in React's setState method?

When implementing javascript_pack_tag in Rails, an EOFError may occur

Is it possible for me to designate a specific class for the rev value?