[css-forms-1] Add ::reveal-icon pseudo-element. #11845 (#12821)

* [css-forms-1] Add ::reveal-icon pseudo-element. #11845

* Add missing colon

Co-authored-by: Masataka Yakura <[email protected]>

---------

Co-authored-by: Masataka Yakura <[email protected]>

Author: kbabbitt

css-forms-1/Overview.bs

@@ -390,7 +390,7 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
   - <{input}> elements with `type="range"`
   - <{input}> elements with `type="checkbox" switch`
 
-## Styling Parts for Text Fields: the ''::field-text'' and ''::clear-icon'' pseudo-elements ## {#field-pseudos}
+## Styling Parts for Text Fields: the ''::placeholder'', ''::field-text'', ''::reveal-icon'', and ''::clear-icon'' pseudo-elements ## {#field-pseudos}
 
   <dl export>
     <dt><dfn>::placeholder</dfn>
@@ -403,6 +403,32 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
       The ''::field-text'' pseudo-element represents
       the portion of the <{input}> that contains the editable text.
 
+    <dt><dfn>::reveal-icon</dfn>
+    <dd>
+      The ''::reveal-icon'' pseudo-element represents
+      the portion of the <{input}> that allows the user to
+      temporarily disable obscuring of [=sensitive text input=]
+      when clicked if provided by the user agent.
+
+      User agents providing ''::reveal-icon'' may choose to
+      remove it in some circumstances to help protect [=sensitive text input=]
+      from being revealed unintentionally.
+
+      <div class=note>
+        Example mitigations to avoid unintentionally revealing [=sensitive text input=]:
+        <ul>
+          <li>If focus moves away from the field, remove the ''::reveal-icon''.</li>
+          <li>If script modifies field content, remove the ''::reveal-icon''.</li>
+          <li>If the ''::reveal-icon'' is removed due to either of the above,
+              the user must delete the contents of the field to make the
+              ''::reveal-icon'' appear again. This behavior prevents someone
+              from making a minor change to field content to expose the
+              ''::reveal-icon'' on an unattended device.</li>
+          <li>If the field is filled by a user agent autofill feature, remove
+              the ''::reveal-icon''.</li>
+        </ul>
+      </div>
+
     <dt><dfn>::clear-icon</dfn>
     <dd>
       The ''::clear-icon'' pseudo-element represents
@@ -413,12 +439,10 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
       With ''appearance: textfield'', the user agent must not generate this part.
   </dl>
 
-  ''::field-text'' and ''::clear-icon'' must be siblings.
+  ''::field-text'', ''::reveal-icon'', and ''::clear-icon'' must be siblings.
 
   ISSUE: Collect parts used by autofill.
 
-  ISSUE(11845): Define something for the password visibility toggle for user agents implementing it?
-
   ISSUE(11844): Define how `::placeholder` interacts with `::field-text`.
 
 ## Styling Parts for textareas: the ''::placeholder'' and ''::field-text'' pseudo-elements ## {#textarea-pseudos}
@@ -1045,6 +1069,7 @@ select::picker-icon {
   <li>Removed "Appendix B: Explorations" with obsolete ideas.</li>
   <li>Added "slider-" prefix to slider pseudo-elements.</li>
   <li>Moved 'field-sizing' and 'input-security' properties from css-ui-4.</li>
+  <li>Added the ''::reveal-icon'' pseudo-element.</li>
 </ul>
 
 <h2 class=no-num id=privacy>Privacy Considerations</h2>