[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 :(