I am using the bootstrap button groups, and I want them to be accessible. Right now the screen reader sees them as separate buttons. I would like the screen reader to see them as a group or list of buttons.
http://getbootstrap.com/components/#btn-groups
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
I would also want the screen reader to know which button is selected but that shouldn't be very hard with the aria-checked tag.
I don't think screen reader will see them as group of buttons unless you use input type=radio and style them to look like buttons.
Also to tell which button is selected "aria-pressed" is better.
One solution I can think of is to add role="radio" to the buttons so that screen reader sees them as a group. I actually works, but I am not sure if its considered bad practice
Related
Below is my first attempt to build a Razor page w/ Boostrap. When the page is first brought up, the form is collapsed. When the user clicks on the Revisit a quote button, the form then expand. I followed the documentation on Bootstrap's site to the dot, but no idea getting the toggle to work. What am I missing?
#page "/"
<div>
<label>What would you like to do?</label>
<div>
<button class="btn btn-primary"
type="button">
Create a new quote
</button>
</div>
<div>
<button class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#quotesearchForm"
aria-expanded="false"
aria-controls="quotesearchForm">
Revisit a quote
</button>
<div class="collapse" id="quotesearchForm">
<form>
<input /><div class="dropdown" /><button></button>
</form>
</div>
</div>
</div>
Mystery solved...out of the box Blazor only has the bare-bones structure from Bootstrap and does not have the javascript portion. What Blazor wants you to do is to use its code to eliminate the use of javascript. Blazor does that by using its SignalR technology to transmit very small amount of data over the wire to do that. Tim Corey has a YouTube video on this.
Have a task where I have some information in a button that needs to all be aligned to the same sides.
Its a digitized phone menu so the info on the left size is the line name and the information on the right is the lines extension. I want to align all of the extensions right.
I used buttons that activate Modals with more information. The buttons are required for the form of modal I am using. (Or at least that is what I found in research.)
Tried paragraph tricks but they broke the buttons function.
<button type="button" class="btn" data-toggle="modal" data-target=".HPENET_MODAL">2 - HPE Networking ................................................... XXXXX</button>
Try this:
<button type="button" class="btn" data-toggle="modal" data-target=".HPENET_MODAL" style="width:500px;text-align:left">2 - HPE Networking <div style="float:right">XXXX</div></button>
I'm trying to make two buttons that are side by side to go into a table that I'm displaying through a PHP file called within a Javascript, however I cannot get the buttons to go side by side correctly. I've tried various things people previously suggested, but with no luck. Any suggestions?
$data .= '<tr><td>'.$row['surname'].'</td><td>'.$row['forename'].'</td><td>'.$row['username'].'</td><td>'.$row['joined'].'</td><td>'.$row['rank'].'</td><td><button type="button" class="btn btn-block btn-primary btn-xs" onClick="ChangePassOpen(\''.$row['username'].'\')">Change Password</button><button type="button" class="btn btn-block btn-primary btn-xs" onClick="ChangeRankOpen(\''.$row['username'].'\')">Change Account Rank</button></td></tr>';
Or view webpage (Hit Go to show the table) http://thomas-smyth.co.uk/admin/accountlist.php
Thanks,
Tom
class="btn btn-block btn-primary btn-xs"
btn-block class is going to make your buttons take up 100% of the space available and block the entire row (Bootstrap docs), so nothing else fits in it.
Remove the btn-block class
Add some css style rules to make the buttons more distinguishable and fit in better. I'd suggest adding some padding or a margin between the buttons.
<button type="button" class="button-continue button-save frg-button color-green" data-next="#homephone-mobility-config">Choose this package</button>
<button type="button" class="button-continue button-save frg-button color-green" data-next="#homephone-mobility-config">Choose this package</button>
<button type="button" class="button-continue button-save frg-button color-green" data-next="#homephone-mobility-config">Choose this combo</button>
I have two buttons with different text in it. I am automating the testing. What CSS selectors do I have to use so that I can use it for different buttons? Its for selenium web driver selectors.
Below are the HTML for the buttons:
Button 1.
////Choose this offer///
Button 2.
////Choose this package////
Button 3.
///Choose this combo///
Thanks
How about this?
driver.findElement(By.xpath("//button[contains(., 'Choose this package']"))
I am converting my bootstrap 2 site to bootstrap 3 and am a bit stuck on a particular control which is several sets of tab pages controlled by toggle buttons.
Here is an example of my working bs2 code:
http://bootply.com/97187
If I run this code in bs3, I get this:
http://bootply.com/97189
The problem as you will see is that the buttons no longer behave like a group of radio buttons. They toggle individually.
I am currently here:
http://bootply.com/97184
This looks like it works but it doesn't. The grey colour you get when you click on a button is in fact, the "I've now got the focus" colour. Click somewhere else and it goes back to white.
I really need the buttons to toggle as they did in bs2. What small thing am I neglecting here?
Your problem is in here:
<div class="well well-sm">
<span>Set A:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default active" href="#tab1" data-toggle="tab">1</button>
<button class="btn btn-sm btn-default" href="#tab2" data-toggle="tab">2</button>
</div>
<span> Set B:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default" href="#tabA" data-toggle="tab">A</button>
<button class="btn btn-sm btn-default" href="#tabB" data-toggle="tab">B</button>
<button class="btn btn-sm btn-default" href="#tabC" data-toggle="tab">C</button>
</div>
</div>
Adding the class active to the button class for tab1 seemed to prevent the buttons from toggling as you want them to. Simply removing the active class seems to fix the problem.
Demo: http://bootply.com/97199
Ok, I've been playing around quite a bit and got to an acceptable solution.
Unlike the Bootstrap 2 version, it requires a bit of JavaScript.
Here it is: http://bootply.com/97426
The only thing it doesn't do is group the button groups into a single component but this is acceptable, unless someone can find a way to do this as well.
Would be nicer if Bootstrap just worked the same way as V2 in this case.