I'm trying to improve the accessibility of a button which tests a connection. If the connection is successful, the button text changes to 'Success'. If not, it changes to 'Not Working'. They look something like this:
<button aria-label="success">Success!</button>
<button aria-label="failure">Not Working</button>
I'm trying to find a way to alert the user of the content change of the button. So far, I've added aria-labels to read the 'success' or 'not working' title, but these are only read to the user if the user tabs/moves away from the button and then back onto it after the status has changed.
I've also tried wrapping the button's text in a <span> with a role="alert" in hopes that would notify the user that the text has changed, but no luck there either:
<button aria-label="failure"><span role="alert">Not Working</span></button>
I've also tried wrapping the button in a <div aria-live="polite"/>, but I have suspicion that this isn't working because no new elements are being added to the page, but rather the content of the elements has changed.
What's a good way to alert users of dynamically changed text content?
Thanks!
You were close with your attempts. You can have use aria-live and is the most appropriate solution. You don't have to add elements to the DOM for aria-live to work. Changing the text of an element is sufficient if you're using the default aria-relevant value. (If you don't specify aria-relevant, you get "additions text" as the default value.)
But you have to put aria-live on the element that is changing. In this case, the button itself. I tried the following and it worked just fine:
<button onclick="myclick6()">change it</button>
<button id='livebutton' aria-live="polite">Success!</button>
function myclick6() {
document.getElementById("livebutton").innerHTML = "Not Working";
}
Just Create simple div with display none.
<div id="dynamicText" aria-hidden="true" aria-live="assertive" style="display:none"></div>
After that dynamically append the value inside the above div.
$('#dynamicText').html('Success');
Or
$('#dynamicText').html('Not Working');
Related
Summary: I am trying to force a change event to fire on an HTML element, without actually changing it, but the event does not seem to fire.
My scenario: There is a page (created by someone else) that is designed to hide certain fields until a value from a certain dropdown is selected, at which time the dependent fields will appear. But in some scenarios, the dropdown should be autopopulated and fields should appear by default. So I am trying to trick the page into showing the dependent fields when it is first loaded. I do something like this:
form.field('THEDROPDOWNFIELD').$el.trigger('change');
But nothing happens. I found that
form.field(‘THEDROPDOWNFIELD’).setValue(form.field('THEDROPDOWNFIELD').$el[0][1].value); //dummy value, first value in the list
form.field('THEDROPDOWNFIELD').$el.trigger('change');
will fire the change event. For whatever reason, $el.trigger('change') does not trigger the change unless the DOM element's value truly has changed. The problem is I don't want the dummy value in that dropdown to be there.
Summary (again): Is there a way to force the dropdown's element change event to fire when the selected value in the dropdown has not actually changed?
This snippet works ok (uses JQuery):
$('#toChange').bind('change', function() {
$('#result').text('select changed');
})
$('#triggerChange').bind('click', function() {
$('#toChange').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="toChange">
<option>---</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
</form>
<br>
<button id="triggerChange">Click to trigger change</button>
<div id="result"></div>
Your code doesn't seem to be failing, so it must be something related to the DOM or the way the other guy has implemented this effect. It is hard to guess what your problem might be. So my suggestion is as follows:
Check if its really implemented to trigger on radiobutton change and not on a click event handler on a div/other element that's not directly related to the radio button.
Check if your HTML code is failing.
Provide more code snippets that you think might be related.
In my mini-project here, I need to hide the Shop button and the Content div when the user clicks on the textbox. I am attempting to do it using ng-hide.
For some reason there is an error with the module.
Error: error:nomod
Module Unavailable
I was able to partly get it working here, but I need to hide the elements when someone clicks on the textbox, before they start typing.
I need to get this working in Firefox only.
What am I missing?
jsFiddle
I've changed your code a bit. You can try this out:
<input type="text" name="hideBasicInfo" ng-click="hideBasicInfo = true" />
<div ng-hide="hideBasicInfo">
When someone's press the textbox I'll set the property hideBasicInfo true. (via ng-click)
The button I need the script to click is setup like this:
<div id="closer" style="visibility: visible;">
<input style="height:32px" type="button" onclick="javascript:showIt('hide');" value="Click here to return to AdventureQuest">
</div>
The thing that I can't figure out is how to reference the button as a variable, since the button has no id the getElementByID() won't work. I think that in order to reference the button I need to reference the <div> element somehow.
Your question is confusing.. you need a selector to find the button? $('#closer>input[type=button]') ...
and in the question title you say clicks on a button automatically? trigger a click on it:
$('#closer>input[type=button]').trigger('click');
You can use
getElementByTagName(input);
This will give you back an array of all input tags on the page.
If this is the only input tag use
getElementByTagName(input)[0];
If you use jQuery, you can access it easier by fetching the div first and then selecting the input. Use the .trigger() to trigger actions.
I am trying to add javascript to set Focus on a button, and hope to make the button look just the way it does when a user 'tabs' thru the HTML Form to reach the button.
The page that I am working on has an button element:
<input type="Submit" id="myBtn" class="myBtnClass >
In javascript function, I set focus to it using:
$("#myBtn").focus() When this function is invoked, I can see change of button image. Also, when I click 'Enter', the form does get submitted. However, in this case, when the image changes, I don't see the "Dotted inline" that generally appears on buttons.
but the dotted line Does appear when a user "tabs" to that button.
Am I expected to do anything other than $("#myBtn").focus()" ?
you can use css property:
`outline`
Could be running in IE7 compatibility mode, or using the wrong doctype.
See this similar question for more info and possible solutions: CSS 'outline' property in IE, and jQuery errors
I need to hide a text input field with javascript. Changing its type attribute to hidden does not work in IE (security issue).
What would be the best way to do it?
Note: No jQuery or other lib can be assumed.
I assume you have to show and hide the text field dynamically based on changing conditions in the form, otherwise you'd just make it an <input type="hidden"... to begin with.
Keep your code that shows and hides the field as it is, but also catch the onsubmit event.
In the submit handler, get your text field via document.getElementById(...) (or by accessing document.forms[i]) and check to see whether or not it's hidden.
If it is hidden, create a new DOM node for an <input type="hidden" ...> field and add that node to the form, probably via myform.appendChild(...). You'll have to give it the name your server-side code expects. Copy the contents of the hidden text field into the newly created type=hidden field, then return from your submit handler, allowing the standard submit to continue.
You could also just un-hide the text field on submit, but you'd have to move it "off screen" also or the user would see it reappear during submit processing.
Try wrapping it in a div or span and then setting the display style to none when you want to hide it, and then to block (if you used a div) or inline (if you used a span) when you want to show it.
document.myform.myelement.style.display = 'none'
works as expected even in Internet Explorer.
The only way you can change it is before you append it to the DOM. You can make a new element and then replace the current one with it.
Look at replaceChild and createElement since you want to do manual DOM scripting. I assume you know what to do.
EDIT: "Hidden" fields as far as I know are sent. Have you checked whether they are? And you can also just do position:absolute; left:-9999em; to offset them.