We Keep Coding

How can I add interactive semantics to a pseudo element with CSS or JavaScript?

I have a small carousel that plays automatically on page load, using HTML, CSS and JavaScript and definitely no jQuery.
To add a pause/play option there is a span with role="checkbox" followed by a label.
The label itself is hidden and has no content. The span has two pseudo elements. On first showing, the pseudo element shows the ⏸ character, controlled by a CSS ::after class. When clicked, the span has the class "is-clicked" added, at which point the ▶ character is displayed, controlled by another ::after class
It is focusable and can be activated with the keyboard by hitting the Enter key, but when I check with Lighthouse, I keep getting the "Focusable elements should have interactive semantics".
Why is this?
Here is the code:
/* detect keyboard users */
function handleFirstTab(e) {
if (e.key === 'Tab') { // the 'I am a keyboard user' key
document.body.classList.add('user-is-tabbing');
window.removeEventListener('keydown', handleFirstTab);
}
}
let checkboxEl = document.getElementById('checkbox');
let labelEl = document.getElementById('checkboxLabel');
labelEl.onclick = function handleLabelClick() {
checkboxEl.focus();
toggleCheckbox();
}
function toggleCheckbox() {
let isChecked = checkboxEl.classList.contains('is-checked');
checkboxEl.classList.toggle('is-checked', !isChecked);
checkboxEl.setAttribute('aria-checked', !isChecked);
}
checkboxEl.onclick = function handleClick() {
toggleCheckbox();
}
checkboxEl.onkeypress = function handleKeyPress(event) {
let isEnterOrSpace = event.keyCode === 32 || event.keyCode === 13;
if(isEnterOrSpace) {
toggleCheckbox();
}
}
.link {
height: auto;
border: 1px solid #000;
margin-bottom: 1rem;
width: 80%;
display: block;
}
#carousel-checkbox {
margin-bottom: 1rem;
height: 50px;
width: 100px;
display: inline-block;
}
#carousel-checkbox input {
display: none;
}
#carousel-checkbox label {
display: inline-block;
vertical-align: middle;
}
#carousel-checkbox #checkbox {
position: relative;
top: 0;
left: 30px;
padding: 0.5rem 1rem;
background: rgba(255,255,255, 0.5);
}
#carousel-checkbox #checkbox:hover {
cursor: pointer;
}
#carousel-checkbox #checkbox:focus {
border: 1px dotted var(--medium-grey);
}
#carousel-checkbox #checkbox::after {
content: "⏸";
font-size: 1.5rem;
color: var(--theme-dark);
}
#carousel-checkbox #checkbox.is-checked::after {
content: "▶";
}
<div class="link">A bit of text with a dummy link to demonstrate the keyboard tabbing navigation. </div>
<div id="carousel-checkbox"><span id="checkbox" tabindex="0" role="checkbox" aria-checked="false" aria-labelledby="checkboxLabel"></span><label id="checkboxLabel"></label></div>
<div class="link">Another link to another dummy link</div>
Why is this? Is it because the pseudo elements don't have a name attribute or something like that?
I have tried a different way, by dropping the pseudo elements and trying to change the span innerHTML depending on whether the class 'is-clicked' exists or not, but although I can get the pause character to display initially, it won't change the innerHTML to the play character when the span is clicked again.

