I have a component that, upon a hover, shows a button and a link that you can click on. This is not a menu... just a box in the middle of the page.
For accessibility, I would like a user to be able to tab into the container (happens now, and displays the content in the .HiddenUntilHover class) AND also continue to tab to the button and link that show up on the hover/focused state.
Right now you can focus on the container and see the hover state; however, when you tab it just goes to the next element and does not allow you to tab to the button or link WITHIN the hover state.
Pseudo code example:
/* My component .jsx */
<div tabIndex="0" className="MainContainer">
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
/* I would like to be able to tab to these clickable things! */
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
And my SCSS:
.HiddenUntilHover {
display: none;
}
MainContainer:focus,
MainContainer:hover,
> .HiddenUntilHover {
display: block
}
I ran into this issue a few days ago and I solved it using css classes to make the hovered content accessible via keyboard navigation.
The way I got this working was to use css pseudo-classes to ensure that when the div element is active & focused that the buttons inside also display. Specifically the additional use of :focus-within & :focus-visible should ensure that when you tab over the list items, their contents are also displayed and keyboard accessible.
.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>
I am also clickable
</div>
</div>
</div>
</body>
Here's a link to the Codesandbox demo of this working
When the box is in focus, tabbing further to the button will make the box blur, which will hide it, and its contents, so focus will move to the next accessible element. I think this is the behavior you are experiencing.
You might consider using inserting an aria-activedescendant or tabindex attribute when the box comes into focus. This requires a little javascript.
Strictly speaking, you don't need to rely on the hover state to make that control accessible. You could have an offscreen (or clipped) button/link that is not a DOM child of the hidden (display:none) box. If you take this approach, read up on the aria-owns attribute.
As long as it is marked up as a button or link (or has a tabindex="0" setting), and is not 'really' hidden, it ought to be possible to tab to it.
Try increasing the properties of the class MainContainer
for example.
.MainContainer {
width: 100%;
height: 100px;
}
.MainContainer .HiddenUntilHover {
display: none;
}
.MainContainer:hover .HiddenUntilHover, .MainContainer:focus .HiddenUntilHover {
display: block;
}
Elements appearing on hover are inherently inaccessible. You are experiencing one side of the problem with your code, where it is difficult to make it keyboard accessible.
But think about touch screens that have no real concept of hover: is there some way to reach your button on a smarphone or tablet?
For a more pragmatic answer, if you need to stay with hover, a less hacky solution than the two already posted ones could be the following:
use focusin and focusout events. See for example this question for explanations and differences with focus/blur, and this w3school doc for browser compatibility.
You will have to structure your HTML differently, such as:
<div id="outer">
<div id="hover">
...
</div><!--hover-->
<button>Your button which only appears on hover</utton>
</div><!--outer-->
As well as use a bit of js:
$('#outer').on('focusin', __=>$('#hover').classNames.add('keep-visible'));
$('#outer').on('focusout', __=>$('#hover').classNames.remove('keep-visible'));
With a corresponding .keep-visible class which will leave the element display:block (I'm not a CSS expert, I let you write the code).
The overal functionning is the following: when some element within #outer takes the focus, the focusin element is fired due to bubbling. In the event, you put your class .keep-visible which makes the element to stay visible.
The focusout event is fired when the focus leaves the last element within #outer. At that point you remove the .keep-visible class, which makes the element to disappear.
According to the link above, onfocusin/out aren't standard, but are supported by all major browsers including IE. Firefox is the last one to implement it in 52.0, so it's a kind of defacto standard; we can reasonably expect that it won't disappear soon.
im trying to make the button in hover state while the cursor still in the submenu but can't figure out. Really need help! Thanks!
function hideAllCat() {
$("#categories").hide();
}
hideAllCat();
$("#tab50").mouseover(function(){
hideAllCat();
$("#categories").slideDown();
});
$("#categories").mouseleave(function() {
hideAllCat();
});
http://jsfiddle.net/G5RtR/24/
Your #tab50 element are not the parent to #categories element, therefore you cannot use the pseudo-class :hover. :hover only works when the object is right under you mouse arrow. That being said, you now have 2 (++) possible solutions.
Make #tab50 parent to #categories. The when the sub-menu expands, the #tab50 also expands correspondingly.
Use javascript to do the job. $("#categories").mouseover(function({$("#tab50").css({'background':'#abc','color':'red'})});
And remember to change the colors of #tab50 back to normal in $("#categories").mouseleave();
Note:
#categories should be a class instead of an id, since hideAllCat() should hide all categories, and one cannot have more than 1 id in a html file.
I've been looking for a way to easily style checkboxes even in those cases where I don't have labels but I haven't found any answer that completely satisfied me so I decided to try and find a way by myself so that all the others might find it useful.
This is what I ended up with.
CSS Checkbox without label
What I do is basically style the after elements and set pointer-events to none so you'll be able to click true the after element.
This allows us to let the checkbox handle the click and change its state from checked to unchecked and we'll then style the after element depending on the checkbox state.
This will be the unchecked style
.check:after{
pointer-events: none;
background: white;
content: ...
....
}
And then we'll have our checked style
.check:checked:after{
background: green; /* Change background and maybe image */
....
}
Please notice that the original checkbox will be still visible under the after element since we can't hide it (hiding it will end up hiding after and before elements too) so you can't play with transparency on your after element but you can still play with background image position and background color as I did in the example.
I hope this will help you with your styles! :)
I'm trying to add a downward-pointing chevron (basically a down arrow) from the FontAwesome icon set to a form select box. I've removed the default styling from the select box and added the icon as a pseudo-element after the form. It's working as-intended in a jsFiddle, but not on the site I'm working on.
It seems like the issue may be that the background: transparent; styling on the select isn't working the same on the site as in the fiddle, but I'm not sure why that would be the case. I know I could make the icon visible by increasing the z-index, but then the select dropdown won't show when the icon is clicked (as it does in the fiddle).
Edit: I need to have the dropdown show up when the icon is clicked; this is the case in the fiddle, but doesn't work with a higher z-index on the pseudo-element
Edit 2: Example of accepted solution is in this fiddle; also removed link to production website.
Any thoughts on what's happening here?
Seems as you have 2 different problems - positioning and functionality. Currently your website doesn't display the arrow at all. And even if it did, clicking on the arrow would not open the dropdown list. Simply putting it on top, may work in some browsers, but AFAIK would not be a cross-browser solution.
Per functionality, add 'pointer-events:none' to the arrow alement. This will make sure that it doesn't handle any clicks and they will be propogated to the select elemnt.
Regarding your positioning:
Instead of changing the z-index, simply set the min-width to N pixels and remove the absolute positioning from the arrow.
In CSS selector ordering:after
Remove `position:absoulte;`.
In CSS selector select.orderby
Change width:100%; to min-width: 200px; (or any width you need)
Hope this helps!
You have z-index: -1 on this .woocommerce-ordering:after in your css. Make it 0 or larger than 0 and it works.
I have an image with buttons overlain on it. Because the buttons are semitransparent, and I don't want the labels to be, I've overlaid a span on each button (with 100% opacity). To make sure that the spans don't intercept all the clicks, I used the pointer-events: none; css property on the spans.
Here's the structure of the markup (Jade):
div.slide
div.controls.buttons
button.move.forward
button.move.back
button.info
div.controls.icons
span.move.forward.icon.ion-chevron-right
span.move.back.icon.ion-chevron-left
span.info.icon.ion-information
.icon.ion-* are styles for the ionicon icon font
It looks like this when rendered:
The problem is, that because I have pointer-events:none;, I can't use :hover or :active on the .icons span. Is there a way to propogate the click event to the element below without using pointer-events: none?
Am I going to have to put a listener on each button then trigger the click event using javascript? Or is there a nicer way?
Codepen example here