I noticed that on certain websites, if you want to tick a checkbox on or off, you just need to click the corresponding text. When I put a checkbox with some descriptive text on my page, I have to actually hit the checkbox for it to get ticked. How is the former effect achieved?
Consider using a <label> as in this example:
<input type="checkbox" name="call" id="willcall">
<label for="willcall">click on this text to select the checkbox</label>
This example from: http://www.askdavetaylor.com/make_text_adjacent_to_checkbox_clickable.html
I'm sure that they use a JS script to achieve this. It's most likely a label that is being clicked, and they might add an onclick() event to the label which uses the javascript to find the checkbox and add the CHECKED attribute to it. Sorry for not supplying code, but I hope that gives you some understanding on what those websites do.
Related
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 did some research but couldn't find usefull solution.
Is that possible to keep placeholder always visible? I mean when I pick any option it replaces placeholder spot, but I do not want this, the desired expectation is to keep placeholder visible all the time.
If you don't want users to see what they selected, but still track it in your app, you can make use of onChange event to capture what users selected, but still pass value={null} to react-select so it think that nothing is selected - and it will display the placeholder.
I have a checkbox that is updated from the model, but then the model is not updated clicking the checkbox.
Within a form I have:
<input type="checkbox" ng-model="acceptEula"> I have read the EULA and I agree
<button type="submit" ng-click="pay()" translate>Proceed to Pay</button>
{{acceptEula}}
Clicking the checkbox, I can see how {{acceptEula}} shows true or false, it works.
When I click the button, I put a breakdown in pay() function. $scope.acceptEula is always false. What could be the problem?
Sorry, the question was not detailed in order to simplify the problem. In reality, I used "ng-switch" in the form.
Finally I have found the problem: "This is a scope inheritance problem due to ng-switch creating it's own scope.". It is well explained at angularjs - ng-switch does not bind ng-model
The solution is to use dot in the model, for example $scope.form.acceptEula
I'm working on system where I have an ng-repeat populating from an array of elements, with a radio buttons setting a property. When it loads in, none of the radio buttons are selected, but when I select any of the radio buttons, it binds to the model appropriately. It works in a single format without the outer ng-repeat, so I'm not sure why it refuses to select the radio button from the model.
<div ng-repeat="selectedTag in selectedGroup.tags track by $index" ng-controller="ThemesEdit_TagStylesCtrl">
<div class="type-select">
<label ng-repeat="styleGroup in styleGroups.list" ng-hide="styleGroup.name == 'Settings'">
<input type="radio" name="tagType" ng-model="selectedTag.styleGroupId" ng-value="styleGroup.styleGroupId"/> <span>{{styleGroup.name}}</span>
</label>
</div>
<div ng-include src="another_page"></div>
<div class="clear-float"></div>
<p tag-example="selectedTag" data-style-group="styleGroup"></p>
</div>
I can see that the $parent.selectedTag.styleGroupId comes through on each selectedTag, and it triggers the options in the template that is brought in with ng-include, so I know that is pretty close to working properly. The only remaining issue seems to be that it doesn't automatically select a radio button with a defined ng-model.
I'm fairly new to angular, so it could be something completely obvious, but I was hoping someone could light my way. Thank you for any and all help!
Edit: Updated with two suggestions below. Still no joy, but thought I'd edit the code to the most current iteration.
I would say the solution is ng-value="styleGroup.styleGroupId", documentation here.
I feel pretty dumb - it was something simple that I overlooked. With a single instance, publishing with the name set in <input type="radio" name="tagType" ng-model="selectedTag.styleGroupId" ng-value="styleGroup.styleGroupId"/> <span>{{styleGroup.name}}</span>" worked fine. Once I stuffed it in an ng-repeat, it was publishing under the same name="tagType" and overwriting the selection. Sure enough, when I scrolled to the bottom of my page, the last set of radio buttons were checked appropriately.
Checking the docs, the name is optional, and removing it allowed all the radio button sets to populate properly. I haven't seen any ill effects on anything else - is there anything I should be watching for?
Thanks for the help/thoughts, everyone!
I think you should use ng-model="selectedTag.styleGroupId". selectedTag shouldn't be overwritten by your inner ng-repeat.
UPDATE:
Have a look at this SO answer ng-value needs to be set true.
When I add a label to a field in any form within my AngularJS app, it results in a behavior where clicking a field assigns focus to the field above, thus making it impossible to select a field.
The quick fix it to not use labels and just a different tag to replace labels, but it seems like an odd bug not being able to use labels for fields. Anyone else experience this lately?
Here is an Angular fiddle for solving this Angular riddle:
http://bit.ly/154zU1H
You messed up your close tags on the labels:
http://jsfiddle.net/ysQPt/
<label>Label 1<label>
<label>Label 1</label>