I could have been in a search for this. Once the form is submitted , if the errors are available it shows on top as the validation summary (May be it will be done). Here is the critical. When i click on the error message, the focus should go to the corresponding error field. The field may be in the same tab or other tabs or other panels etc
Could it be possible to achieve?
A simple way to achieve that would be to make the error message a label for that particular field:
<label for="myField">some error</label>
&
<input id="myField">
Clicking on the message would then automatically focus the field, no matter how far in the DOM the two elements are from each other.
An input can also be focused by JavaScript (see .focus() documentation). In both cases, the input needs to actually be present in the DOM before it can be focused.
Related
I have a sign in form that when given incorrect credentials an error message pops up. I want this error message to be focused when loaded, that way the user can easily hear the message and then tab down to the fields. I am having trouble identifying the best solution to implement.
aria-live works perfectly in reading the error, but I would like if the error message also focused. What is best practice to read and focus the error message? Would it be to add a ref?
I'm not sure why you'd like to focus the error message since it's read out loud, it should be enough. Also it might be confusing to force focus, maybe the user is in the middle of something else - which is the benefit of using an aria-live "polite" value for instance. Additionally using both aria-live & auto focus may result in reading the error message twice, but this needs to be tested.
This being said, to focus a DOM element you need to use a ref. Create it with useRef and assign it to the element. If the element to focus is rather a React component, you might need forwardRef. If the element is non-focusable (like a div, a span or a paragraph) you will have to add a tabIndex={-1}. Call ref.current.focus() when you need to.
Using a negative value for tabIndex will make them temporarily focusable & will not break the natural focus order of the page.
Sources :
https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/tabindex
https://reactjs.org/docs/hooks-reference.html#useref
https://reactjs.org/docs/react-api.html#reactforwardref
Is there a way to write semantic HTML for checkboxes where it won't read it as "unlabeled, check box"?
The following html results in "unlabeled, check box, not checked, Yes" to be read by the screen reader.
<p>Is this checkbox selected?</p>
<input type="checkbox">
<label>Yes</label>
Opening NVDA's Elements List on Interactive Accessibility: Training 3.2 which claims this is the accessible example also results in "unlabeled, check box" treeview entries to be generated.
Is there a way to write checkboxes to ensure they aren't marked as "unlabeled"? Or is this a quirk of NVDA itself?
This is actually a Chrome browser defect. I'm not aware of a workaround, but one would not be recommended, as it could alter correct behavior in other browsers and screen readers.
For more information check the NVDA issues list on GitHub:
Unlabeled is prepended before labelled radio elements while in elements list
I see your example is incomplete with IDs, but I understand what issues you are talking about. It will happen no matter how good is the markup with native or ARIA checkbox controls.
Add some id in your label and add aria-labelledby in the input. The value of aria-labelledby should be the id of the lebel. Hence your code block should be something like this:
<p>Is this checkbox selected?</p>
<input type="checkbox" aria-labelledby="someId">
<label id="someId">Yes</label>
I think this code is having some problem. Because when I click on a tag to remove it, the click event will propagate to host div which results in focusing the input box.
Is there a way or any attribute that will prevent the input box from getting focused on removing a tag?
I am working on a form that contains a grid panel with checkbox selection model to select users. After the submission the users ID's (as well as other form field values) are POSTed to the server. This works perfect.
But I need to add a custom validation for that special (custom) field - if no user is selected, display an error icon with an error tooltip text. Here is the custom field component screenshot:
As You can see within the image, there is a title (done by xtype: label), then an empty space, that is currently filled with label with no text (the area marked by red rectangle) and the grid itself. If I select a user (or more), their names (blanked data) are displayed in that empty label.
But within a process of validation I need to show an error icon with tooltip somewhere here if no user is selected.
I can check for the selected data using
grid.getSelectionModel().getSelection().length > 0 ? true : false
therefore I am wise of the selection is valid or not, but I do not know how to display that error icon, nor where should I best display it. I think the best position for that icon should be within the section title label (either left or right, this does not matter that much).
Any help on how to display that icon is highly appreciated!
As nobody answered and I found a solution myself, I want to put it here so that maybe somebody could tell me about a better approach.
So after the validation
if(grid.getSelectionModel().getSelection().length > 0) {
// valid, let's submit the form...
} else {
// invalid, let's show the error hint
}
I only need to address the concrete label and set the text for it - while adding a concrete HTML markup that is the same as of when error icon is displayed by calling form.isValid():
label.setText(myPreviousText
+ '<span role="presentation" class="x-form-error-msg x-form-invalid-icon" data-errorqtip="<ul class="x-list-plain"><li role="alert">'
+ 'MY ERROR MESSAGE'
+ '</li></ul>" style="display: inline-block;"></span>', false);
Now I have the error icon with a styled hint. I set the label text back (set back to valid) on grid.select event and check the validity again on grid.deselect event.
I have a form designed with the GUI designer with input textfields and buttons. I have attached actions to the buttons. When I call up the form with showForm(Form,null), the textfields are not accepting input and the buttons are not triggering the action. This is happening only for this form. Initially, there was the problem solved here Unable to call a specific form from a button in codenameone and then the problem solved here Simulator keeps defaulting to old Main form. What could be the issue now?
As far as I know there may be some issues as you say, but first need to see code
In the form after you added the text fields did you select the text field component and press action event?
Assuming you did that you should get a callback method in the Statemachine class.
This call will be invoked only when the user changes the content of the text field. You can run in the debugger and set breakpoints/step into code to see what is going on.