Wrong keyboard focus order - a11y - javascript

I have created an application in React.js with satisfying all WCGA accessible guidelines. But currently I'm facing some issues like
The keyboard focus always starts from first interactive element (back
button) regardless of the caret/cursor position in the document.
To understand this issue, I am adding a portion of source code where the user can enter their first name and last name. I have also added a back button on the top left of the same page.
Please find the code below:
<section >
<button onClick={()=>this.goback()>Back</button>
</section>
<section >
<form className="form-example">
<fieldset>
<legend>User Details:</legend>
{this.state.errors && this.state.errors.length? <section>
{this.state.errors}
</section> : null}
<section className='input-fields'>
<label> First Name:
<input
type="text"
aria-label='First Name'
id = 'name'
aria-required="true"
onChange={this.onchangeHandler}
value={this.state.firstName}
name="firstname"
/>
</label>
<label> Last Name:
<input
type="text"
aria-label='Last Name'
aria-required="true"
onChange={this.onchangeHandler}
id='lastName'
value={this.state.lastName}
name="lastName"
/>
</label>
<button type="button" id='submit' onClick={()=>this.submitForm()}>Login</button>
</section>
</fieldset>
</form>
</section>
People with visual impairments can become disoriented when tabbing takes focus someplace unexpected, or when they cannot easily find the content surrounding an interactive element. This means when an user places the cursor at the "first name" field and presses the "tab" button, the focus is going to the back button (which is the first interactive element in the page), but it's expected to go to the "last name" field.
scenario
- An html page contains multiple interactive elements. A user with some visual disabilities places the cursor in an element in the middle of the page, and presses tab key to move the focus to the very next element.
Issue
- The focus is going to the top of the page (first interactive element).
Can anyone suggest a solution to fix this issue?

Related

Aria-live and showing/hiding a form

I have an Angular 14 app where I display some content. There is a button to put this into "edit mode" wherein I hide the content and show a form. When the user edits the form and clicks "done", the form is hidden and the updated content shows.
This works fine, but I am trying to make this accessible. I added an aria-live to the part with the form and when it is shown the entire form is read out loud using VoiceOver on Mac, but you don't know it's a form. You can tab to the fields and edit the form, though, and then click Done and the form goes away.
However, how do I let unsighted users know that (1) a form has appeared and then (2) the form have disappeared and the regular content has re-appeared?
I have made a stripped down Stackblitz to illustrate.
It's basically this HTML:
<div class="container">
<div class="row">
<div class="col">
<div *ngIf="!showForm" aria-live="polite">
<h1>
Hello {{ myForm.controls.fname.value }}
{{ myForm.controls.lname.value }}
</h1>
<button class="btn btn-secondary" type="button" (click)="onEditForm()">
Edit Greeting
</button>
</div>
<form [formGroup]="myForm" *ngIf="showForm" aria-live="polite">
<h3 class="sr-only">Edit Greeting Form</h3>
<div class="form-group mb-4">
<label for="fname">First Name</label>
<input
type="text"
id="fname"
formControlName="fname"
class="form-control"
/>
</div>
<div class="form-group mb-4">
<label for="lname">Last Name</label>
<input
type="text"
id="lname"
formControlName="lname"
class="form-control"
/>
</div>
<button type="button" class="btn btn-primary" (click)="onDoneForm()">
DONE
</button>
</form>
</div>
</div>
</div>
ARIA live regions aren't well suited for elements containing a lot of text or other things. The screen reader will read them all at once, and, for long things, it's rarely the best thing to do because the user can't interrupt or pause the read, or if he/she does it, the rest is kind of lost.
A much better thing to do for forms is to put the focus on the first input field. The first label will be read as well as the field type, and so the user will know that he/she has to enter some information, and then will press tab to go to the next field, and so on.
Additionally to that, you can use ARIA live, but not on the form or content shown itself. The best use of ARIA live is for displaying short strings saying "The form is shown", "Content is loading", "Your request has been submitted", "There are 12 search results", etc.

Edge browser populating multiple textboxes

I'm having some problems with textboxes in Edge browser. When I click on a textbox (regular <input type="text"), it shows some options I entered before. That's fine but when I select one, other textboxes gets affected. Here is a screenshot:
You see in this image, in the modal div, I selected Notebook and the textbox at the background also changed. They have different name and id attributes and also I haven't even picked anything yet on the modal, just hovering on the items in the dropdown already affects the textbox at the background.
What could be causing this? I've already checked several times that they have different attributes. Here is their markup:
This is for the modal:
<div styleName="field-container">
<label className={classes.label} htmlFor="termName">Name:</label>
<input type="text" styleName="field-container__input-text field-container__input-text--long" name="termName" id="termName" required autoFocus autoComplete="off" />
</div>
This is for the background:
<div styleName="field-container">
<label className={classes.label} htmlFor="name">Name:</label>
<input type="text" styleName="field-container__input-text field-container__input-text--long" name="name" id="name" required autoFocus autoComplete="off" />
</div>
This Edge dropdown show "Manage Personal Info..." at the bottom by the way.

Find 'text' in Span and enter in input and click button.... jQuery

In Wordpress I have a 'single' template for a certain post type. One of the metas displayed on the page is an address which is displayed in a span.
Additionally I have a FacetWP template which returns other posts. There is a single 'facet' for location.
I need to take the address from the span and enter it into the input and effectively hit 'return' on the input. This will trigger a refresh of the results which will now be sorted according to their proximity to the address entered in the location input.
So the markup abstract is in effect this..
<span>1 main street, london, uk</span>
<input type="text" class="facetwp-location" value="" placeholder="Enter location" autocomplete="off" id="facetwp-location">
Does anyone know how I might achieve this?
UPDATE:
This is the FULL markup associated with the input. Ordinarilya user would begin typing in the area and a google list of addresses would appear. The user would select one and the facets would be triggered upon making that selection. Alternatively an address could be fully entered manually and the user may hit enter.
<div class="facetwp-facet facetwp-facet-location facetwp-type-proximity" data-name="location" data-type="proximity"> <span class="location-wrap"><i class="locate-me"></i><input type="text" class="facetwp-location" value="" placeholder="Enter location" autocomplete="off" id="facetwp-location"><div class="location-results facetwp-hidden"></div></span>
<input class="facetwp-radius facetwp-hidden" value="250" id="facetwp-radius">
<input type="hidden" class="facetwp-lat" value="">
<input type="hidden" class="facetwp-lng" value="">
</div>
Screenshot of page's markup;

Position of cursor in WKWebView with an editable paragraph in iOS

Is there anyway to get the position of the cursor in a WKWebView in iOS that contains an editable paragraph (a paragraph with attributed contentEditable set to true)?
EDIT: To add additional information, the editable div can contain other subnodes
If you have access to document and mouse position inside the view you can use document.elementFromPoint(x, y);
This can be done in multiple ways using HTML5 (using autofocus atribute) or using javascript (document.getElementById("IDHERE").focus(); - using focus event). I will write all in one code snippet uncomment and use it based on your requirement.
//if u commnet the second form
let domObject = document.getElementById("lname"); // refer which object to focus
domObject.focus(); // event to trigger focus on the refereced dom object
//throw error till second form is uncommented
<!-- html5 way the most easiest way -->
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname" autofocus><br>
<input type="submit">
</form>
<!-- autofocus refers where to focus -->
<!-- unncoment below and comment above -->
<!-- javascript way -->
<!--
<form action="/action_page.php">
First name: <input type="text" id="fname"><br>
Last name: <input type="text" id="lname"><br>
<input type="submit">
</form>
-->

I want to use Jquery to live swap input field names

I have a webpage where I am using Jquery to add form fields dynamically and all is well. Below is a sample of how the fields are named. Basically when the user wants more fields then they hit a button and it inserts the two fields and increments the values of the next inputs and creates a container div surrounding the fields.
<fieldset id="dynamicField">
<div id="fieldID1"><ul><li>
<label for="headertext_1">Header Text</label>
<input id="headertext_1" name="headertext_1" size="70" value="My Header Text" />
</li>
<li>
<label for="blurblink_1">Link</label>
<input id="blurblink_1" name="blurblink_1" value="http://foo.bar" size="70" />
</li></ul></div>
<div id="fieldID2"><ul><li>
<label for="headertext_2">Header Text</label>
<input id="headertext_2" name="headertext_2" size="70" value="My Next Header Text" />
</li>
<li>
<label for="blurblink_2">Link</label>
<input id="blurblink_2" name="blurblink_2" value="http://bar.foo" size="70" />
</li></ul></div></fieldset>
Okay, so now what I need to add is a way for these fieldsIDs to be reordered - not only on the page, that would be easy enough, but I also need to rename the field names so that my backend server processing still works.
So for example:
If I have 1,2,3,4,5 different group of fields on the page I want to be able to click a few buttons to move 5 to this order on the screen and named correctly as well:
1,5,2,3,4
Thoughts?

Categories

Resources