we are adding ARIA support to our SPA website.
In application we have one activity area where we are showing dynamic messages from server based on validations.
We have added role='alert' and aria-live='assertive' to read those activity messages.
In FF and chrome its working fine however in IE its reading code like "left-brace left-brace txtErrorMessage right-brace right-brace" even if message there on screen
<div role="alert" aria-live="assertive">
<p class="scan-complete-text-auto">
{{model.txtErrorMessage}}
</p>
</div>
here txtErrorMessage will get populated runtime from api results.
we are using angular JS.
How to resolve this issue?
Try using ng-bind="model.txtErrorMessage" instead of {{model.txtErrorMessage}}
Try using ng-show or ng-hide, to hide the div until you have the message ready. The message length can be checked to show or hide the div itself. This will fix the issue.
Also no need for both role="alert" and aria-live="assertive". You can remove role="alert". JAWS + IE tend to read more than once for this combination.
Angular provides CDK APIs built in to handle this scenario.
https://material.angular.io/cdk/a11y/overview#example-1
#Component({...})
export class MyComponent {
constructor(liveAnnouncer: LiveAnnouncer) {
liveAnnouncer.announce("Hey Google");
}
}
Or else you can keep a simple span or div, and update your message programmatically.
<span
aria-live="polite"
class="ada-visuallyhidden"
[innerHTML]="yourCustomADAMessage"
></span>
Related
I have created dialogs using Angular Material, but so far haven't found a way to create one using Material Design Lite. Is there a workaround for it?
MDL has support for styling HTML5 dialogs but does not include any polyfills for them. So you must have a browser that supports them (like Chromium). Else use a polyfill like https://github.com/GoogleChrome/dialog-polyfill as pointed out by #manuel-84
<dialog id="dialog" class="mdl-dialog">
<h4 class="mdl-dialog__title">Hello User</h4>
<div class="mdl-dialog__content">
<p>Hello world from dialog!<p>
</div>
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button close">Disagree</button>
</div>
</dialog>
And using a button somewhere call
document.getElementById('dialog').showModal();
See Material Design Lite Components : Dialogs
I'm just a user of MDL, not an insider. But, as I understand it, Dialog support isn't there, but it's being worked on. Tagged for V1.1, but no idea what the schedule for that might be.
https://github.com/google/material-design-lite/pull/1762
Not a dialog per se, but what I am doing in one project is to have a form slide down, using jQuery you get some nice animation
Basically define the form in a card, set the height to zero and opacity to 0. Then execute the following script to reveal the dialog
$('#objects_card_holder').animate({
height: 400
},500,function(){
$('#objects_card_holder').animate({
opacity: 1
},100,function(){
$('#projectName').val('');
});
});
Then when the form is not required run another script to hide it.
$('#objects_card_holder').animate({
opacity:0
},
100,
function(){
$('#objects_card_holder').animate({
height:0
},
500,
function(){
});
});
Assuming that your card has the id objects_card_holder
Of course if you really need a dialog jQuery has it's own dialog.
see https://jqueryui.com/dialog/
The page loads without any of the images displaying on IE11 only, but refreshes them accordingly when we resize the browser intermittently (1/3 loads). We cannot replicate this with any of the other browsers. srcset works fine by itself with static content.
Here is a Plunker example of it not working in IE11.
Or quick and easy, the actual img html we're using:
<img data-ng-srcset="{{::image.url}}, {{::image.url2x}}" alt="{{::image.name}}"/>
The images or surrounding divs do not have any transitions, shadows or opacity applied.
The html renders fine with angular passing over and rewriting the srcset attribute correctly. The images just do not appear, only the alt tag. Wondering if this could be a call stack issue due to the intermittence of it, maybe a race condition with Picturefill loading before angular finishes a digest or something.
Cheers in advance!
A work around if you use PictureFill in a loop and in a specific case (not on all images of your application), is calling a function that launch PictureFill directly from HTML, after last item loaded (this is not the best practice but fix the IE11 problem) :
<picture><!-- Your image --></picture>
<span ng-if="$last">
{{ controllerAlias.launchPictureFill() }}
</span>
Came across this as a solution: http://tech.endeepak.com/blog/2014/05/03/waiting-for-angularjs-digest-cycle/
var waitForRenderAndDoSomething = function() {
if($http.pendingRequests.length > 0) {
$timeout(waitForRenderAndDoSomething); // Wait for all templates to be loaded
} else {
$window.picturefill();
}
}
$timeout(waitForRenderAndDoSomething);
The only issue that the blog post describes is here, so if anyone has anything better please let me know:
The $http.pendingRequests supposed to be used for debugging purpose only. If angular team decides to remove this, you can implement the same using http interceptors as suggested in this link.
When accessing my website built with AngularJS 1.2.0rc1 via the InAppBrowser within PhoneGap 2.7.0 on IOS, the contents of an ng-show flicker on the screen.
<form method="POST" action="" name="manualEntryForm" class="form-inline">
<div ng-show="showErrors && !manualEntryForm.$valid" class="errorMsg ng-hide">
One or more of the following fields are required:
<span ng-show="manualEntryForm.month.$error.required || manualEntryForm.day.$error.required || manualEntryForm.year.$error.required" class="ng-hide">Date needs to be present</span>
...
</div>
...
</form>
It doesn't matter if I default showErrors to false or test it more rigorously (showErrors === true), that block of error content will display and also show the actual error message associated (Date needs to be present).
I'm stumped as to how to address this. Should we not be using the Angular Form Validation within that ng-show? Why is it only causing an issue on IOS/Phonegap InAppBrowser?
I had the same problem. ng-cloak didn't solve the problem, so what solved the issue for me was to add
class="ng-hide"
to each element with the ng-show attribute, and now it doesn't flash the content on ios.
Try using ng-cloak to hide the element during compilation:
http://docs.angularjs.org/api/ng.directive:ngCloak
It might be showing up before the AngularJS compiler has had time to run. And it might only be showing in iOS/Phonegap because the webkit browser in UIWebView is nowhere near as fast as Mobile Safari, let alone a desktop browser.
As a workaround, I ended up removing ng-show, and instead adding an ng-class="{hidden: myCondition}", then defining .hidden { display: none; } in CSS. This removed the flashing.
I am trying to find Submit element. My HTML structure is as below.
<div>
<span class="combutton">Submit</span>
</div>
<div>
<span class="combutton">Cancel</span>
</div>
In browser using firebug I tried
$('div .combutton')[0].click()
which clicks on submit perfectly. But using selenium driver this element is not found. Please tell me how to do this using
driver.findElement(By.css("CSSSELECTORSTRING"))
What you did in Firebug shouldn't have any effect since it's clicking on a span and not the a inside it.
This should work, unless you omitted certain parts of your markup that would otherwise prevent it:
driver.findElement(By.cssSelector("div:first-child .combutton a")).click();
try that :
driver.findElement(By.xpath("//div span.combutton a[contains(.,'Submit')]")).click();
or
driver.findElement(By.xpath("//div span.combutton[0] a")).click();
I'm new to Selenium IDE and can't find exact answer to my question elsewhere.
I have Login form that loads error message in span tag using AJAX.
Code looks like this:
<dd class="field-error-template atk-form-error">
<i class="ui-icon ui-icon-alert"></i>
<span class="field-error-text">Incorrect login information</span>
</dd>
I used following Selenium code to verify that this span appeared on screen:
waitForElementPresent css=dd.field-error-text span
However it returns false so any other ideas? I don't want to put delay as I don't think it is good practice.
Thanks,
Gita
You got your classes mixed up; the selector should either be this
dd.field-error-template span
Or this
dd span.field-error-text
(or use both classes)