Click focus testing

This table shows how every interactive element responds to clicks focusing on the element (or some delegated element). The tests run check for these aspects:

• The :focus selector matches the element or its delegate
• The activeElement matches the element or its delegate
• The following events dispatch in order:

  1. mousedown

  2. blur

  3. focusout

  4. focus

  5. focusin

  6. mouseup

  7. click

To run a test, click into the "start here" input, then click the blue element (usually with the text "click me").

Tests for click focusability

Description	Expected Results	Element	Safari	Firefox	Chrome	Edge
Focusable Elements
Text input			Pass	Pass	Pass	Pass
number input			Pass	Pass	Pass	Pass
checkbox input		click this checkbox (this text is not a label)	Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
radio input		click this radio button (this text is not a label)	Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
radio group		click this radio button (this text is not a label)	Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
color input			Pass	Partial On Windows devices, the :focus selector does not match. Passes tests on MacOS.	Pass	Pass
date input			Pass	Pass	Partial On MacOS, :focus selector does not match the <input> if the calendar picker button is clicked. Passes test on Windows.	Partial On MacOS, :focus selector does not match the <input> if the calendar picker button is clicked. Passes test on Windows.
datetime-local input			Pass	Pass	Partial On MacOS, :focus selector does not match the <input> if the calendar picker button is clicked. Passes test on Windows.	Partial On MacOS, :focus selector does not match the <input> if the calendar picker button is clicked. Passes test on Windows.
email input			Pass	Pass	Pass	Pass
file input			Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Partial Clicking on the generated button element does not make the input match the :focus selector	Partial Clicking on the generated button element does not make the input match the :focus selector	Partial Clicking on the generated button element does not make the input match the :focus selector
image input			Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
month input			Pass	Pass	Partial On MacOS, :focus selector does not match the <input> if the calendar picker button is clicked. Passes test on Windows.	Partial On MacOS, :focus selector does not match the <input> if the calendar picker button is clicked. Passes test on Windows.
password input			Pass	Pass	Pass	Pass
button input			Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
range input			Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
reset input			Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
search input			Pass	Pass	Pass	Pass
submit input			Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
tel input			Pass	Pass	Pass	Pass
time input			Pass	Pass	Partial On MacOS, :focus selector does not match the <input> if the calendar picker button is clicked. Passes test on Windows.	Partial On MacOS, :focus selector does not match the <input> if the calendar picker button is clicked. Passes test on Windows.
url input			Pass	Pass	Pass	Pass
week input			Pass	Pass	Partial On MacOS, :focus selector does not match the <input> if the calendar picker button is clicked. Passes test on Windows.	Partial On MacOS, :focus selector does not match the <input> if the calendar picker button is clicked. Passes test on Windows.
textarea			Pass	Pass	Pass	Pass
select		1 2 3	Pass	Pass	Pass	Pass
button		Click me	Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
Button with nested elements		click me	Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
reset button		click me	Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
submit button		click me	Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
anchor with href		click me	Partial Focus goes to the body after clicking an anchor element with an href attribute. If only a mousedown event is dispatched on the element (i.e. you do not release the mouse button) then the element becomes focused	Partial Focus goes to the body after clicking an anchor element with an href attribute. If only a mousedown event is dispatched on the element (i.e. you do not release the mouse button) then the element becomes focused	Partial Focus goes to the body after clicking an anchor element with an href attribute. If only a mousedown event is dispatched on the element (i.e. you do not release the mouse button) then the element becomes focused	Partial Focus goes to the body after clicking an anchor element with an href attribute. If only a mousedown event is dispatched on the element (i.e. you do not release the mouse button) then the element becomes focused
Area with href			Partial Focus goes to the body after clicking an anchor element with an href attribute. The "focus" and "focusin" events are dispatched, though.	Fail Focus goes to the body after clicking an anchor element with an href attribute. A set of "blur" and "focusout" events are dispatched on the <area> immediately after the "focusin" event.	Partial Focus goes to the body after clicking an anchor element with an href attribute. The "focus" and "focusin" events are dispatched, though.	Partial Focus goes to the body after clicking an anchor element with an href attribute. The "focus" and "focusin" events are dispatched, though.
contenteditable attribute on div		Click me	Pass	Pass	Pass	Pass
contenteditable="false" and tabindex="-1" on div		Click me	Pass	Pass	Pass	Pass
Tabindex		Click me	Pass	Pass	Pass	Pass
Tabindex (empty attribute)		Click me	Pass	Pass	Pass	Pass
Tabindex (non-numeric value)		Click me	Pass	Pass	Pass	Pass
Tabindex (non-numeric value set by Element API)		Click me	Pass	Pass	Pass	Pass
Details with summary		Click me other content	Pass	Pass	Pass	Pass
Audio			Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Partial No mouse events ("mousedown", "mouseup", and "click") are dispatched when clicking on any part of an <audio> element or its controls.	Partial No mouse events ("mousedown", "mouseup", and "click") are dispatched when clicking on any part of an <audio> element or its controls. :focus styles do not apply to the <audio> element if the control elements are clicked, but the <audio> element still becomes the active element.	Partial No mouse events ("mousedown", "mouseup", and "click") are dispatched when clicking on any part of an <audio> element or its controls. :focus styles do not apply to the <audio> element if the control elements are clicked, but the <audio> element still becomes the active element.
Video with controls			Fail The <video> element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Partial No mouse events ("mousedown", "mouseup", and "click") are dispatched when clicking on any part of a <video> element or its controls.	Partial No mouse events ("mousedown", "mouseup", and "click") are dispatched when clicking on any part of a <video> element's controls. Mouse events do dispatch if some other area of the <video> element is clicked.	Partial No mouse events ("mousedown", "mouseup", and "click") are dispatched when clicking on any part of a <video> element's controls. Mouse events do dispatch if some other area of the <video> element is clicked.
Visible input within invisible div			Pass	Pass	Pass	Pass
Visible checkbox within invisible div			Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
Unfocusable Elements (disabled, inert, unrendered, or invalid)
Disabled input			Pass	Pass	Pass	Pass
Disabled fieldset			Pass	Pass	Pass	Pass
Inert input			Pass	Pass	Pass	Pass
Inert tree			Pass	Pass	Pass	Pass
anchor without href		click me	Pass	Pass	Pass	Pass
Area without href			Pass	Pass	Pass	Pass
contenteditable="false"		Click me	Pass	Pass	Pass	Pass
Inert div with contenteditable attribute		Click me	Pass	Pass	Pass	Pass
Inert div with tabindex attribute		Click me	Pass	Pass	Pass	Pass
Details with multiple summary elements. Summary elements other than the first should not be click focusable.		(first summary element) Click me (second summary element)	Pass	Pass	Pass	Pass
Video (no controls)			Pass	Fail Video element is focusable but shouldn't be. It matches the :focus selector, becomes the active element and dispatches "focus" and "focusin" events.	Pass	Pass
Labeled Elements
Wrapping (some tests are repeated with text inputs and checkboxes to check Safari)
Label wrapping text input		Click me	Partial Events dispatched out of order. The focused element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Label wrapping checkbox		Click me	Fail Checkbox does not recieve focus. No "focus" or "focusin" events are dispatched.	Pass	Pass	Pass
Focusable label wrapping text input		Click me	Partial Events dispatched out of order. The focused element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Focusable label wrapping checkbox		Click me	Fail Checkbox does not recieve focus. No "focus" or "focusin" events are dispatched.	Pass	Pass	Pass
Label wrapping disabled text input		Click me	Pass	Pass	Pass	Pass
Label wrapping disabled checkbox		Click me	Pass	Pass	Pass	Pass
Label wrapping inert text input		Click me	Pass	Pass	Pass	Pass
Label wrapping inert checkbox		Click me	Pass	Pass	Pass	Pass
Label wrapping unrendered text input (visibility: hidden;)		Click me	Pass	Pass	Pass	Pass
label wrapping visible input within invisible div		Click me	Partial Events dispatched out of order.	Pass	Pass	Pass
Label wrapping unrendered checkbox (visibility: hidden;)		Click me	Pass	Pass	Pass	Pass
label wrapping visible checkbox within invisible div		Click me	Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
Label wrapping unrendered text input (content-visibility: hidden;)		Click me	content-visibility is not supported in this browser	content-visibility is not supported in this browser	Partial No "focus" or "focusin" events are dispatched (correctly) but the <input> becomes the active element and matches the :focus selector (incorrectly).	Partial No "focus" or "focusin" events are dispatched (correctly) but the <input> becomes the active element and matches the :focus selector (incorrectly).
Label wrapping unrendered checkbox (content-visibility: hidden;)		Click me	content-visibility is not supported in this browser	content-visibility is not supported in this browser	Partial No "focus" or "focusin" events are dispatched (correctly) but the <input> becomes the active element and matches the :focus selector (incorrectly).	Partial No "focus" or "focusin" events are dispatched (correctly) but the <input> becomes the active element and matches the :focus selector (incorrectly).
Label wrapping unrendered text input (display: none;)		Click me	Pass	Pass	Pass	Pass
Label wrapping unrendered checkbox (display: none;)		Click me	Pass	Pass	Pass	Pass
Label wrapping focusable non-labelable element		Click me Am I focused?	Pass	Pass	Pass	Pass
Label wrapping non-focusable labelable element Explanation Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>. Meters, outputs, and progress elements are not natively focusable.		Click me 70%	Pass	Pass	Pass	Pass
Label wrapping focusable labelable element (progress bar with tabindex) Explanation Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>. Meters, outputs, and progress elements are not natively focusable.		Click me 70%	Partial Events dispatched out of order. The focused element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Label wrapping non-focusable labelable element (meter bar) Explanation Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>. Meters, outputs, and progress elements are not natively focusable.		Click me 70%	Pass	Pass	Pass	Pass
Label wrapping focusable labelable element (meter bar with tabindex) Explanation Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>. Meters, outputs, and progress elements are not natively focusable.		Click me 70%	Partial Events dispatched out of order. The focused element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Label wrapping non-focusable labelable element (output) Explanation Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>. Meters, outputs, and progress elements are not natively focusable.		Click me 70%	Pass	Pass	Pass	Pass
Label wrapping focusable labelable element (output with tabindex) Explanation Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>. Meters, outputs, and progress elements are not natively focusable.		Click me 70%	Partial Events dispatched out of order. The focused element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Label with "for" attribute but no target wrapping text input		Click me	Pass	Pass	Pass	Pass
Label with "for" attribute but no target wrapping checkbox		Click me	Pass	Pass	Pass	Pass
Label with "for" attribute wrapping text input that is not the target of the "for" attribute		Click me	Partial Events dispatched out of order. The focused element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Label with "for" attribute wrapping checkbox that is not the target of the "for" attribute		Click me	Partial Events dispatched out of order. The focused element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Wrapping AND Targeting (some tests are repeated with text inputs and checkboxes to check Safari)
Label with "for" attribute wrapping text input it targets		Click me	Partial Events dispatched out of order. The focused element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Label with "for" attribute wrapping checkbox it targets		Click me	Fail Checkbox does not recieve focus. No "focus" or "focusin" events are dispatched.	Pass	Pass	Pass
Label with valid text input target within label targeting other text input		Click me	Partial Events dispatched out of order. "click" event is dispatched before "focus" and "focusin" on the focused element.	Pass	Pass	Pass
Label with valid checkbox target within label targeting other checkbox		Click me	Fail Element does not become focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
Label with valid text input target within label targeting other text input		Click me	Partial Events dispatched out of order. "click" event is dispatched before "focus" and "focusin" on the focused element.	Pass	Pass	Pass
Label with valid checkbox target within label targeting other checkbox		Click me	Fail Element does not become focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
Label with valid text input target within label targeting other text input		Click me	Partial Events dispatched out of order. "click" event is dispatched before "focus" and "focusin" on the focused element.	Pass	Pass	Pass
Label with valid checkbox target within label targeting other checkbox		Click me	Fail Element does not become focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
Label with valid text input target within label targeting other text input		Click me	Partial Events dispatched out of order. "click" event is dispatched before "focus" and "focusin" on the focused element.	Pass	Pass	Pass
Label with valid checkbox target within label targeting other checkbox		Click me	Fail Element does not become focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
Label without wrapped or targeted element within label with valid text input target		Click me	Pass	Pass	Pass	Pass
Label without wrapped or targeted element within label with valid checkbox target		Click me	Pass	Pass	Pass	Pass
Label without wrapped or targeted element within label with text input descendant		Click me	Pass	Pass	Pass	Pass
Label without wrapped or targeted element within label with checkbox descendant		Click me	Pass	Pass	Pass	Pass
Targeting (some tests are repeated with text inputs and checkboxes to check Safari)
Label targeting non-focusable labelable element (progress bar) Explanation Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>. Meters, outputs, and progress elements are not natively focusable.		Click me 70%	Pass	Pass	Pass	Pass
Label targeting focusable labelable element (progress bar with tabindex) Explanation Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>. Meters, outputs, and progress elements are not natively focusable.		Click me 70%	Partial Events dispatched out of order. The focused element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Label targeting non-focusable labelable element (meter bar) Explanation Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>. Meters, outputs, and progress elements are not natively focusable.		Click me 70%	Pass	Pass	Pass	Pass
Label targeting focusable labelable element (meter bar with tabindex) Explanation Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>. Meters, outputs, and progress elements are not natively focusable.		Click me 70%	Partial Events dispatched out of order. The focused element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Label targeting non-focusable labelable element (output) Explanation Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>. Meters, outputs, and progress elements are not natively focusable.		Click me 70%	Pass	Pass	Pass	Pass
Label targeting focusable labelable element (output with tabindex) Explanation Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>. Meters, outputs, and progress elements are not natively focusable.		Click me 70%	Partial Events dispatched out of order. The focused element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Label with "for" attribute targeting text input		Click me	Partial Events dispatched out of order. The focused element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Label with "for" attribute targeting checkbox		Click me	Fail Checkbox is not focused. No "focus" or "focusin" events are dispatched.	Pass	Pass	Pass
Label with "for" attribute that matches multiple text inputs		Click me	Partial Events dispatched out of order. The focused element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Label with "for" attribute that matches multiple checkboxes		Click me	Fail Checkbox is not focused. No "focus" or "focusin" events are dispatched.	Pass	Pass	Pass
Label with "for" attribute that matches multiple text inputs, the first of which is unfocusable		Click me	Pass	Pass	Pass	Pass
Label with "for" attribute that matches multiple checkboxes, the first of which is unfocusable		Click me	Pass	Pass	Pass	Pass
Label targeting disabled text input		Click me	Pass	Pass	Pass	Pass
Label targeting disabled checkbox		Click me	Pass	Pass	Pass	Pass
Label targeting inert text input		Click me	Pass	Pass	Pass	Pass
Label targeting inert checkbox		Click me	Pass	Pass	Pass	Pass
Label targeting unrendered text input (visibility: hidden;)		Click me	Pass	Pass	Pass	Pass
label targeting visible input within invisible div		Click me	Partial Events dispatched out of order.	Pass	Pass	Pass
Label targeting unrendered checkbox (visibility: hidden;)		Click me	Pass	Pass	Pass	Pass
label targeting visible checkbox within invisible div		Click me	Fail The element never becomes focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
Label targeting unrendered text input (content-visibility: hidden;)		Click me	content-visibility is not supported in this browser	content-visibility is not supported in this browser	Pass	Pass
Label targeting unrendered checkbox (content-visibility: hidden;)		Click me	content-visibility is not supported in this browser	content-visibility is not supported in this browser	Pass	Pass
Label targeting unrendered text input (display: none;)		Click me	Pass	Pass	Pass	Pass
Label targeting unrendered checkbox (display: none;)		Click me	Pass	Pass	Pass	Pass
Label targeting focusable non-labelable element		Click me Am I focused?	Pass	Pass	Pass	Pass
Label within a button that has a valid text input target		Click me	Partial The <button> element never dispatches "focus", "focusin", "blur", or "focusout" events. The targeted element dispatches the "click" event before dispatching "focus" and "focusin" events.	Pass	Pass	Pass
Label within a button that has a valid checkbox target		Click me	Fail Checkbox is not focused. No "focus" or "focusin" events are dispatched.	Pass	Pass	Pass
button within label that has valid text input target		Click me	Fail Button is not focused. No "focus" or "focusin" events are dispatched.	Pass	Pass	Pass
button within label that has valid checkbox target		Click me	Fail Button is not focused. No "focus" or "focusin" events are dispatched.	Pass	Pass	Pass
Focusable click target within label that targets text input		Click me	Partial Events are dispatched out of order.	Pass	Pass	Pass
Focusable click target within label that targets checkbox		Click me	Fail Checkbox is not focused. No "focus" or "focusin" events are dispatched.	Pass	Pass	Pass
Label without "for" attribute within a button		Click me	Fail Element does not become focused. No "focus" or "focusin" events are dispatched, it does not become the active element, and it does not match the :focus selector.	Pass	Pass	Pass
Web Components
With unfocusable shadow element click target			Pass	Pass	Pass	Pass
With focusable shadow element click target			Pass	Pass	Pass	Pass
With focusable light element click target			Pass	Pass	Pass	Pass
Labeled form associated		Click me	Partial Events dispatched out of order. "click" event is dispatched before "focus" and "focusin" on the focused element.	Pass	Pass	Pass
Delegates Focus
With focusable shadow element			Pass	Pass	Pass	Pass
With unfocusable shadow element			Pass	Pass	Pass	Pass
Without focusable shadow element			Pass	Pass	Pass	Pass
With multiple focusable shadow elements			Pass	Pass	Pass	Pass
Focusable light element			Pass	Pass	Pass	Pass
Labeled form associated		Click me	Partial Events dispatched out of order. "click" event is dispatched before "focus" and "focusin" on the focused element.	Pass	Partial Events dispatched out of order.	Partial Events dispatched out of order.