With the following markup:
<div class="paymentOption">
<input type="radio" name="paymentOption" value="1" />
<span class="marginLeft10">1-time payment using a different credit card</span>
</div>
Using CSS only, how do we select the div that contains a selected radio button? (is this possible?)
This is currently impossible with CSS. You can use jQuery though:
http://api.jquery.com/has-selector/
Related
I have a page structured as following.
<div>
<div>
<h2>header</h2>
<button>close button</button>
</div>
<div>
<div>some info</div>
<div roll='groub' aria-label='some general text about which checkbox is selected'>
<div>
<input type="checkbox" id="scales" name="scales" checked aria-label="scales">
<label for="scales">Scales</label>
</div>
<div>
<input type="checkbox" id="horns" name="horns" aria-label="horns">
<label for="horns">Horns</label>
</div>
</div>
</div>
</div>
I have my screen reader on and want to be able to tab from each ui component, and screen reader reads it out for me as I press tab key.
when it reaches to the div with roll of group, then it reads out the aria label of that div element plus all of its children!
What I want is to read only the aria-label of the div with roll of group and stops. Then only reads the aria label of the checkboxes when I tab into them.
any suggestion on what roll I should define for input elements so they get announced only when they are focused by tab key ?
The question should be how to use groups to build a screen reader friendly form.
When it comes to checkboxes or radio buttons, a group is the correct way to go, as it will bind the overall question to the controls, which are in tab order.
So that would be something like
Close button, button
Tab
some general text about which checkbox is selected, group
Scales, checkbox, unchecked
The group itself will not be focussed. But when focussing the first checkbox, the screen reader will announce the group’s name once. This will help screen reader users choose the right one. Once they change to the next checkbox, the group’s name will not get announced.
This is how it should work, since forms are used mainly by means of Tab and the user needs to get the info about what the checkboxes are about.
To follow the First Rule of Using Aria, you should use a <fieldset> element with a <legend>.
If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, […] then do so.
You should not provide aria-label attributes when there is a visual label already. It is correctly used with a for attribute, hence is already providing an accessible name to the checkbox.
<div>
<div>
<h2>header</h2>
<button>close button</button>
</div>
<div>
<div>some info</div>
<fieldset>
<legend>some general text about which checkbox is selected</legend>
<div>
<input type="checkbox" id="scales" name="scales">
<label for="scales">Scales</label>
</div>
<div>
<input type="checkbox" id="horns" name="horns">
<label for="horns">Horns</label>
</div>
</fieldset>
</div>
</div>
I am using jquery steps and icheck with bootstrap. The problem I am having is with my jquery steps I can not get the icheck radio buttons to work. In the picture below when you try to change the radio buttons in the table nothing happens. But on the bottom of the picture I am using the same exact code and when you hover or select a radio button it is working perfect. I am thinking the css for the jquery steps has some sort of code that just appearing to make the radio buttons just look like there not selected. Is there a way to make sure my radio button are forced on top of any background image or use !important so that there functionality can be used correctly?
$(document).ready(function() {
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<div class="i-checks">
<label>
<input type="radio" value="option1" name="a"> <i></i> Option one</label>
</div>
<div class="i-checks">
<label>
<input type="radio" checked="" value="option2" name="a"> <i></i> Option two checked</label>
</div>
<div class="i-checks">
<label>
<input type="radio" name="a" value="option2"> <i></i> Option three checked and disabled</label>
</div>
<div class="i-checks">
<label>
<input type="radio" name="a"> <i></i> Option four disabled</label>
</div>
js
https://jsfiddle.net/yf1q3scc/5/
In my fiddle I could not get the example exactly correct how I have it on mine. But you will notice that the radio buttons are still functionable on the bottom of the fiddle when you hover over or select one of them but not where I am using jquery steps. Any help with this would be greatly appreciated!
I had this fiddle with Bootstrap, jQuery Steps and iCheck working together https://jsfiddle.net/rpw2Lx41/
<div id="example-basic">
<h3>Step 1</h3>
<section>
<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>
</section>
<h3>Step 2</h3>
<section>
<p>Simple text.</p>
</section>
</div>
Of course my example it's a lot simple than yours, but we can say it is not a bug or an incompatibility problem like you're thinking this could be.
Besides, i realize that your code has a lot of markup errors. I'm sure if you rewrite your code, doing it step by step, and paying a little more attention you will be able to accomplish the expected result.
After pulling my hair out quite a bit this week, finally found it:
https://jsfiddle.net/xx9jr1z3/ shows the issue.
$('input').iCheck({
//settings
});
before $(...).steps(...) causes the iCheck inputs to not be clickable. Reversing them (steps before iCheck) corrects it.
I am trying to get an input-group styled properly in Bootstrap 3 with a drop-down selector, using this sample code:
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<select class="btn">
<option>USD</option>
<option>GBP</option>
<option>ZAR</option>
</select>
</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<div class="btn btn-default" type="button">Button</div>
</span>
</div>
</div>
It works fine in Bootply (http://www.bootply.com/ZVSunDnXif):
but if I put it into my site (ASP.Net Web Forms) using exactly the same code, it breaks:
I wouldn't mind so much (in vanilla bootstrap it's only lacking the border around the select box), except that I'm using a Bootswatch themed version, which doesn't even align properly:
The css path to the input group is body > form > div #MainBody > div.row > div.col-md-9 > div.form-group.
If I remove the select element, it displays fine, so is there something wrong with how I've defined that?
try adding row class to the form-group div parent of the select element. My select element was breaking the form div and going into another row. Adding the row class kept it inside visually although it is still going outside the html form tag. I am going to post about that separately.
I'm using jquery mobile for my project. It automatically converts all radio buttons in its inputs with its styles. The major problem is that in different situations i have different number of buttons (it depends on user) with its different width and i need it every time center.
<div data-role="fieldcontain" id="inline" >
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
{section name=i loop=$data['input'] start=0}
<input name="position" id="radio{$smarty.section.i.index}" value="{$data['input'][i]}" type="radio" />
<label for="radio{$smarty.section.i.index}">
{$data['input'][i]}
</label>
{/section}
</fieldset>
</div>
As you see each button has his size (for example Up and Zoom In are different). As i said before - i don't know what buttons will be for each users - it depends on their own settings, so i need somehow automatize process of centering it - is some ideas?
You could try it with <a> instead of <input> as done in the documentation, if at all possible in your situation.
These two jQuery Mobile checkboxes have different styling, however I believe I am creating them in very similar ways. The top boxes I am appending dynamically, where as the bottom box is hardcoded. Does anybody know why this is this discrepancy in styles?
Div to hold fieldset
<fieldset id="surveyViewer" data-role="controlgroup">
</fieldset>
Appending radio buttons
$('#surveyViewer').append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1" /><label for="1">1</label><input type="radio" name="options" id="2" value="2" /><label for="2">2</label>');
This line to refresh styling:
$('#surveyViewer').trigger("create");
$("input[type='radio']").checkboxradio("refresh");
All of your CSS is not being applied when you are dynamically loading the top two.
Add .trigger("create") on the element that gets the content added to.
See here: jQuery Mobile does not apply styles after dynamically adding content
UPDATE
However, if you generate new markup client-side or load in content via
Ajax and inject it into a page, you can trigger the create event to
handle the auto-initialization for all the plugins contained within
the new markup. This can be triggered on any element (even the page
div itself), saving you the task of manually initializing each plugin
(listview button, select, etc.).
For example, if a block of HTML markup (say a login form) was loaded
in through Ajax, trigger the create event to automatically transform
all the widgets it contains (inputs and buttons in this case) into the
enhanced versions. The code for this scenario would be:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
UPDATE #2
// HTML
<a id="myButton" href="" data-role="button" data-theme="e">Add Radio</a>
<div id="radiodiv1">
<fieldset id="surveyViewer" data-role="controlgroup"></fieldset>
</div>
// JS
$( "#myButton" ).bind( "click", function(event, ui) {
$("#surveyViewer").append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1" /><label for="1">1</label><input type="radio" name="options" id="2" value="2" /><label for="2">2</label>');
$("#radiodiv1").trigger("create");
});
I created a JSfiddle to illustrate a solution. I did all this on my iPad (you're welcome) so if this works for you, PLEASE at least mark it as the correct answer lol. Here's the link (based on adding the radio buttons via a button click)
WORKING EXAMPLE: http://jsfiddle.net/nsX2t/