Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility.
Thats the code.
<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">
any help on that?
Thanks in advance.
"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text."
Source: https://equalizedigital.com/accessibility-checker/empty-button/
It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css.
More info: How to hide a text and make it accessible by screen reader?
You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.
Alternatively, you can use the attribute aria-label="button text here" to give the button a label.
Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation
I want to create a button on toolbar of Ckeditor that I can highlight words. When words are highlighted, there are "x" button next to them so that we can click on them to remove the highlighting effect.
<span class="highlight">sample <span class="remove-highlight></span></span>
Implementing highlight is OK for me but the close button (x) is a problem.
Does anyone have any idea?
Thanks a lot
you shouldn't need the second span. if you have the css rule for remove-highlight you can do:
$("#X").on('click',function(){
$("span").removeClass("highlight);
$("span").addClass("remove-highlight");
});
but you don't have to physically bind the remove-highlight rule to the html.
I use 2 ng-click to try to do a toggle effect. first one bind to says a button, the other one used on body tag. I expect when I click the button my stuff shows up and when I click anywhere on the body, my stuff hide.
But angularjs seem unlike jquery.
http://plnkr.co/edit/KG4b9B1gac53a8JkRBvu?p=preview
What is the approach to achieve that?
the poblem here is, that clicking the button also triggers clicking the body. here a plunkr to show what i mean.
you could add your click event to the body after clicking the button.
TL;DR how can I get this self-explanatory JSFiddle to work?
From the W3C:
The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
The basic idea, HTML:
<form>
<label>
<input type="text" />
after focusing in input, there should be no blur when clicking here
</label>
</form>
but blur should fire when clicking here
And JS:
$("form, label").on("blur", function() {
alert("you're not going to see this");
});
It doesn't work. A more illustrative example is in this JSFiddle.
I also tried focusout, with this JSFiddle, but (presumably because it bubbles up from the input), it always fires.
I could probably rig up what I need with a hack like this: https://stackoverflow.com/a/5049387/458614 but I'd rather not have to.
Edit: There are lots of related questions and I have read all that I could find, none of which help. Some talk about setting tabindex=0 on the form or label elements. I have tried this in various permutations but it doesn't help. JSFiddle here. If you put it on the form, blur events do fire when you click outside the form. However, it doesn't apply to any of it's children: it won't pick up anything if you click on the input and then outside the form.
Edit 2: I don't really understand some of the answers posted so far and none seem to really... work. Anyway, to clarify, here is what I am trying to accomplish:
In my app, you can add tags to documents. When you click the "add tag" button, a previously-hidden text input field pops up and is focused. And then...
Clicking outside (on blur) should close the text input field again
Pressing enter should add the tag and close the input field
Clicking the "add tag" button should also add the tag and close the input field
The problem is that #1 and #3 are incompatible. The "add tag" button needs to perform a different action based on whether the text field is open or closed, but because I can only achieve #1 with an onblur event on the text field, the text field is closed by the time any action happens on the "add tag" button for #3.
Here is a JSFiddle with my best attempt so far.
The thing I think you are looking for is
e.stopPropagation();
This Fiddle here shows a little different way to handle it ... it put the hide on a window click (which would blur the input anyways) except on the label, which it would allow the click event to stop inside the label.
Happy coding!
use the below code to achieve the desired
$(document).on("blur", "label",function() {
$("div").append("form or label blurred<br>");
});
Here is the demo Fiddle
Try this it should work
.focus {
border-color:red;
}
$(document).ready(function() {
$('input').blur(function(){
$('input').removeClass("focus");
})
.focus(function() {
$(this).addClass("focus")
});
});
Add this piece of js in your Fiddle. you added listener for label but blur happens on anchor tag.
$("form a").on("blur", function() {
$("div").append("form or label blurred<br>");
});
according to your explanation i have create a demo
$("form > label >a").on("blur", function() {
return false
});
$("#outsideform > a").on("blur", function() {
alert("but blur should fire when clicking here");
});
Check the Demo here
For a while, I am posting an intermediate development. But this definitely will help you where exactly you should look for. The jquery implementation but not your javascript.
This is the real concern.
I have added 3 lines at different places. no big changes.
Added an || $("input").css("visibility") == "visible" to the if
condition
Added $("input").css("visibility","hidden"); to the inner else condition
$("input").css("visibility","visible"); to the outer (and last) else condition.
Please note this is intermediate, you need to click twice after a submit of non-empty text.
If I get time, I would post the correct working thing.
This is the fiddle.
tobek, your JSFiddle with my best attempt so far is almost there. The problem is your selector at the bottom in this section of code:
$("input").on("blur", function(){
$("input").hide();
});
You stated the problem correctly in your comments when you said: "THE PROBLEM: we never get in here because it's already been hidden because the input blurred".
Change the above section to this and I think you'll have what you're looking for.
$("input-blur label").on("blur", function(){
$("input").hide();
});
Because the "Add tag" link is inside the label clicking it doesn't trigger your "blur" function.
I have a textfield and a button on the page:
<textarea class="txCS" id="text-area"></textarea>
<span id="search-button">Search</span>
What I try is simple, write some text in the textfield and click "Search".
browser.TextField("text-area").TypeText("Some Text");
browser.Span("search-button").Click();
TypeText() works, I see my text gets written on the textfield, Click() also works because I see WatiN highlights it when it clicks the button, but nothing happens when it clicks the button.
When I click the button myself still nothing happens, but when I type something in the textfield manually and click Search then everything works, as if the page knows if a human is interacting with the page and allows searching...
I montiored the events fired when I type someting in the textfield and then tried to fire them using WatiN:
searchBox.FireEvent("onmouseover");
searchBox.FireEvent("onmousemove");
searchBox.FireEvent("onmousedown");
searchBox.FireEvent("onfocus");
searchBox.FireEvent("onmouseup");
searchBox.FireEvent("onclick");
searchBox.FireEvent("onkeydown");
searchBox.FireEvent("onkeypress");
searchBox.FireEvent("onkeyup");
searchBox.FireEvent("onchange");
searchBox.FireEvent("onblur");
That didn't work either. Am I doing something wrong here?
Just as a reference for others the problem with your code is that you are trying to click a span instead of a button. Unless you 100% sure that the clickable element is a span you should use the following code with Watin:
browser.Button("search-button").Click();
And that should do the trick