Adding Password Component - #1946
Conversation
Accessibility Violations Found
|
1 similar comment
Accessibility Violations Found
|
| * @since com.adobe.cq.forms.core.components.models.form 2.0.0 | ||
| */ | ||
| @JsonIgnore | ||
| default boolean isShowHidePasswordEnabled() { |
There was a problem hiding this comment.
This should not be json ignore, might be required in headless, this should be fd: prefixed, since it is OOTB property
| ### Note on styling the show/hide toggle button | ||
| This component only renders the `.cmp-adaptiveform-passwordinput__toggle-visibility` button | ||
| element and its accessibility attributes (`aria-pressed`, `aria-label`). It intentionally | ||
| ships with **no visual/icon CSS** for that button — consistent with how every other core |
There was a problem hiding this comment.
How is the cypress test currently clicking this, since this is invisible. How did you test this ?
|
|
||
| @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = ReservedProperties.PN_SHOW_HIDE_PASSWORD) | ||
| @Default(booleanValues = true) | ||
| protected boolean showHidePassword; |
There was a problem hiding this comment.
I think we should create something specific for password, with time, if we enhance password, contract might be leaked into text/telephone etc
| if (this.widget.value !== '') { | ||
| this.setModelValue(this.widget.value); | ||
| } | ||
| this.widget.addEventListener('blur', (e) => { |
There was a problem hiding this comment.
No input listener → no as-you-type minLength/pattern feedback, and I don't see any character restriction (was this supported in v1, can you check)
| <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" | ||
| jcr:primaryType="cq:ClientLibraryFolder" | ||
| allowProxy="{Boolean}true" | ||
| categories="[core.forms.components.textinput.v1.runtime]" |
There was a problem hiding this comment.
this should be password input why is it textinput.v1.runtime
| if (this.widget.value !== '') { | ||
| this.setModelValue(this.widget.value); | ||
| } | ||
| this.widget.addEventListener('blur', (e) => { |
There was a problem hiding this comment.
Should we add more configuration in password like restrict to numeric digits or alpha numeric etc, this is a very common customer use-case
3 participants
Description
Adds a new **Adaptive Form Password Input ** core component: a masked
<input type="password">field with an optional show/hide visibility toggle button.Related Issue
Motivation and Context
Adaptive Forms didn't have a first-class password field: authors had to repurpose Text Input, which offers no masking, no visibility toggle, and no autofill-attribute control suited to credentials. This adds that as a proper, accessible core component while closing off the plaintext-exposure trap that comes from naively inheriting Text Input's "default value" behavior for a password-typed field.
How Has This Been Tested?
TextInputImplTest): field type resolution (fieldType=password→getFieldType()/getExportedType()),isShowHidePasswordEnabled()default-true and author-disabled cases, and.model.jsonexport shape viatestJSONExport.passwordinput.authoring.cy.js): dropping the component into a form container / responsive grid via the editor sidebar, and opening its edit dialog.passwordinput.runtime.cy.js): model/view initialization, masked-by-default rendering, clicking the eye icon reveals plaintext and togglesaria-pressed/aria-label(and back), toggle button absent whenshowHidePasswordis disabled, value submits correctly regardless of toggle state, minLength/mandatory validation messages, description/tooltip toggling, andaria-disabledabsence when disabled.aria-pressedflips) in the disabled/preview rendering path.Screenshots (if appropriate):
Types of changes
Checklist: