5 <meta name=
"viewport" content=
"width=device-width, initial-scale=1, shrink-to-fit=no">
6 <link rel=
"stylesheet" href=
"../../../dist/css/bootstrap.min.css">
10 <div class=
"container">
11 <h1>Button
<small>Bootstrap Visual Test
</small></h1>
13 <button type=
"button" class=
"btn btn-primary" data-toggle=
"button" aria-pressed=
"false" autocomplete=
"off">
17 <p>For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.
</p>
18 <p>Navigate to the checkboxes with the keyboard (generally, using
<kbd>TAB
</kbd> /
<kbd>SHIFT + TAB
</kbd>), and ensure that
<kbd>SPACE
</kbd> toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that
<kbd>SPACE
</kbd> toggles the checkbox again.
</p>
20 <div class=
"btn-group" data-toggle=
"buttons">
21 <label class=
"btn btn-primary active">
22 <input type=
"checkbox" checked
autocomplete=
"off"> Checkbox
1 (pre-checked)
24 <label class=
"btn btn-primary">
25 <input type=
"checkbox" autocomplete=
"off"> Checkbox
2
27 <label class=
"btn btn-primary">
28 <input type=
"checkbox" autocomplete=
"off"> Checkbox
3
32 <p>Navigate to the radio button group with the keyboard (generally, using
<kbd>TAB
</kbd> /
<kbd>SHIFT + TAB
</kbd>). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated
"forward" to the group with
<kbd>TAB
</kbd> or
"backwards" using
<kbd>SHIFT + TAB
</kbd>). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time. Ensure that the selected radio button can be changed by using the
<kbd>←
</kbd> and
<kbd>→
</kbd> arrow keys. Click on one of the radio buttons with the mouse, ensure that focus was correctly set on the actual radio button, and that
<kbd>←
</kbd> and
<kbd>→
</kbd> change the selected radio button again.
</p>
34 <div class=
"btn-group" data-toggle=
"buttons">
35 <label class=
"btn btn-primary active">
36 <input type=
"radio" name=
"options" id=
"option1" autocomplete=
"off" checked
> Radio
1 (preselected)
38 <label class=
"btn btn-primary">
39 <input type=
"radio" name=
"options" id=
"option2" autocomplete=
"off"> Radio
2
41 <label class=
"btn btn-primary">
42 <input type=
"radio" name=
"options" id=
"option3" autocomplete=
"off"> Radio
3
47 <script src=
"../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
48 <script src=
"../../dist/util.js"></script>
49 <script src=
"../../dist/button.js"></script>