Page MenuHomePhabricator

Horizon Mitaka 'remember me' checkbox immune to keyboard focus
Open, LowPublic

Description

When I tab from the 2fa field it skips over 'remember me' and goes straight to 'Connect'. That means I'm constantly logging in for short sessions by accident.

Event Timeline

Andrew renamed this task from Horizon Mitaka 'remember me' checkbox has bad tab order to Horizon Mitaka 'remember me' checkbox immune to keyboard focus.Feb 14 2017, 10:39 PM

Still happens with whatever version of Horizon we’ve got deployed at the moment. (I’m not sure if this is actually a Horizon feature? I couldn’t find any trace of “remember me” in the upstream tarballs for 18.3.2 or 17.0.0. Is it an in-house thing?)

The HTML looks like this (with whitespace cleaned up):

<div class="form-group ">
  <div class="">
    <div class="themable-checkbox">
      <input type="checkbox" name="rememberme" id="id_rememberme">
      <label for="id_rememberme">
        <span class="control-label">Remember me</span>
        <span class="help-icon" data-toggle="tooltip" data-placement="top" title="Stay logged in for up to 7 days of inactivity.">
          <span class="fa fa-question-circle"></span>
        </span>
      </label>
    </div>
  </div>
</div>

And the styles include (again, cleaned up):

.themable-checkbox input[type=checkbox] {
  display: none;
}

The display: none causes the checkbox to be unavailable for tabbing; the Firefox accessibility dev tools also flag this up as a warning:

⚠ Clickable elements must be focusable and should have interactive semantics.

I couldn’t find a good way to solve this; adding tabindex=0 on the <label> makes it tabbable, but pressing Space or Enter doesn’t toggle the checkbox, and presumably this wouldn’t fix the accessibility issue either.

It’s probably best to not use this themable-checkbox class, whatever framework it’s from, and use a browser checkbox instead.

Is it an in-house thing?

The "remember feature" is an in-house thing, but the checkbox styling in itself doesn't seem to be.