<!DOCTYPE HTML>
<title>label element focus forwarding via "for" attribute or nested labelable element</title>
<link rel="author" title="yaycmyk" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#the-label-element:the-label-element-10">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<form id="test">
<input id="input-a" type="checkbox">
<label id="label-a" for="input-a">a</label>
<label id="label-b">
<input id="input-b" type="checkbox" /> b
</label>
<label id="label-c" tabindex="0">
<input id="input-c" type="checkbox" /> c
</label>
<label id="label-d" tabindex="-1">
<input id="input-d" type="checkbox" /> d
</label>
<label id="label-e" tabindex="">
<input id="input-e" type="checkbox" /> e
</label>
<input id="input-f" type="checkbox">
<label id="label-f" for="input-f" tabindex="0" style="display:none">f</label>
</form>
<script>
"use strict";
async_test(t => {
const label = document.getElementById("label-a");
const input = document.getElementById("input-a");
input.addEventListener("focus", t.step_func_done());
label.addEventListener("focus", t.unreached_func("Label should not receive focus"));
label.focus();
}, "focusing a label with for attribute should forward focus to the associated element");
async_test(t => {
const label = document.getElementById("label-b");
const input = document.getElementById("input-b");
input.addEventListener("focus", t.step_func_done());
label.addEventListener("focus", t.unreached_func("Label should not receive focus"));
label.focus();
}, "focusing a label without for attribute should fowrad focus to the first labelable child");
async_test(t => {
const label = document.getElementById("label-c");
const input = document.getElementById("input-c");
input.addEventListener("focus", t.unreached_func("Input should not receive focus"));
label.addEventListener("focus", t.step_func_done());
label.focus();
}, "focusing a label with tabindex should not forward focus to the labelable element");
async_test(t => {
const label = document.getElementById("label-d");
const input = document.getElementById("input-d");
input.addEventListener("focus", t.unreached_func("Input should not receive focus"));
label.addEventListener("focus", t.step_func_done());
label.focus();
}, "focusing a label with negative tabindex should not forward focus to the labelable element");
async_test(t => {
const label = document.getElementById("label-e");
const input = document.getElementById("input-e");
label.addEventListener("focus", t.unreached_func("Label should not receive focus"));
input.addEventListener("focus", t.step_func_done());
label.focus();
}, "focusing a label with empty tabindex should forward focus to the labelable element");
async_test(t => {
const label = document.getElementById("label-f");
const input = document.getElementById("input-f");
label.addEventListener("focus", t.unreached_func("Label should not receive focus"));
input.addEventListener("focus", t.step_func_done());
label.focus();
}, "focusing a hidden label with tabindex should forward focus to the labelable element");
</script>
Codebase Browser
chromium