Short Answer
This is a warning rather than an error, it is telling you to check that the item actually is interactive.
Now you have got the interactivity on the element so you can ignore that issue.
Long answer
Why not just use a <input type="checkbox"> and save yourself an awful lot of extra work?
You can hide a checkbox with a visually hidden class.
This then allows you to do the same trick with a pseudo element as the visual representation of the state.
I have made several changes to your example that mean you don't have to worry about capturing keypresses etc. and can just use a click handler so your JS is far simpler.
Notice the trick with the label where I add some visually hidden text within it so the label is still visible (so we can still use psuedo elements!).
I then use #checkbox1 ~ label to access the label with CSS so we can change the state.
The final thing to notice is how I changed the content property slightly. This is because some screen readers will try and read out pseudo elements so I added alt text that was blank. Support isn't great at just over 70%, but it is worth adding for browsers that do support it.
Example
The below hopefully illustrates a way of achieving what you want with a checkbox.
There may be a few errors as I just adapted your code so please do not just copy and paste!
note: a checkbox should not work with Enter, only with Space. If you want it to work with both it should instead be a toggle switch etc. so that would be a completely different pattern.
let checkboxEl = document.getElementById('checkbox1');
let labelEl = document.querySelector('#checkboxLabel');
function toggleCheckbox() {
let isChecked = checkboxEl.classList.contains('is-checked');
checkboxEl.classList.toggle('is-checked', !isChecked);
checkboxEl.setAttribute('aria-checked', !isChecked);
}
checkboxEl.onclick = function handleClick() {
toggleCheckbox();
}
.link {
height: auto;
border: 1px solid #000;
margin-bottom: 1rem;
width: 80%;
display: block;
}
#carousel-checkbox {
margin-bottom: 1rem;
height: 50px;
width: 100px;
display: inline-block;
}
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
#carousel-checkbox label {
display: inline-block;
vertical-align: middle;
}
#carousel-checkbox #checkbox1 {
position: relative;
top: 0;
left: 30px;
padding: 0.5rem 1rem;
background: rgba(255,255,255, 0.5);
}
#carousel-checkbox #checkbox1 ~label:hover {
cursor: pointer;
}
#carousel-checkbox #checkbox1:focus ~ label {
border: 1px dotted #333;
}
#carousel-checkbox #checkbox1 ~label::after {
content: "⏸" / "";
font-size: 1.5rem;
color: #000;
}
#carousel-checkbox #checkbox1.is-checked ~label::after {
content: "▶" / "";
}
<div class="link">A bit of text with a dummy link to demonstrate the keyboard tabbing navigation. </div>
<div id="carousel-checkbox">
<input type="checkbox" id="checkbox1" class="visually-hidden">
<label for="checkbox1" id="checkboxLabel">
<span class="visually-hidden">Pause animations</span>
</label>
</div>
<div class="link">Another link to another dummy link</div>

In the end, I gave up on using a checkbox, due to the difficulties with iPad/iOS not responding to checkbox events. Whilst it worked in codepen on iOS it wouldn't work on the actual site. So I switched to a button.
Here is the code, which is fully accessible with no 'interactive semantics' warnings, shown with some dummy slides. The animation is based on having only three slides. If you wanted more or less, then the timings would have to be adjusted accordingly. All I need now is to style the pause button.
let element = document.getElementById("pause");
function toggleButton() {
element.classList.toggle("paused");
if (element.innerHTML === "⏸") {
element.innerHTML = "▶";
}
else {
element.innerHTML = "⏸";
}
}
element.onclick = function handleClick() {
toggleButton();
}
#carousel {
height: auto;
max-width: 1040px;
position: relative;
margin: 4rem auto 0;
}
#carousel > * {
animation: 12s autoplay6 infinite linear;
position: absolute;
top: 0;
left: 0;
opacity: 0.0;
}
#carousel .one {
position: relative;
}
.homeSlides {
height: 150px;
width: 400px;
background-color: #ff0000;
}
.homeSlides.two {
background-color: #0fff00;
}
.homeSlides.three {
background-color: #e7e7e7;
}
#keyframes autoplay6 {
0% {opacity: 0.0}
4% {opacity: 1.0}
33.33% {opacity: 1.0}
37.33% {opacity: 0.0}
100% {opacity: 0.0}
}
#carousel > *:nth-child(1) {
animation-delay: 0s;
}
#carousel > *:nth-child(2) {
animation-delay: 4s;
}
#carousel > *:nth-child(3) {
animation-delay: 8s;
}
#carousel-button {
position: relative;
height: 100%;
width: auto;
}
#carousel-button button {
position: absolute;
top: -3.5rem;
right: 5rem;
padding: 0 0.5rem 0.25rem;;
background: #fff;
z-index: 98;
font-size: 2rem;
cursor: pointer;
}
body.user-is-tabbing #carousel-button button:focus {
outline: 1px dotted #333;
}
body:not(.user-is-tabbing) #carousel-button button:focus {
outline: none;
}
#carousel-button button:hover {
cursor: pointer;
}
#carousel-button ~ #carousel * {
animation-play-state: running;
}
#carousel-button button.paused ~ #carousel * {
animation-play-state: paused;
}
<div id="carousel-button"><button id="pause" class="">⏸</button>
<div id="carousel">
<div class="homeSlides one">This is div one</div>
<div class="homeSlides two">This is div two</div>
<div class="homeSlides three">This is div three</div>
</div>
</div>

