There is a drop-down in my web application. This drop-down is user-defined (not using the <select> element). Inside this drop-down there is a down arrow. This arrow is creating by using background images on an absolutely positioned span. This span tag is blocking the click event of the drop-down. So, I've added pointer-events:none to the span tag. After adding this, it's working fine everywhere but in the Edge browser. Does Edge support pointer-event: none? If not, what is the alternative for pointer-event: none in Edge.
Below is the code which I used:
<div class="multi-dd" id="multi_dd_ddlProfession" role="application" cascadesto="ddlDiscipline">
<input class="multi-dd-txt" id="txtProf" role="combobox" aria-readonly="false" aria-describedby="spMultiExit" style="width: 260px;" aria-label="Multi Select Control Professions " type="text" readonly="readonly" value="Select All">
<span class="nir"></span>
</div>
.nir{
height: 28px;
margin-left: -30px;
vertical-align: bottom;
overflow: hidden;
pointer-events: none;
}
There are some bugs which may be the root cause:
FocusEvent Sequence should be: focusout, focusin, blur, focus.
FocusEvent Sequence is: blur, focusout, focus, focusin.
and a no-repro test:
#testID {pointer-events: none;}
<ul>
<li>MS Dev</li>
<li id="testID">example.com</li>
</ul>
The first version of Microsoft Edge was introduced in Windows 10 Build 10049. Pointer Events have been supported since Windows 10 Build 10240.
References
"Project Spartan" in the Windows Technical Preview build 10049 – IEBlog
Windows 10 Build 10240
RemoteIE - Microsoft Edge Development
HTML5test - How well does your browser support HTML5?
CSS 'pointer-events: none' rule not working
DOM Level 3: FocusEvent sequence
Edge raises "blur" event while "click" event processing is not completed
Problem with focus
Click event not raised when Edge is not in focus
Unifying touch and mouse: how Pointer Events will make cross-browsers touch support easy – David Rousset
Related
I am trying to put outline on a font awsome while navigating with keyboard, but it is not working. I tried to add aria-hidden="true" tabindex="1" like suggested in another post but it still doesn´t work.
<div class="faContainer">
<a class="homeAnchor" href="" aria-hidden="true" tabindex="1">
<i class="fas fa-home fa-2x">
</i>
</a>
</div>
CSS
a:focus{
outline: 3px solid white;
}
tried also targeting i element
Few issues to address here:-
Never use positive tab index
A positive tab index disrupts the natural tabbing order, you want tabindex="0" in order to make something that isn't normally focusable able to accept focus. It is also not needed in your example as <a> elements are focusable by default.
aria-hidden has nothing to do with focus
aria-hidden is to do with the accessibility tree. By adding this attribute you are telling assistive technology (i.e. screen readers) to ignore this item. Remove this.
empty hrefs can get ignored
Your href="" attribute can be ignored in certain circumstances as it is not a valid hyperlink.
Add href="#" during testing if you do not know the URL you want to point it at currently.
If it is going to be used to make a change on the current page use a <button> element instead as that is semantically correct (i.e. it is going to work with a JavaScript function rather than function as a link).
how to find out why outline isn't working
The above CSS (on a dark theme) should work fine.
On Google Chrome -> Open developer tools (F12) -> inspect the element.
Top right you will see Filter :hov .cls +
Select :hov and click the :focus checkbox.
There will be a rule set that is over-riding your a:focus rule, either by being more specific (e.g. a.homeanchor:focus) or by using !important.
That rule is likely to be outline:0 or outline:none so you could also try doing a search within your CSS for those terms to identify the issue.
So I have tried manipulating the style within the chrome inspector and copying it directly into my stylesheet, but it is not reflected when I run it again on chrome. The code runs fine on firefox otherwise and also if I manually input the change in chrome inspector.
Not sure what the issue is as I've tried adding the !important as well and making sure of the hierarchy is of the right order.
css code
.select2-container--default .select2-selection--single {
border: 1px solid #ced4da;
}
.is-invalid .select2-container--default .select2-selection--single {
box-shadow: none;
border: 1px solid #dc3545 !important;
}
html
<div class="form-group d-flex flex-wrap justify-content-between {{ $errors->first('contact_name', 'is-invalid') }}">
<label for="contact_name">Name</label>
<span class="message">{{ $errors->first('contact_name', ':message') }}</span>
<input type="text" class="form-control" id="contact_name" name="contact_name" placeholder="e.g. John Smith">
</div>
I have also cleared the cache and checked to see the source file that everything is as per updated. It is just not showing on the result ONLY in chrome
Sometimes it needs hard reload.
Hold down Ctrl and click the Reloadbutton. Or, Hold down Ctrl and press F5.
Ctrl+F5
You can also clear the cache using the chrome debugging tools. Press F12 then select Application then select Clear Storage make sure the cache checkboxes are checked, then click the clear site data button.
Try Hard Reload by right click on reload button.
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.
The problem
In IE11 the image in the following code is clickable to activate/toggle the input in the label:
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
While the image in the this exactly same code but inside of a <form> is not clickable to activate/toggle the input:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>
(Demo at jsfiddle)
Note that in the example animation above I'm clicking the second image, which doesn't work, but clicking on the text works (just did that to demonstrate).
This was tested and reproduced on:
IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.
IE 11.0.9600.16438 on Windows RT 8.1 tablet.
IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.
IE 11.0.10240.16431 on Windows 10
This issue does not occur in IE9, IE10, Microsoft Edge, and other browsers.
Questions:
Can this be solved without JS while still using image tags?
If not, what other possible solutions are there?
(Optional) Why doesn't the image in the second example trigger the input element (while doing it in the first)?
One way to fix this is with pointer-events: none on the image, and adjusting the label with for example display: inline-block. (pointer-events is supported in IE11.)
label{
display: inline-block;
}
label img{
pointer-events: none;
}
(Demo at jsFiddle)
Is a bit older question, but as its pretty high in google search, I'll post here one more answer that fixes this in all IE versions.
.
The checkbox/radio has to be outside of label, it has to have own unique ID and label has to have attribute for which contains the ID of checkbox/radio its related to:
<label for="my_lovely_checkbox">Hello good friend</label>
<input type="checkbox" value="Hello" id="my_lovely_checkbox">
If you done that and if you use PHP (which you probably are), you can use this piece of code:
if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) {
?>
<script>
$(document).ready(function() {
$("label img").on("click", function() {
$("#" + $(this).parents("label").attr("for")).click();
});
});
</script>
<?
}
I know its JS, but there is actually no other fix for =< IE10 without JS usage.
It detects all IE, versions (IE10 and 11 included, have no idea about Spartan tho, i think it does not detect that one).
Ps.: Answer above me does not actually work for IE8, IE9 and IE10. Just so you know.
Designed specifically for input buttons such as <input type="submit" value="Button Name">, this round button style uses the sliding doors technique that's assembled from a single image.
Demo: Click to review the source code and demo the code in action
Demo: Click to see a video demo of the style in Mac browsers: Firefox, Safari, Chrome and Opera
This button style enables the following:
Resolves wide button issue for long
button names for IE browsers.
Resolves an issue with IE browsers when the right sliding door piece would float on the page when the button is hidden server side.
Resolves fragmented text issue for IE browsers
when scrolling down and then back up the page.
This is the perfect alternative for
designers when you can't use the ASP
.Net button control such as
<asp:Button id="b1" Text="Submit"
runat="server" /> in your code
Cross compatible
for safari, ie, firefox, chrome and
opera. watch video
I think you just need to change one pseudo-class.
span.button input.form_button:hover {
background-position:left -39px;
color:#FFFFFF;
}
Should be
span.button:hover input.form_button {
background-position:left -39px;
color:#FFFFFF;
}
Edit: It's line 52 of the demo source