Develop Reference

Screen reader skips new inserted elements

I am building a React site and have to support accessibility across browsers.
On my site I have inputs and I perform the validations only on blur, if the input is not valid - an error message is inserted after the input.
My problem is that the screen reader skips this new error element and jumps to the next one - it seems that the reader calculates the next element when it's focused on the previous one (in my case the input). and therefore when I "tab" and blur out of the input it goes to the next tabbable element - and skips the new error.
The new error element that's getting skipped has all required attributes, (it is getting focused if I do shift + tab from the next element that was reached after the input). I have also tried adding aria-live="assertive" to the new error message element but it doesn't help.
Any solution for this?

The aria-invalid and aria-describedby recommendations by #jongibbons is good but the actual announcement of the error message when it's added should be handled by aria-live. You mentioned you tried aria-live but that it didn't work. It might depend how you were trying to use it.
If you try to add that attribute dynamically when the error message is generated, then it won't work. aria-live must exist on the page before you add text to it. For example, the following won't work:
Before the error:
<input>
After the error
<input>
<div aria-live="polite">this is the error message</div>
If the <div> is added dynamically, it won't be announced even though it has aria-live.
Instead, your code should look like this:
Before the error:
<input>
<div aria-live="polite"> <!-- empty area for error message --> </div>
After the error
<input>
<div aria-live="polite">this is the error message</div>
In this case, "this is the error message" will be announced by screen readers when the new text is injected into the page.
And as #jongibbons said, associate the error message with the input field via aria-describedby.
<input aria-describedby="foo">
<div id="foo" aria-live="polite"> <!-- empty area for error message --> </div>

For the behaviour you describe to be accessible, you want to look at using the aria-invalid and aria-describedby attributes.
When a field has an error, toggling aria-invalid on the <input> from false to true will cause screen readers to announce the change in state.
Adding an aria-describedby relationship between your <input> that's in error and the HTML element containing your error message should then also cause the screen reader to announce the error message.
<label for="email">Email address</label>
<input type="text" name="email" id="email" class="error"
aria-invalid="true" aria-describedby="email-error">
<p class="error-message" id="email-error">
Error: This doesn't look like a valid email address
</p>
Here's an example on MDN with code that might match what you need:
Using the aria-invalid attribute

JS - Input Element Value null before inspecting the element

I have a strange case here.
What I'm trying to do is injection of javascript into the page using chrome extension.
That works so far,
Idea is that javascript looks up value of an element and if matches "Hobart" it alerts.
The issue is that value is returning as null, BUT when I inspect the element in chrome, the script starts recognizing the value of the element.
But after page refresh, goes back to null.
The input field element is always displaying "Hobart" on the page.
Its like the page is not allowing reading of the element by javascript if element is not inspected. Any ideas whats going on?
Screenshot 1
Screenshot 2
Another SS of changing color to red after "enabling" value readout by inspecting.
Javascript And HTML part of the page I'm trying to get value from:
state = document.getElementById("sys_display.incident.assignment_group").value;
if (state=="Hobart") {
document.getElementById("sys_display.incident.assignment_group").style.color="red";
alert("Hobart");
};
<div class="input-group ref-container ">
<input id="sys_display.incident.assignment_group" name="sys_display.incident.assignment_group" aria-labelledby="label.incident.assignment_group"
type="text"
autocomplete="off"
autocorrect="off"
value="Hobart"
data-type="ac_reference_input"
data-completer="AJAXReferenceCompleter"
data-dependent="null"
data-ref-qual="true"
data-ref="incident.assignment_group"
data-ref-key="null"
data-ref-dynamic="false"
data-name="assignment_group"
data-table="sys_user_group"
class="form-control element_reference_input "
style="; "
spellcheck="false"
onfocus="if (!this.ac) addLoadEvent(function() {var e = gel('sys_display.incident.assignment_group'); if (!e.ac) new AJAXReferenceCompleter(gel('sys_display.incident.assignment_group'), 'incident.assignment_group', 'null', 'true'); e.ac.onFocus();})"
aria-required="true">
</div>

Angular 4 Error: Cannot find control with unspecified name attribute

I have used google place API following this tutorial but I am getting this error below:
Cannot find control with unspecified name attribute
I have tried also this all hint stackoverflow link
Code
<div class="form-group">
<input #search
type="text"
placeholder="search for location"
autocorrect="off"
autocapitalize="off"
spellcheck="off"
class="form-control"
[formControl]="searchControl"
name="searchControl">
</div>

You should post some code, we're not mediums !
But seeing your error, I would say you're using reactive forms, and you forgot to create your reactive forms.
This means on your input, you have [formControl]="" or formControlName="" attribute, which can't find the corresponding variable.
Could you post the related code of that please ?

Your HTML code looks fine for me, I think this has occurred because you have not initialized searchControl variable in the corresponding JavaScript/TypeScript file.
Add this line into your class in JavaScript/TypeScript file
searchControl = new FormControl();

Auto complete giving syntax error using with angular element

I have an input text box where i would like to implement the auto suggest with the words retrieved through http request
<input type="text" id="ingredients" ng-model="searchString" ng-change="callSuggestion()" ng-enter="getRecipesTracknPlan()" placeholder="Type of ingredients / recipe">
the autocomplete i am trying is
angular.element.('#ingredients').autocomplete({
source: $scope.suggestionPhrase
});
I am gettting an error of
Uncaught SyntaxError:Unexpected token (
how can i rectify this??

You've got a full stop/period after element, which is a function.

Problems with knockout-validation custom message template

I've not used Knockout Validation and I'm trying to get a feel for what can be done with it.
I'm trying to figure out if it is possible to display an icon rather than an error message to the right of an input tag when there is an error. And, if the user hovers over the icon, the error message is displayed.
Has anyone done this or have an idea of how to accomplish this?
Thanks.
EDIT: (more detailed example of what I'm trying to do)
Say I have the following in my view model:
var firstName = ko.observable().extend({required: true});
My HTML:
<input data-bind="value: firstName" />
My understanding is that if the first name textbox were left blank, then (by default) some text would be displayed to the right of the textbox stating that this field is required.
What I'm trying to understand is how to change the default behavior of displaying error text on the right to displaying an icon on the right which, when hovered over, will popup the error message.
So, a start would be something like:
<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">
<input data-bind="value: firstName" />
<input data-bind="value: lastName" /> //also required
</div>
<div id='myCustomTemplate'>
//This icon should only display when there is an error
<span class="ui-icon ui-icon-alert" style="display: inline-block"/>
//css/javascript would display this when user hovers over the above icon
<span data-bind="validationMessage: field" />
</div>
I have no clue if I'm using the messageTemplate feature correctly. I also wouldn't know what to bind the text to in the customTemplate in order to display the correct error message for each error. IOW, firstname and lastname could have custom error messages. If they are both using the same template, how does the template accomodate the custom error message?
I hope that makes sense.

It is possible to show an icon and to display the error message on hovering.
In one project we are doing something similar. We show a badge with a error number, but we use decorateElement to highlight the fields and errorsAsTitleOnModified to show the errors when hovering over the input.
To create a error messageTemplate you should wrap your template in a script tag. It works like templates of the ko template binding.
Inside the template you can access the validated observable by referring to 'field'. The error message is stored in the property 'error' of your observable.
<script type="text/html" id="myCustomTemplate">
<span data-bind="if: field.isModified() && !field.isValid(),
attr: { title: field.error }">X</span>
</script>
I have created a fiddle to show this in action: http://jsfiddle.net/nuDJ3/180/