How to add animation when page change each other?

I am looking for way to make slowly changing of pages after I press button. I want to use only JS without jQuery. Now I have script which change blocks, but I use display none; I am not sure that I can add slowly changing of pages with this. I tryied to use tramsform property but doesn't work good. I need dont have any overflow. It has to look close to this https://tympanus.net/Development/PageTransitions/
var acc = document.getElementsByClassName("btn-arrow");
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function showNext(){
var parent = this.parentElement;
var nextToOpen = parent.nextElementSibling;
nextToOpen.style.display ="block";
parent.style.display ="none";
}
}
.big{
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: initial;
overflow: hidden;
}
.one{
background:pink;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-end;
}
.two{
background:green;
width: 100vw;
height: 100vh;
display:none;
}
.icon-arrow-down2{
font-size: 60px;
color: silver;
margin-bottom: 50px;
}
.btn-arrow{
background-color : rgb(255, 238, 192);
box-shadow: none;
border: none;
}
.btn-arrow:hover{
border: none;
}
button,
button:active,
button:focus {
outline: none;
}
<div class="big">
<div class="one">
<button class="btn-arrow" onclick="showNext()">
<span class="icon-arrow-down2"></span>
</button>
</div>
<div class="two"></div>
</div>

You have to play with css animations. I have added some modifications to point you in the right direction. But basically, my recommendation is:
All your pages have the same class with common styles (.page), and then each of them have different background-color.
You need a specific class (.page-visible) that will be added to the next page you want to display, and removed from current visible page. This class just controls visibility. Please notice that the previous class (.page) has display: none;, as is the common one for all the pages.
You will need a different animation for each movement (move up, move down, from left to right, from right to left). I just added one as an example in the code snippet.
And then the magic comes listening to the animationend event: you apply the animation to both pages (the current visible and the next page), make next page visible applying the .page-visible class, and listen to endanimation event. When it happens, just hide the prev page removing .page-visible class, and remove animation classes.
The code works for just this 2 pages (one and two), but you can easily optimize it. I recommend you to take a look at the original page you posted, check their css and their js (open chrome developer tools and go to Sources, they don't have the files minified so you will see how they do everything :).
Does this make sense to you? I hope it helps and point you in the right direction. Animations are super fun! :)
(EDIT: Ah! I added some width&height to the button to be able to see it, hehe, it's up in the left corner now).
var acc = document.getElementsByClassName("btn-arrow");
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function showNext(){
var visibleElement = document.getElementsByClassName('page-visible')[0];
var nextToOpen = visibleElement.nextElementSibling;
nextToOpen.addEventListener('animationend', () => {
visibleElement.classList.remove('page-visible');
visibleElement.classList.remove('page-moveUp');
nextToOpen.classList.remove('page-moveUp');
});
visibleElement.classList.add('page-moveUp');
nextToOpen.classList.add('page-visible');
nextToOpen.classList.add('page-moveUp');
}
}
.page{
display: none;
overflow: hidden;
width: 100vw;
height: 100vh;
justify-content: center;
}
.page-moveUp {
animation: moveUp .6s ease both;
}
#keyframes moveUp {
from { }
to { transform: translateY(-100%); }
}
.page-visible {
display: block;
}
.one {
background:pink;
}
.two {
background:green;
}
.icon-arrow-down2{
font-size: 60px;
color: silver;
margin-bottom: 50px;
}
.btn-arrow{
background-color : rgb(255, 238, 192);
height: 20px;
width: 50px;
box-shadow: none;
border: none;
}
.btn-arrow:hover{
border: none;
}
button,
button:active,
button:focus {
outline: none;
}
<div class="big">
<button class="btn-arrow">
<span class="icon-arrow-down2"></span>
</button>
<div class="page page-visible one"></div>
<div class="page two"></div>
</div>

