Solution 1 :

It breaks because when the user clicks tab it selects the link and the link automatically goes up. To stop them from focusing on a link with tab simply add the attribute tabindex="-1" to your <a> tag like this <a href="#cta" tabindex="-1">See more</a> Working example: https://codepen.io/Ajjarindahouse/pen/qBbjERM

Solution 2 :

I managed to solve this by handling selector focus-within like this:

.edito:focus-within .inner {
  top: calc(100% - 195px);
  transition: top 0s ease;
}

Can be tested here: http://jsfiddle.net/tzfoc0sr/

Problem :

I am encountering a bizarre behavior. I have simple blocks that contains a hidden overflow. A hoover event is triggered to display the hidden overflow. the hidden part has position absolute.

HTML:

<div class='container'>
  <div class="edito">
    <img src="https://via.placeholder.com/273x211" />
    <div class="inner">
      <p>Lorem ipsum dolores</p>
      <a href="#cta">See more</a>
    </div>
  </div>

  <div class="edito">
    <img src="https://via.placeholder.com/273x211" />
    <div class="inner">
      <p>Lorem ipsum dolores</p>
      <a href="#cta">See more</a>
    </div>
  </div>

  <div class="edito">
    <img src="https://via.placeholder.com/273x211" />
    <div class="inner">
      <p>Lorem ipsum dolores</p>
      <a href="#cta">See more</a>
    </div>
  </div>
</div>

CSS:

.edito {
  width: 273px;
  height: 211px;
  position: relative;
  border: 2px solid;
  overflow:hidden;

}

.edito .inner {
  position: absolute;
    left: 0;
  width: 100%;
  height: 195px;
  transition: top 0.8s ease;
  top: calc(100% - 50px);
}

.edito:hover .inner {
  background-color: purple;
  top: calc(100% - 150px);
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
img {
  position:relative;
}

Now when someone (with accessibility issue for e.g) tries to press tab to navigate between these blocks, the style is broken.

You can see this here:

jsfiddle.net/0ubqwfxc

Try to press tab to navigate to the third block; the style of first ones is broken.

Why this happens and how to fix it?

Thank you

Comments

Comment posted by Alireza

please provide your code here so that it can reachable for future visitors and also make it easier for others to contribute.

Comment posted by fromTheFifties

I did. It is on the shared jsfiddle link. You prefer if I copy all? Done thank you

Comment posted by fromTheFifties

Yes, totally agree, but the main goal is to keep accessibility active and give user the possibility to select link. Adding

By

Leave a Reply

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