[accessibility] Button plugin doesn't apply "checked"-property to checkbox/radio button when activated with the keyboard

[Lausselloic]

I've seen the #18866 and I agree.
But when the user interact with the keyboard (tab to navigate, space bar to check/uncheck) the checked property don't be updated onto radio and checkboxes.
http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons

[patrickhlauke]

urgh, it seems the workarounds/fixes from #16226 and #16404 may not have been ported to v4? /cc @mdo @fat @cvrebert

[cvrebert]

Implementing the suggestion from #17021 ought to fix this and make the plugin simpler in general:

Buttons

• Consider replacing .active with > input:checked (etc.) in the Buttons plugin styles to address data-toggle="button" initial active state #11535.

[cvrebert]

Implementation sketch of my suggestion: http://jsbin.com/lidedi/edit?html,css,output

[patrickhlauke]

slightly modified/expanded (stealing some of the current buttons styles) sketch http://codepen.io/patrickhlauke/pen/PNRMve

[cvrebert]

It might be possible, with some fiddling, to move the .btn up from the label to the .btn-checked, which might allow the .btn-group styles to "just work" (and thus let us avoid duplicating a lot of the .btn-group CSS).

[patrickhlauke]

@cvrebert revisited this briefly today...something like http://codepen.io/patrickhlauke/pen/QEWRpp ? /cc @mdo

[cvrebert]

@patrickhlauke I think the approach is good enough for a PR, so we can start nitpicking it properly 😄

[patrickhlauke]

roger roger...will get onto that this week

[patrickhlauke]

@cvrebert made an attempt, but failing to get anything to work out properly with the current mixins. it also looks fairly ugly...

with a super-simplified markup of

<div class="btn-group">
  <input id="check1" type="checkbox" checked="" autocomplete="off"><label class="btn btn-primary" for="check1">Checkbox 1 (pre-checked)</label>
  <input id="check2" type="checkbox" autocomplete="off"><label class="btn btn-primary" for="check2">Checkbox 2</label>
  <input id="check3" type="checkbox" autocomplete="off"><label class="btn btn-primary" for="check3">Checkbox 3</label>
</div>

i'd conceptually would need to do something like

@mixin button-variant($color, $background, $border) {
  ...
  &:focus,
  &.focus,
  .btn-group input[type="checkbox"]:focus + label.#{&},
  .btn-group input[type="radio"]:focus + label.#{&}, {
    color: $color;
    background-color: $active-background;
        border-color: $active-border;
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle,
  .btn-group input[type="checkbox"]:checked + label.#{&},
  .btn-group input[type="radio"]:checked + label.#{&} {
    color: $color;
    background-color: $active-background;
        border-color: $active-border;
    // Remove the gradient for the pressed/active state
    background-image: none;
    @include box-shadow($btn-active-box-shadow);

    &:hover,
    &:focus,
    &.focus,
    .btn-group input[type="checkbox"]:checked:focus + label.#{&},
    .btn-group input[type="radio"]:checked:focus + label.#{&},
    .btn-group input[type="checkbox"]:checked:hover + label.#{&},
    .btn-group input[type="radio"]:checked:hover + label.#{&} {
      color: $color;
      background-color: darken($background, 17%);
          border-color: darken($border, 25%);
    }
 }

but this obviously fails in Sass. not sure how to proceed without inventing completely new classes or rewriting the whole mixin approach :(

[patrickhlauke]

FWIW i updated the pen http://codepen.io/patrickhlauke/pen/QEWRpp to this much simpler (from a markup and styles point of view) approach

[mdo]

Fixed by #18900 I believe, and same as #16673 and #17599.

[alexventuraio]

Hey there!
Has the issue being fixed? Because I still having it on Bootstrap v4.1.1. This is my example for reference.
The radio inputs do not get the checked attribute when clicking on them.

[richardebeling]

I can also reproduce this in the bootstrap docs example, using firefox 60.0.2 and chrome 67.0.3396.99. If you click on any of the three buttons and then change your selection with the keyboard, it looks as if you've selected another button. The underlying radio input selection is not changed though. You can see this by temporarily deactivating the clip-style on the radio inputs. Running document.querySelector('input[name="options"]:checked').id; in the browser will return you the input that has the radio input selected, not the one that should be active.

Thus, if you have these buttons in a form and submit the form, the submitted value for the toggle buttons is not correct.
Am I missing something?