Animate background-color on mouseenter event

I'm trying to have it so that when the mouse enters the .container elements the background-color of #facial element slowly transitions to white from blue.
I've read that you have to use jQuery's .animate() function to achieve this.
It doesn't seem to work. I've read on the forums you need something called JQuery UI, but those posts were older. I also do not see this option within my JsFiddle. Anybody know why this script is not working?
$(document).ready(function(){
$('.container').mouseenter(function(){
$('#facial').animate({backgroundColor:'#ffffff'},'slow');
});
});
JsFiddle Link

Try utilizing css :hover , existing transition property set to 8.5s
#test_box {
height: 50px;
width: 50px;
background: red;
transition: background 2s ease;
}
#test_box:hover {
background: green;
}
body {
background-color: #d6d6d6;
}
.container {
margin: 200px auto;
background-color: red;
width: 478px;
height: 200px;
}
#facial {
float: right;
width: 239px;
height: 200px;
background: #008aaf;
transition: background 8.5s ease;
}
#facial h1,
#facial h2 {
text-align: center;
margin-top: 30px;
color: #FFFFFF;
}
.container:hover > #facial {
background: #fff;
}
<div class="container">
<img src="http://s23.postimg.org/enn2yyh7v/Facial.jpg" />
<div id="facial">
<h1>Facial</h1>
<h2>Marketing Material</h2>
</div>
<div id="test_box">...</div>
</div>
jsfiddle http://jsfiddle.net/b008nczk/32/

Color animations need jQuery UI which extends the animate method.
https://jqueryui.com/animate/
In fact to animate the background-color with jquery you need the Color plugin.
https://github.com/jquery/jquery-color
Fiddle: https://jsfiddle.net/b008nczk/34/
$(document).ready(function () {
//1.1 On hover the background of #facial will turn white
$('.container').mouseenter(function () {
$('#facial').animate({
'background-color': '#ffffff'
}, 1000);
});
});
Also as a heads up when you include jQuery in jsfiddle it automatically includes jqueryui as well.

Got it working using CSS. The project started as an actual Jquery project, but ended up being completed with pure CSS. Thanks guys! Here are the results.
.container:hover > #facial {
background: #fff;
}
Results!

Jquery mouse hover color change

I am converting flash ad into html5 ad.
I am copying this demo link.
I just want to make mouse hover effect. In the demo if mouse goes to details text then the whole banner color changes to black and text of disclaimer appears. How to implement this?
This is my code JSFiddle
<div id = "wrapper" >
<div id="mainContainer">
<div id="text">
<img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" />
</div>
<div id="Div1">
<p id="discalimer">Details*</p>
</div>
</div>
</div>

If I understand your issue correctly this may help:
Demo Fiddle
jQuery has a built in .hover() method. Here I'm using it to toggle a class on the wrapper and show the hidden copy block.
JS:
$('#discalimer').hover(
function () {
$('#wrapper').toggleClass('hovered');
$('.copy').show();
}, function () {
$('#wrapper').toggleClass('hovered');
$('.copy').hide();
}
);

If you don't need animations, you can just do this:
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hovered');
}, function () {
$('#wrapper').removeClass('hovered');
}
);
And then use CSS for the styling:
.copy {display: none;color: white; padding: 10px;}
.hovered .copy { display: block; }
.hovered #mainContainer { background: black; border-color: black; }
.hovered #Image_Car { display: none; }
http://jsfiddle.net/veDY6/27/

