I have a screen where everything is fine until I encounter a file input.
I am aware the way that IE rendered the file input makes it two tab stops but for some reason on the first stop Jaws insists on reading the label of the previous field.
Jaws is reading My Field Edit type in text.
I then tab to the input and get My Field Edit.
I then tab again and get star mandatory My File Upload to activate press space bar.
I have tried various combinations of grouping aria-labelledby and aria-describedby but cannot get it to behave differently.
Any suggestions?
This is the chunk of HTML:
<!-- previous field -->
<div id="nodeW137" role="group">
<div >
<label for="nodeW137-MyField" >
<span >My Field</span>
</label>
</div>
<input class="tabindexSet" tabindex="131" name="nodeW137-MyField" id="nodeW137-MyField" maxlength="20" type="text">
</div>
<div id="nodeW138">
<div >
<div id="nodeW139">
<div >
<div id="nodeW141">
<div>
<div id="nodeW143-wrapper" role="group">
<!-- wanting this to be read -->
<div>
<label for="nodeW143">
<span aria-hidden="true" role="presentation">*</span>
<span >Mandatory</span>
<span >My File Upload</span>
</label>
</div>
<!-- input is here -->
<div>
<span id="nodeW143-span" role="link">Upload</span>
<input tabindex="132" aria-hidden="true" role="presentation" id="nodeW143" name="nodeW143" type="file">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
First of all i am pretty much a beginner to programming, so im sorry if i didn't explain it well. In my database i have stored over 30 questions, with 2 table names called 'vraag' (questions) and 'antwoorden'(answers). I display all the 'vraag'(questions) as a button seperately. When i click on the button there appears a popup menu with a few input fields. That'll look like this: here
the menu on the right is the menu that pops up when a button is clicked. The thing what i want to do is that when a question has been clicked, it doesn't matter which one. That the clicked question is pre filled in the input field under the "Vraag" which is in my code "inpt4". With my code now it only shows the first question, no matter which question i click on, instead of every question different. Here is my code:
<div class="vragen">
#foreach ($vragen as $vraag)
<br>
<br>
<button type="submit" class="{{ $vraag["class"] }}" onclick="openPopup()">{{ $vraag["omschrijving"] }}</button>
#endforeach
</div>
#foreach($vragen as $vraag)
<div class="popup" id="popup">
<!--<div class="id">
<label for="">ID</label>
</div> -->
<div class="antwoord">
<label for="">Antwoorden</label>
</div>
<div class="vraag">
<label for="">Vraag</label>
</div>
<br>
<div class="vvid">
<label for="">Volgende Vraag ID</label>
</div>
<div class="inpt1">
<input type="text" value="">
</div>
<br>
<div class="inpt2">
<input type="text" name="name">
</div>
<div class="inpt3">
<input type="button" onclick="closePopup()" value="Opslaan"/>
</div>
<div class="inpt4">
<input type="text" value="{{ $vraag["omschrijving"] }}">
</div>
<div class="inpt5">
<input type="text" value="">
</div>
<div class="inpt6">
<input type="text" name="name">
</div>
</div>
#endforeach
I recently downloaded a template to be used for login/signup on my page and am trying to figure out a class that can wrap up the upload button(font awesome icon) and the select file input control for an image.
Here is my code...
<html>
<head>
<--//Bootstrap support plugins->
</head>
<body>
<div class="wthree-form bg">
<div class="agileits-2">
<h2>Sign Up Here</h2>
</div>
<form action="signup.php" enctype="multipart/form-data" method="post">
<--These classes make the form look real good by wrapping up the font awesome icon with an input field->
<div class="w3-user">
<span><i class="fa fa-user-o"></i></span>
<input type="text" name="Username" placeholder="Username" required="">
</div>
<--Here is my problem->
<div class="w3-? ">
<span><i class="fa fa-upload"></i></span>
<input type="file" name="fileToUpload">
</div>
<form>
</div>
</body>
</html>
The question mark above is what needs a class to make the form wrap the upload icon together with a classy select file control to make it look good thanks...
The other wrap controls work perfectly well
I'm not sure that this will fix your problem, but it looks like you need to change your second form tag to a closing form tag.
change
<div class="w3-? ">
<span><i class="fa fa-upload"></i></span>
<input type="file" name="fileToUpload">
</div>
<form>
</div>
</body>
</html>
to
<div class="w3-? ">
<span><i class="fa fa-upload"></i></span>
<input type="file" name="fileToUpload">
</div>
</form>
</div>
</body>
</html>
I have an input on my website which whenever i click in it displays the following
I have the following HTML for the input
<div id="searchFieldSectionDiv" class="form-group">
<div class="btn-group" style="width: 100%">
<label class="sr-only" for="searchField">Filter results</label>
<div class="input-group">
<!-- TODO: Need to filter products section as the user types -->
<input id="searchField" class="form-control" placeholder="Type to search..." autocomplete="off">
<span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
<div class="input-group-append">
<div class="input-group-text">
<i class="fas fa-search" style="margin-right: 0px"></i>
</div>
</div>
</div>
</div>
</div>
I have tried adding type="search but it still displays the address box.
Not to sure on how to hide it, all other browsers seem fine, just Chrome.
Ideally i want to add this at top level so i dont have to keep adding this to every input but again not too sure which level to add it too (body maybe?)
You have to change autocomplete="off" to autocomplete="disabled"
Chrome stopped supporting autocomplete="off" that's why it isn't working but it doesn't understand if you use autocomplete="disabled" that's why this works for now
I have a pretty simple ng-if that's based on the length of an array. If the length is greater than zero, it displays the length. If it's zero, it says it's empty. It's displaying when the length is greater than zero, but not when it is zero. Anyone see what I'm missing here?
Here's my HTML (the ng-if's in question are on lines 5 and 9, but I thought I'd put the surrounding HTML in there in case there's something around there I'm missing):
<div class="employee-box" ng-repeat="employee in sigFigCtrl.companies[$index].employees">
<span class="glyphicon glyphicon-edit pull-right" ng-click="sigFigCtrl.toggleEmployeeEdit($index)"></span>
<span class="glyphicon glyphicon-remove pull-right" ng-click="sigFigCtrl.deletePerson(employee._id, $index, sigFigCtrl.companies[$parent.$index].employees)"></span>
<div ng-show="!sigFigCtrl.companies[$index].editEmployee">
<div ng-if="sigFigCtrl.companies[$index].employees.length > 0">
<p><b>Name:</b> {{employee.name}}</p>
<p><b>Email:</b> {{employee.email}}</p>
</div>
<div ng-if="sigFigCtrl.companies[$index].employees.length === 0">
empty array!
</div>
</div>
<div ng-show="sigFigCtrl.companies[$index].editEmployee">
<form name="editPersonForm" ng-submit="sigFigCtrl.editPerson(employee._id, $index)">
<div class="form-group">
<div class="col-md-12">
<input type="text" ng-model="sigFigCtrl.editPersonName" id="name" placeholder="Name of Employee" class="form-control" required></input>
</div>
</div> <div class="form-group">
<div class="col-md-12">
<input type="text" ng-model="sigFigCtrl.editPersonEmail" id="name" placeholder="Email of Employee" class="form-control" required></input>
</div>
<button>SUBMIT</button>
</form>
</div>
</div>
The problem is quite simple. You’re doing a repeat on sigFigCtrl.companies[$index].employees. Which means when there’s no elements it will never run. Think in it as loop like for each or for. If there are no elements the iteration will never run. That’s why you never actually reach the inside ngIf where you’re testing if it has elements or not. It’s stopped at the root
How do you separate a <label> from its <input> in separate <div>s but still have them linked?
I have an input and a label, and they are in the same div, and the functionality works. If I move the input to a sibling div (sibling in the context of bootstrap), the toggle functionality doesn't work:
<div ng-repeat="uniqJokeType in uniqJokeTypes">
<div class="row">
<div class="col-md-7 col-md-offset-1">
<div class="type-filter-button" ng-class="jokeCssClasses(uniqJokeType)" ng-click="jokeTypeClick(uniqJokeType)">
<label ng-bind="uniqJokeType"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked />
</div>
</div>
<div class="col-md-3">
<!-- I want to move the <input> here, but it does not work when placed here -->
</div>
</div>
</div>
Also, is this more of an HTML context issue, or an angular (maybe scoping?) issue?
Just add a for attribute on the label and an id on your input :
<label ng-bind="uniqJokeType" for="myInput"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked id="myInput" />