Developer-facing implementation errors
This is a great way to guide other developers who may use your code or components to use the correct elements for accessibility and other reasons:
In our script, we can detect the element
nodeName
and return an error message if it is notBUTTON
. We usereturn
to stop the remainder of the IIFE (Immediately Invoked Function Expression) from executing.
Code language: JavaScript
if (toggletip.nodeName !== 'BUTTON') {
console.error('Toggletip buttons need to be <button> elements.')
return;
}
CSS tests and error messages
In Inclusive Design Patterns I write about creating deliberate visual regressions to highlight code errors, and providing error messages in the developer tools CSS inspector.
The error we caught with JavaScript earlier can be caught using the CSS selector
[data-tooltip]:not(button)
. We can highlight the erroneous element with a red outline, and provide an error message using the made-upERROR
property:
Code language: CSS
[data-tooltip]:not(button) {
outline: red solid 0.5em;
ERROR: Toggletip buttons need to be <button> elements.
}
Despite being an invalid property, the
ERROR
will appear in dev tools when the element is inspected.