mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 15:51:16 +08:00
fix(input): improve error text accessibility (#30635)
Issue number: resolves internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Currently, when an error text is shown, it may not announce itself to voice assistants. This is because the way error text currently works is by always existing in the DOM, but being hidden when there is no error. When the error state changes, the error text is shown, but as far as the voice assistant can tell it's always been there and nothing has changed. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> With these changes, both input and textarea have been updated so they'll properly announce error text when it shows up. We had to do this with a mutation observer and state because it's important in some frameworks, like Angular, that state changes to cause a re-render. This, combined with some minor aria changes, makes it so that when a field is declared invalid, it immediately announces the invalid state instead of waiting for the user to go back to the invalid field. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Current dev build: ``` 8.7.4-dev.11756220757.185b8cbf ``` ## Screens [Textarea](https://ionic-framework-git-ionic-49-ionic1.vercel.app/src/components/textarea/test/validation) [Input](https://ionic-framework-git-ionic-49-ionic1.vercel.app/src/components/input/test/validation) --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
This commit is contained in:
Shane
@ -79,8 +79,15 @@ export class Input implements ComponentInterface {
|
||||
*/
|
||||
@State() hasFocus = false;
|
||||
|
||||
/**
|
||||
* Track validation state for proper aria-live announcements
|
||||
*/
|
||||
@State() isInvalid = false;
|
||||
|
||||
@Element() el!: HTMLIonInputElement;
|
||||
|
||||
private validationObserver?: MutationObserver;
|
||||
|
||||
/**
|
||||
* The color to use from your application's color palette.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
@ -396,6 +403,16 @@ export class Input implements ComponentInterface {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the input is in an invalid state based on Ionic validation classes
|
||||
*/
|
||||
private checkInvalidState(): boolean {
|
||||
const hasIonTouched = this.el.classList.contains('ion-touched');
|
||||
const hasIonInvalid = this.el.classList.contains('ion-invalid');
|
||||
|
||||
return hasIonTouched && hasIonInvalid;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const { el } = this;
|
||||
|
||||
@ -406,6 +423,26 @@ export class Input implements ComponentInterface {
|
||||
() => this.labelSlot
|
||||
);
|
||||
|
||||
// Watch for class changes to update validation state
|
||||
if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
|
||||
this.validationObserver = new MutationObserver(() => {
|
||||
const newIsInvalid = this.checkInvalidState();
|
||||
if (this.isInvalid !== newIsInvalid) {
|
||||
this.isInvalid = newIsInvalid;
|
||||
// Force a re-render to update aria-describedby immediately
|
||||
forceUpdate(this);
|
||||
}
|
||||
});
|
||||
|
||||
this.validationObserver.observe(el, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class'],
|
||||
});
|
||||
}
|
||||
|
||||
// Always set initial state
|
||||
this.isInvalid = this.checkInvalidState();
|
||||
|
||||
this.debounceChanged();
|
||||
if (Build.isBrowser) {
|
||||
document.dispatchEvent(
|
||||
@ -451,6 +488,12 @@ export class Input implements ComponentInterface {
|
||||
this.notchController.destroy();
|
||||
this.notchController = undefined;
|
||||
}
|
||||
|
||||
// Clean up validation observer to prevent memory leaks
|
||||
if (this.validationObserver) {
|
||||
this.validationObserver.disconnect();
|
||||
this.validationObserver = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -626,22 +669,22 @@ export class Input implements ComponentInterface {
|
||||
* Renders the helper text or error text values
|
||||
*/
|
||||
private renderHintText() {
|
||||
const { helperText, errorText, helperTextId, errorTextId } = this;
|
||||
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
|
||||
|
||||
return [
|
||||
<div id={helperTextId} class="helper-text">
|
||||
{helperText}
|
||||
<div id={helperTextId} class="helper-text" aria-live="polite">
|
||||
{!isInvalid ? helperText : null}
|
||||
</div>,
|
||||
<div id={errorTextId} class="error-text">
|
||||
{errorText}
|
||||
<div id={errorTextId} class="error-text" role="alert">
|
||||
{isInvalid ? errorText : null}
|
||||
</div>,
|
||||
];
|
||||
}
|
||||
|
||||
private getHintTextID(): string | undefined {
|
||||
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
||||
const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
|
||||
|
||||
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
||||
if (isInvalid && errorText) {
|
||||
return errorTextId;
|
||||
}
|
||||
|
||||
@ -864,7 +907,7 @@ export class Input implements ComponentInterface {
|
||||
onCompositionstart={this.onCompositionStart}
|
||||
onCompositionend={this.onCompositionEnd}
|
||||
aria-describedby={this.getHintTextID()}
|
||||
aria-invalid={this.getHintTextID() === this.errorTextId}
|
||||
aria-invalid={this.isInvalid ? 'true' : undefined}
|
||||
{...this.inheritedAttributes}
|
||||
/>
|
||||
{this.clearInput && !readonly && !disabled && (
|
||||
|
||||
284
core/src/components/input/test/validation/index.html
Normal file
284
core/src/components/input/test/validation/index.html
Normal file
@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Input - Validation</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
||||
color: var(--ion-color-step-600);
|
||||
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.validation-info {
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
background: var(--ion-color-light);
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Input - Validation Test</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<div class="validation-info">
|
||||
<h2>Screen Reader Testing Instructions:</h2>
|
||||
<ol>
|
||||
<li>Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)</li>
|
||||
<li>Tab through the form fields</li>
|
||||
<li>When you tab away from an empty required field, the error should be announced immediately</li>
|
||||
<li>The error text should be announced BEFORE the next field is announced</li>
|
||||
<li>Test in Chrome, Safari, and Firefox to verify consistent behavior</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div>
|
||||
<h2>Required Email Field</h2>
|
||||
<ion-input
|
||||
id="email-input"
|
||||
type="email"
|
||||
label="Email"
|
||||
label-placement="floating"
|
||||
fill="outline"
|
||||
placeholder="Enter your email"
|
||||
helper-text="We'll never share your email"
|
||||
error-text="Please enter a valid email address"
|
||||
required
|
||||
></ion-input>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Required Name Field</h2>
|
||||
<ion-input
|
||||
id="name-input"
|
||||
type="text"
|
||||
label="Full Name"
|
||||
label-placement="floating"
|
||||
fill="outline"
|
||||
placeholder="Enter your full name"
|
||||
helper-text="First and last name"
|
||||
error-text="Name is required"
|
||||
required
|
||||
></ion-input>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Phone Number (Pattern Validation)</h2>
|
||||
<ion-input
|
||||
id="phone-input"
|
||||
type="tel"
|
||||
label="Phone"
|
||||
label-placement="floating"
|
||||
fill="outline"
|
||||
placeholder="(555) 555-5555"
|
||||
pattern="^\(\d{3}\) \d{3}-\d{4}$"
|
||||
helper-text="Format: (555) 555-5555"
|
||||
error-text="Please enter a valid phone number"
|
||||
required
|
||||
></ion-input>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Password (Min Length)</h2>
|
||||
<ion-input
|
||||
id="password-input"
|
||||
type="password"
|
||||
label="Password"
|
||||
label-placement="floating"
|
||||
fill="outline"
|
||||
placeholder="Enter password"
|
||||
minlength="8"
|
||||
helper-text="At least 8 characters"
|
||||
error-text="Password must be at least 8 characters"
|
||||
required
|
||||
></ion-input>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Age (Number Range)</h2>
|
||||
<ion-input
|
||||
id="age-input"
|
||||
type="number"
|
||||
label="Age"
|
||||
label-placement="floating"
|
||||
fill="outline"
|
||||
placeholder="Enter your age"
|
||||
min="18"
|
||||
max="120"
|
||||
helper-text="Must be 18 or older"
|
||||
error-text="Please enter a valid age (18-120)"
|
||||
required
|
||||
></ion-input>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Optional Field (No Validation)</h2>
|
||||
<ion-input
|
||||
id="optional-input"
|
||||
type="text"
|
||||
label="Optional Info"
|
||||
label-placement="floating"
|
||||
fill="outline"
|
||||
placeholder="This field is optional"
|
||||
helper-text="You can skip this field"
|
||||
></ion-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ion-padding">
|
||||
<ion-button id="submit-btn" expand="block" disabled>Submit Form</ion-button>
|
||||
<ion-button id="reset-btn" expand="block" fill="outline">Reset Form</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
// Simple validation logic
|
||||
const inputs = document.querySelectorAll('ion-input');
|
||||
const submitBtn = document.getElementById('submit-btn');
|
||||
const resetBtn = document.getElementById('reset-btn');
|
||||
|
||||
// Track which fields have been touched
|
||||
const touchedFields = new Set();
|
||||
|
||||
// Validation functions
|
||||
const validators = {
|
||||
'email-input': (value) => {
|
||||
if (!value) return false;
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
||||
},
|
||||
'name-input': (value) => {
|
||||
return value && value.trim().length > 0;
|
||||
},
|
||||
'phone-input': (value) => {
|
||||
if (!value) return false;
|
||||
return /^\(\d{3}\) \d{3}-\d{4}$/.test(value);
|
||||
},
|
||||
'password-input': (value) => {
|
||||
return value && value.length >= 8;
|
||||
},
|
||||
'age-input': (value) => {
|
||||
if (!value) return false;
|
||||
const age = parseInt(value);
|
||||
return age >= 18 && age <= 120;
|
||||
},
|
||||
'optional-input': () => true, // Always valid
|
||||
};
|
||||
|
||||
function validateField(input) {
|
||||
const inputId = input.id;
|
||||
const value = input.value;
|
||||
const isValid = validators[inputId] ? validators[inputId](value) : true;
|
||||
|
||||
// Only show validation state if field has been touched
|
||||
if (touchedFields.has(inputId)) {
|
||||
if (isValid) {
|
||||
input.classList.remove('ion-invalid');
|
||||
input.classList.add('ion-valid');
|
||||
} else {
|
||||
input.classList.remove('ion-valid');
|
||||
input.classList.add('ion-invalid');
|
||||
}
|
||||
input.classList.add('ion-touched');
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
let allValid = true;
|
||||
inputs.forEach((input) => {
|
||||
if (input.id !== 'optional-input') {
|
||||
const isValid = validateField(input);
|
||||
if (!isValid) {
|
||||
allValid = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
submitBtn.disabled = !allValid;
|
||||
return allValid;
|
||||
}
|
||||
|
||||
// Add event listeners
|
||||
inputs.forEach((input) => {
|
||||
// Mark as touched on blur
|
||||
input.addEventListener('ionBlur', (e) => {
|
||||
touchedFields.add(input.id);
|
||||
validateField(input);
|
||||
validateForm();
|
||||
|
||||
const isInvalid = input.classList.contains('ion-invalid');
|
||||
if (isInvalid) {
|
||||
console.log('Field marked invalid:', input.label, input.errorText);
|
||||
}
|
||||
});
|
||||
|
||||
// Validate on input
|
||||
input.addEventListener('ionInput', (e) => {
|
||||
if (touchedFields.has(input.id)) {
|
||||
validateField(input);
|
||||
validateForm();
|
||||
}
|
||||
});
|
||||
|
||||
// Also validate on focus loss via native blur
|
||||
input.addEventListener('focusout', (e) => {
|
||||
// Small delay to ensure Ionic's classes are updated
|
||||
setTimeout(() => {
|
||||
touchedFields.add(input.id);
|
||||
validateField(input);
|
||||
validateForm();
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
|
||||
// Reset button
|
||||
resetBtn.addEventListener('click', () => {
|
||||
inputs.forEach((input) => {
|
||||
input.value = '';
|
||||
input.classList.remove('ion-valid', 'ion-invalid', 'ion-touched');
|
||||
});
|
||||
touchedFields.clear();
|
||||
submitBtn.disabled = true;
|
||||
});
|
||||
|
||||
// Submit button
|
||||
submitBtn.addEventListener('click', () => {
|
||||
if (validateForm()) {
|
||||
alert('Form submitted successfully!');
|
||||
}
|
||||
});
|
||||
|
||||
// Initial setup
|
||||
validateForm();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
285
core/src/components/textarea/test/validation/index.html
Normal file
285
core/src/components/textarea/test/validation/index.html
Normal file
@ -0,0 +1,285 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Textarea - Validation</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
||||
color: var(--ion-color-step-600);
|
||||
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.validation-info {
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
background: var(--ion-color-light);
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Textarea - Validation Test</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<div class="validation-info">
|
||||
<h2>Screen Reader Testing Instructions:</h2>
|
||||
<ol>
|
||||
<li>Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)</li>
|
||||
<li>Tab through the form fields</li>
|
||||
<li>When you tab away from an empty required field, the error should be announced immediately</li>
|
||||
<li>The error text should be announced BEFORE the next field is announced</li>
|
||||
<li>Test in Chrome, Safari, and Firefox to verify consistent behavior</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div>
|
||||
<h2>Required Description (Min Length)</h2>
|
||||
<ion-textarea
|
||||
id="description-textarea"
|
||||
label="Description"
|
||||
label-placement="floating"
|
||||
fill="outline"
|
||||
placeholder="Enter a description"
|
||||
rows="4"
|
||||
minlength="20"
|
||||
helper-text="At least 20 characters"
|
||||
error-text="Description must be at least 20 characters"
|
||||
required
|
||||
></ion-textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Required Comments</h2>
|
||||
<ion-textarea
|
||||
id="comments-textarea"
|
||||
label="Comments"
|
||||
label-placement="floating"
|
||||
fill="outline"
|
||||
placeholder="Enter your comments"
|
||||
rows="4"
|
||||
helper-text="Please provide your feedback"
|
||||
error-text="Comments are required"
|
||||
required
|
||||
></ion-textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Bio (Max Length)</h2>
|
||||
<ion-textarea
|
||||
id="bio-textarea"
|
||||
label="Bio"
|
||||
label-placement="floating"
|
||||
fill="outline"
|
||||
placeholder="Tell us about yourself"
|
||||
rows="4"
|
||||
maxlength="200"
|
||||
counter="true"
|
||||
helper-text="Maximum 200 characters"
|
||||
error-text="Bio is required"
|
||||
required
|
||||
></ion-textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Address (Pattern Validation)</h2>
|
||||
<ion-textarea
|
||||
id="address-textarea"
|
||||
label="Address"
|
||||
label-placement="floating"
|
||||
fill="outline"
|
||||
placeholder="Enter your full address"
|
||||
rows="3"
|
||||
helper-text="Include street, city, state, and zip"
|
||||
error-text="Please enter a complete address"
|
||||
required
|
||||
></ion-textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Review (Min/Max Length)</h2>
|
||||
<ion-textarea
|
||||
id="review-textarea"
|
||||
label="Product Review"
|
||||
label-placement="floating"
|
||||
fill="outline"
|
||||
placeholder="Write your review"
|
||||
rows="5"
|
||||
minlength="50"
|
||||
maxlength="500"
|
||||
counter="true"
|
||||
helper-text="Between 50-500 characters"
|
||||
error-text="Review must be between 50-500 characters"
|
||||
required
|
||||
></ion-textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Optional Notes</h2>
|
||||
<ion-textarea
|
||||
id="notes-textarea"
|
||||
label="Additional Notes"
|
||||
label-placement="floating"
|
||||
fill="outline"
|
||||
placeholder="Any additional notes (optional)"
|
||||
rows="3"
|
||||
helper-text="This field is optional"
|
||||
></ion-textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ion-padding">
|
||||
<ion-button id="submit-btn" expand="block" disabled>Submit Form</ion-button>
|
||||
<ion-button id="reset-btn" expand="block" fill="outline">Reset Form</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
// Simple validation logic
|
||||
const textareas = document.querySelectorAll('ion-textarea');
|
||||
const submitBtn = document.getElementById('submit-btn');
|
||||
const resetBtn = document.getElementById('reset-btn');
|
||||
|
||||
// Track which fields have been touched
|
||||
const touchedFields = new Set();
|
||||
|
||||
// Validation functions
|
||||
const validators = {
|
||||
'description-textarea': (value) => {
|
||||
return value && value.length >= 20;
|
||||
},
|
||||
'comments-textarea': (value) => {
|
||||
return value && value.trim().length > 0;
|
||||
},
|
||||
'bio-textarea': (value) => {
|
||||
return value && value.length > 0 && value.length <= 200;
|
||||
},
|
||||
'address-textarea': (value) => {
|
||||
// Simple check for address - must contain at least some text with numbers
|
||||
if (!value || value.length < 10) return false;
|
||||
// Check if it contains at least one number (for street/zip)
|
||||
return /\d/.test(value);
|
||||
},
|
||||
'review-textarea': (value) => {
|
||||
return value && value.length >= 50 && value.length <= 500;
|
||||
},
|
||||
'notes-textarea': () => true, // Always valid (optional)
|
||||
};
|
||||
|
||||
function validateField(textarea) {
|
||||
const textareaId = textarea.id;
|
||||
const value = textarea.value;
|
||||
const isValid = validators[textareaId] ? validators[textareaId](value) : true;
|
||||
|
||||
// Only show validation state if field has been touched
|
||||
if (touchedFields.has(textareaId)) {
|
||||
if (isValid) {
|
||||
textarea.classList.remove('ion-invalid');
|
||||
textarea.classList.add('ion-valid');
|
||||
} else {
|
||||
textarea.classList.remove('ion-valid');
|
||||
textarea.classList.add('ion-invalid');
|
||||
}
|
||||
textarea.classList.add('ion-touched');
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
let allValid = true;
|
||||
textareas.forEach((textarea) => {
|
||||
if (textarea.id !== 'notes-textarea') {
|
||||
const isValid = validateField(textarea);
|
||||
if (!isValid) {
|
||||
allValid = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
submitBtn.disabled = !allValid;
|
||||
return allValid;
|
||||
}
|
||||
|
||||
// Add event listeners
|
||||
textareas.forEach((textarea) => {
|
||||
// Mark as touched on blur
|
||||
textarea.addEventListener('ionBlur', (e) => {
|
||||
touchedFields.add(textarea.id);
|
||||
validateField(textarea);
|
||||
validateForm();
|
||||
|
||||
const isInvalid = textarea.classList.contains('ion-invalid');
|
||||
if (isInvalid) {
|
||||
console.log('Field marked invalid:', textarea.label, textarea.errorText);
|
||||
}
|
||||
});
|
||||
|
||||
// Validate on input
|
||||
textarea.addEventListener('ionInput', (e) => {
|
||||
if (touchedFields.has(textarea.id)) {
|
||||
validateField(textarea);
|
||||
validateForm();
|
||||
}
|
||||
});
|
||||
|
||||
// Also validate on focus loss via native blur
|
||||
textarea.addEventListener('focusout', (e) => {
|
||||
// Small delay to ensure Ionic's classes are updated
|
||||
setTimeout(() => {
|
||||
touchedFields.add(textarea.id);
|
||||
validateField(textarea);
|
||||
validateForm();
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
|
||||
// Reset button
|
||||
resetBtn.addEventListener('click', () => {
|
||||
textareas.forEach((textarea) => {
|
||||
textarea.value = '';
|
||||
textarea.classList.remove('ion-valid', 'ion-invalid', 'ion-touched');
|
||||
});
|
||||
touchedFields.clear();
|
||||
submitBtn.disabled = true;
|
||||
});
|
||||
|
||||
// Submit button
|
||||
submitBtn.addEventListener('click', () => {
|
||||
if (validateForm()) {
|
||||
alert('Form submitted successfully!');
|
||||
}
|
||||
});
|
||||
|
||||
// Initial setup
|
||||
validateForm();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -81,6 +81,13 @@ export class Textarea implements ComponentInterface {
|
||||
*/
|
||||
@State() hasFocus = false;
|
||||
|
||||
/**
|
||||
* Track validation state for proper aria-live announcements
|
||||
*/
|
||||
@State() isInvalid = false;
|
||||
|
||||
private validationObserver?: MutationObserver;
|
||||
|
||||
/**
|
||||
* The color to use from your application's color palette.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
@ -328,6 +335,16 @@ export class Textarea implements ComponentInterface {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the textarea is in an invalid state based on Ionic validation classes
|
||||
*/
|
||||
private checkValidationState(): boolean {
|
||||
const hasIonTouched = this.el.classList.contains('ion-touched');
|
||||
const hasIonInvalid = this.el.classList.contains('ion-invalid');
|
||||
|
||||
return hasIonTouched && hasIonInvalid;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const { el } = this;
|
||||
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
|
||||
@ -336,6 +353,27 @@ export class Textarea implements ComponentInterface {
|
||||
() => this.notchSpacerEl,
|
||||
() => this.labelSlot
|
||||
);
|
||||
|
||||
// Watch for class changes to update validation state
|
||||
if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
|
||||
this.validationObserver = new MutationObserver(() => {
|
||||
const newIsInvalid = this.checkValidationState();
|
||||
if (this.isInvalid !== newIsInvalid) {
|
||||
this.isInvalid = newIsInvalid;
|
||||
// Force a re-render to update aria-describedby immediately
|
||||
forceUpdate(this);
|
||||
}
|
||||
});
|
||||
|
||||
this.validationObserver.observe(el, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class'],
|
||||
});
|
||||
}
|
||||
|
||||
// Always set initial state
|
||||
this.isInvalid = this.checkValidationState();
|
||||
|
||||
this.debounceChanged();
|
||||
if (Build.isBrowser) {
|
||||
document.dispatchEvent(
|
||||
@ -364,6 +402,12 @@ export class Textarea implements ComponentInterface {
|
||||
this.notchController.destroy();
|
||||
this.notchController = undefined;
|
||||
}
|
||||
|
||||
// Clean up validation observer to prevent memory leaks
|
||||
if (this.validationObserver) {
|
||||
this.validationObserver.disconnect();
|
||||
this.validationObserver = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
componentWillLoad() {
|
||||
@ -628,22 +672,22 @@ export class Textarea implements ComponentInterface {
|
||||
* Renders the helper text or error text values
|
||||
*/
|
||||
private renderHintText() {
|
||||
const { helperText, errorText, helperTextId, errorTextId } = this;
|
||||
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
|
||||
|
||||
return [
|
||||
<div id={helperTextId} class="helper-text">
|
||||
{helperText}
|
||||
<div id={helperTextId} class="helper-text" aria-live="polite">
|
||||
{!isInvalid ? helperText : null}
|
||||
</div>,
|
||||
<div id={errorTextId} class="error-text">
|
||||
{errorText}
|
||||
<div id={errorTextId} class="error-text" role="alert">
|
||||
{isInvalid ? errorText : null}
|
||||
</div>,
|
||||
];
|
||||
}
|
||||
|
||||
private getHintTextID(): string | undefined {
|
||||
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
||||
const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
|
||||
|
||||
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
||||
if (isInvalid && errorText) {
|
||||
return errorTextId;
|
||||
}
|
||||
|
||||
@ -777,7 +821,7 @@ export class Textarea implements ComponentInterface {
|
||||
onFocus={this.onFocus}
|
||||
onKeyDown={this.onKeyDown}
|
||||
aria-describedby={this.getHintTextID()}
|
||||
aria-invalid={this.getHintTextID() === this.errorTextId}
|
||||
aria-invalid={this.isInvalid ? 'true' : undefined}
|
||||
{...this.inheritedAttributes}
|
||||
>
|
||||
{value}
|
||||
|
||||
Reference in New Issue
Block a user