Making a custom clear text field button
When people add custom clear buttons to their text fields they generally do one of three things:
- They do not make them accessible at all.
- They unnecessarily add them to the keyboard focus order of the web page.
- They ensure the clear buttons are accessible - but not keyboard focusable. The clear button(s) do not show up when their associated fields are readonly or disabled, The button’s respect reading directionality of a web page (e.g.,
dir=rtl), and that keyboard focus returns to the text field once the clear button has been activated.
I cheated a bit with that third list item… there’s quite a few things in there, and even a few others that I didn’t directly call out.
Today I made a script to demonstrate how to add custom clear buttons to text fields.
Here is a demo page and explainer for more information on the markup pattern, script, and a more nuances that my piddly list did not cover.
Or you can check it out in the following iframe:
oh no! now there are two
<h1> elements on my page because of the iframe content! Ah jeezy creezy… how will we all survive?