Make keyboard tab action act as mouse hover - html

Question

I am using a slightly modified version of this: https://codepen.io/ferry/pen/ZYVwxz (Thank you Michael Ferry).
HTML:
<div class="accordion">
<ul>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
</ul>
</div>
CSS:
<style>
.accordion {
width: 100%;
max-width: 1140px;
height: 560px;
overflow: hidden;
margin: 20px auto;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
list-style-type: none;
display: table-cell;
top:0px;
vertical-align: top;
position: relative;
width: 16.666%;
height: 520px;
background-repeat: no-repeat;
background-position: top center;
transition: all 500ms ease;
}
.accordion ul li div {
display: block;
overflow: hidden;
width: 100%;
}
.accordion ul li div a {
display: block;
height: 520px;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 0px;
box-sizing: border-box;
color: #fff;
text-decoration: none;
transition: all 200ms ease;
}
.accordion ul li div a * {
opacity: 0;
margin: 0;
width: 100%;
text-overflow: ellipsis;
position: relative;
z-index: 5;
white-space: nowrap;
overflow: hidden;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
.accordion ul li div a h2 {
text-overflow: clip;
font-size: 24px;
/*text-transform: uppercase;*/
margin-bottom: 0px;
top: 435px;
color:#000;
}
.accordion ul li div a p {
top: 440px;
font-size: 13.5px;
color:#000;
}
.accordion ul li:nth-child(1) {
background-image: url("1b.jpg");max-height:400px;
}
.accordion ul li:nth-child(2) {
background-image: url("2b.jpg");max-height:400px;
}
.accordion ul li:nth-child(3) {
background-image: url("3b.jpg");max-height:400px;
}
.accordion ul li:nth-child(4) {
background-image: url("4b.jpg");max-height:400px;
}
.accordion ul li:nth-child(5) {
background-image: url("5b.jpg");max-height:400px;
}
.accordion ul li:nth-child(6) {
background-image: url("6b.jpg");max-height:400px;
}
.accordion ul:hover li {
width: 16%;
}
.accordion ul:hover li:hover {
width: 100%;
}
.accordion ul:hover li:hover a {
}
.accordion ul:hover li:hover a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
#media screen and (max-width: 600px) {
body {
margin: 0;
}
.accordion {
height: auto;
}
.accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
</style>
I can't get it to display the "slide" when using the keyboard.
I have tried adding .active, :focus, role="button", aria-expanded="true" and tab-index to no avail.
Before I go bald, does anyone have a solution? (without using javascript)
Thanks so much!

Answer 1

If you use tabindex="1" on your li like <li tabindex="1">, you should be able to target them with :focus as
li {
&:focus {
// your stuff here
}
}
Right now what happened is when you press tab it selects the a element but the transformation is applied on the li.
If I take the code from Michael Ferry's code pen you will have the following lines.
HTML:
<h1>Responsive Accordion</h1>
<div class="accordion">
<ul>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
</ul>
</div>
<p class="about">
By Michael Ferry
</p>
<h1>Responsive Accordion</h1>
<div class="accordion">
<ul>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
</ul>
</div>
<p class="about">
By Michael Ferry
</p>
SCSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Montserrat:700);
// Accordion Height
$a-height: 250px;
// Position text along bottom
$text-offset: $a-height - 90;
// Page Title
h1 {
text-align: center;
font-family: Montserrat, sans-serif;
color: #333;
}
.accordion {
width: 100%;
max-width: 1080px;
height: $a-height;
overflow: hidden;
margin: 50px auto;
ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%; // 6 into 100
height: $a-height;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
div {
display: block;
overflow: hidden;
width: 100%;
a {
display: block;
height: $a-height;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
color: #fff;
text-decoration: none;
font-family: Open Sans, sans-serif;
transition: all 200ms ease;
* {
opacity: 0;
margin: 0;
width: 100%;
text-overflow: ellipsis;
position: relative;
z-index: 5;
white-space: nowrap;
overflow: hidden;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
h2 {
font-family: Montserrat, sans-serif;
text-overflow: clip;
font-size: 24px;
text-transform: uppercase;
margin-bottom: 2px;
top: $text-offset;
}
p {
top: $text-offset;
font-size: 13.5px;
}
}
}
}
// Background images
li:nth-child(1) {
background-image: url("http://michael-ferry.com/assets/accordion1.jpg");
}
li:nth-child(2) {
background-image: url("http://michael-ferry.com/assets/accordion2.jpg");
}
li:nth-child(3) {
background-image: url("http://michael-ferry.com/assets/accordion3.jpg");
}
li:nth-child(4) {
background-image: url("http://michael-ferry.com/assets/accordion4.jpg");
}
li:nth-child(5) {
background-image: url("http://michael-ferry.com/assets/accordion5.jpg");
}
li:nth-child(6) {
background-image: url("http://michael-ferry.com/assets/accordion6.jpg");
}
&:hover li,
li:focus ~ li{
width: 8%;
}
&:hover li:hover,
li:focus {
width: 60%;
a {
background: rgba(0, 0, 0, 0.4);
* {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
}
}
}
// Stack items
#media screen and (max-width: 600px) {
// IE gets fussy if this isn't here
body {
margin: 0;
}
.accordion {
height: auto;
ul,
ul:hover {
li,
li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
}
}
.about {
text-align: center;
font-family: "Open Sans", sans-serif;
font-size: 12px;
color: #666;
a {
color: blue;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
In the SCSS code I have added li:focus ~ li to target li's siblings and li:focus to the existing code to reproduce the animation.
I also recommend you to disable a element tabbing with tabindex=0 in order to avoid the user to scroll top again after tabbing through the slider.

Answer 2

Focus within fix this issue, and works fine
:hover, :focus-within {
your css
}
you can check MDN to learn more about focus-within