-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
160 lines (155 loc) · 7.03 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Clear Text field Buttons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://scottaohara.github.io/a11y_styled_form_controls/src/assets/css/--demo-only--.css">
<link rel="stylesheet" href="https://scottaohara.github.io/a11y_styled_form_controls/src/assets/css/--shared--.css">
<link rel="stylesheet" href="assets/css/clear-textfield.css">
</head>
<body id="body">
<div id="page" class="demo-wrap">
<main>
<div class="demo">
<div class="demo-wrap__header">
<h1 style="margin-top: 0;">
Clear Text field Buttons
</h1>
<p>Published: <span>February 19, 2022</span></p>
<p>Last Updated: <span>February 20, 2022</span></p>
<div>
<a href="https://github.com/scottaohara/clear-text-field-button" target=_parent>See source on GitHub</a>
</div>
</div>
<section>
<h2>
Pattern Demos
</h2>
<p>The following examples are different ways to markup a text field and provide it a button to clear a user's entry.</p>
<div>
<h3>Label containing text field</h3>
<p>
<custom-clear>
<label>
Example 1
<input>
</label>
</custom-clear>
</p>
</div>
<div>
<h3>Label prior to text field</h3>
<label for=ex2>
Example 2
</label>
<div>
<custom-clear>
<input id=ex2>
</custom-clear>
</div>
</div>
<h3>Right to left example</h3>
<p>
<custom-clear dir=rtl>
<label>
Example 3
<input>
</label>
</custom-clear>
</p>
<div>
<h3>Readonly Field</h3>
<label for=ex4>
Example 4
</label>
<div>
<custom-clear>
<input id=ex4 readonly value="foo">
</custom-clear>
</div>
</div>
</section>
<section>
<h2>
Pattern Details
</h2>
<details>
<summary>Pattern Markup</summary>
<pre><code><label for=whatever>
Name
</label>
<div>
<custom-clear>
<input id=whatever>
</custom-clear>
</div></code></pre>
</details>
<details>
<summary>Pattern Markup after the script runs</summary>
<pre><code><label for=whatever>
Name
</label>
<div>
<custom-clear>
<input id=whatever>
<span class="clr-btn" role="button" aria-label="clear entry" tabindex="-1" hidden>
<span aria-hidden="true">×</span>
</span>
</custom-clear>
</div></code></pre>
</details>
<p>
The <code><custom-clear></code> custom element serves as a wrapper for where the clear button will be injected.
It must have the <code><input></code> as a descendant.
</p>
<p>
The <code><custom-clear></code> should not be a child of the <code><label></code> element.
Doing so will cause the clear button's accessible name to be recognized by the <code><label></code> element,
and thus become part of the text field's accessible name when the button is not in the hidden state.
</p>
<p>
The clear button will be visually positioned at the end of the text field. The text field has extra padding set
(to the left or right side, depending on the left to right or right to left directionality of the page),
where the positioned clear button can safely exist without overlapping content.
</p>
<p>
The clear button will appear on focus or hover of a text field so long as the text field has a non-empty value.
On focus leaving or mouseout, the clear button will become hidden again.
</p>
<p>
Clicking or tapping the button will result in it being set to the hidden state, the text field's value becoming
the empty string, and focus being placed into the text field.
</p>
<p>
The clear button is marked up as a <code><button></code> element with a <code>tabindex=-1</code> and has an accessible name of "clear entry". This way if users of assistive technologies, such as screen readers, were to discover it, it would be exposed with a proper role and respond click or keypress events. <strong>Note:</strong> I originally was using a <code><span></code> with a <code>role=button</code>. However, Narrator was not properly activating the button when it had been navigated to in scan mode and <kbd>Enter</kbd> or <kbd>Space</kbd> were pressed. Other screen readers were working just fine with respecting synthetic clicks on the element.
</p>
<p>
The clear button is purposefully not in the tabbing order of the web page. Keyboard users can use the <kbd>Delete</kbd> or <kbd>Backspace</kbd> keys (or first select all the text field's text and then use these keys) to delete the contents of the text field.
</p>
<p>
<strong>Important:</strong> if the clear button was part of the web page's tabbing order,
every text field a user had entered data into would then require that they tab past the clear button that they have no use for.
This clear button being useless to them if they had filled out the field with the data they intended.
Adding clear buttons to the web page's tabbing order is not recommended for this reason,
as it has the potential to require two keyboard focus stops for every text field on the page that has a clear button.
</p>
<p>
Text fields that are in a disabled or readonly state do not display a clear button on hover or focus (if focus is allowed).
</p>
</section>
<h2>More reading</h2>
<p>Well... some. I wrote a <a href="https://www.scottohara.me/blog/2022/02/19/custom-clear-buttons.html" target=_parent>short post on my website</a>
about these clear buttons. You can go check that out or <a href="https://github.com/scottaohara/clear-text-field-button" target=_parent>see the source on GitHub</a>.</p>
</div>
</main>
</div>
<script src="index.js"></script>
<script>
const els = document.querySelectorAll('custom-clear');
for ( let i = 0; i < els.length; i++ ) {
customClear(els[i])
}
</script>
</body>
</html>