A custom-styled and accessible checkbox.
Using plain HTML, CSS, and JS (no third-party libraries and frameworks), create a styled checkbox that preserves the accessibility of a native checkbox (keyboard toggle). Use as little JS as possible/reasonable.
● The custom checkbox is styled similar to what you see in the video (find a
checkmark SVG in Assets below).
● Clicking the native checkbox, the custom checkbox is displayed and checked as
well.
● Clicking the custom checkbox, the native checkbox is checked as well.
● Using the keyboard (tab), when the native checkbox is focused, a blue line appears
around the custom checkbox.
● Using the keyboard (tab), when the native checkbox has focus and the user presses
space, the native checkbox is selected as well as the custom checkbox.
● When hiding the native checkbox, the native accessibility (keyboard navigation:
tab, space) is preserved for the custom checkbox.
Note: For your technical interview, please ensure that you only have the custom checkbox visible with the expected functionality.
The implementation is based on the second video as end product and taking into consideration the first video as step.
If we make the native checkbox visible again we should make the necessary changes
.native-checkbox:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
body {
+++
gap: 5px;
}
.native-checkbox {
width: 20px;
height: 20px;
padding: 0;
margin: -1px;
overflow: hidden;
appearance: none;
border-radius: 4px;
background: white;
border: 1px solid gray;
}Also important, tabIndex is based on the native checkbox and the custom checkbox has no tabIndex -1, that way we can replicate state without having one extra tab to navigate inside our html. One missing probably interaction is when both checkboxes are visible and outlined (tabbed), and we click on the native checkbox. The outline remains where on the custom checkbox removes the outline. That is because the div cannot be focused because it has tabindex="-1" which is what we want.