Working demo
html
<div id="wrapper">
<div id="mainContainer" class="mcClass">
<div id="text">
<img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" />
</div>
<div id="Div1">
<p id="discalimer">Details*</p>
<p id="realDisclaimer" style="display:none">This is the real disclaimer</p>
</div>
</div>
</div>
css
#wrapper {
left: 50px;
top: 50px;
width: 300px;
height:250px;
position: absolute;
}
#realDisclaimer{
color:white;
}
#Div1 {
top:142px;
left:76px;
width:50px;
height:30px;
position: absolute;
}
.unselectable, #Div1 p {
-webkit-user-select: none;
/* Chrome/Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor:default;
}
.mcHoverState {
background-color:black;
}
.mcClass {
background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
}
#mainContainer {
width:300px;
height:250px;
overflow: hidden;
position: absolute;
}
#Image_Car {
position:absolute;
overflow: hidden;
margin:60px 8px;
left: -120px;
}
js
$(document).ready(function () {
bannerAnimation();
$("#Div1").mouseenter(
function (evt) {
$("#text").hide();
$("#mainContainer").removeClass("mcClass").addClass("mcHoverState");
$("#discalimer").hide();
$("#realDisclaimer").show();
})
.mouseleave(
function (evt) {
$("#realDisclaimer").hide();
$("#text").show();
$("#discalimer").show();
$("#mainContainer").removeClass("mcHoverState").addClass("mcClass");
});
});
function bannerAnimation() {
//Jquery Animation
$("#Image_Car").animate({
left: "30"
}, 500, function () {
$("#Image_Car").animate({
left: "10"
}, 200);
});
}

You Again!
did you use that windy plugin or no?
i didn't understand what you want but maybe this is your answer:
first you should know about color:color in web is Red Green Blue, You can take the X-point and Y-point of your jquery code and write some math formal for that:
jsfiddle
#wrapper:hover #mainContainer
{
background:silver;
}
#wrapper:hover
{
background:black !important;
box-shadow:3px 3px 3px rgba(186,202,228,1);
color:white;
}
and a demo in black color demo

Can I use jquery to on image hover fade on load text to new text dependent on each image

I have 6 images that when hovered on I would like there corresponding text to fadeIn in the same position one overtaking the other on each image hover.
I am able to show/hide on hover but I am unable to get each element to remove when a new image is hovered.
I have been working on a fiddle here http://jsfiddle.net/PvVg9/
I am new to jquery and the help would really be appreciated.
$('.trigger').hover(function() {
$('.hide').fadeOut(function() {
$('.panel').fadeIn();
});
});
$('.trigger-two').hover(function() {
$('.hide').fadeOut(function() {
$('.panel-two').fadeIn();
});
});

No need for jQuery if you are happy to use CSS3:
JSFIDDLE
HTML
<div class="trigger">Image 1<div class="panel">SHOW ME 1</div></div>
<div class="trigger">Image 2<div class="panel">SHOW ME 2</div></div>
<div class="trigger">Image 3<div class="panel">SHOW ME 3</div></div>
<div class="trigger">Image 4<div class="panel">SHOW ME 4</div></div>
<div class="trigger">Image 5<div class="panel">SHOW ME 5</div></div>
<div class="trigger">Image 6<div class="panel">SHOW ME 6</div></div>
CSS
.panel,
.trigger {
width: 100px;
height: 20px;
margin: 2px;
}
.trigger {
position: relative;
background: grey;
border: 1px solid black;
}
.panel {
position: absolute;
left: 100%;
top: -3px;
background-color: red;
border: 1px solid darkred;
visibility:hidden;
opacity: 0;
transition: visibility 0.1s linear 0.5s,opacity 0.5s linear;
}
.trigger:hover .panel {
visibility:visible;
opacity:1;
transition-delay:0s;
}
Or if you want them one on top of the other then: JSFIDDLE

I do not understand what you want, I guess a tooltip JQuery plug may fit your need.
Check this tool.
I also update your example, you can have a look at it jsfiddle.net/PvVg9/154/