@moni-labs/moni-ui 0.4.5 → 0.4.6

package/src/components/moni-select.ts

@@ -1679,6 +1679,7 @@ export class MoniSelect extends MoniElement {
 		return html`<div class=${classMap(fieldClasses)} part="field">
 			${leading}
 			<input
+				id="input"
 				type="text"
 				part="input"
 				.value=${displayValue}
@@ -1693,6 +1694,7 @@ export class MoniSelect extends MoniElement {
 			/>
 			${this.label
 				? html`<label
+						for="input"
 						part="label"
 						class=${classMap({ active: isActive })}
 						>${this.label}</label

package/src/components/moni-stepper.ts

@@ -108,6 +108,10 @@ export class MoniStepper extends MoniElement {
 				stepElement.orientation = this.orientation;
 				stepElement.completed = stepIndex < this.current;
 				stepElement.active = stepIndex === this.current;
+				// El <ol> proyecta hosts <moni-step>, no <li>. Sin un rol explícito
+				// el árbol aplanado deja una lista cuyos hijos no son elementos de
+				// lista, y los lectores de pantalla no anuncian "1 de N".
+				stepElement.setAttribute('role', 'listitem');
 			});
 		});
 	}

package/src/components/moni-text-field.test.ts

@@ -229,3 +229,28 @@ describe('moni-text-field', () => {
 		expect(MoniTextField.Inputmask.isValid('123-456', { mask: '999-999' })).toBe(true);
 	});
 });
+
+describe('moni-text-field · nombre accesible', () => {
+	/*
+	 * El <label> y el <input> son hermanos dentro del mismo shadow root: sin
+	 * `for`/`id` no hay asociación y el lector de pantalla anuncia el campo sin
+	 * nombre. La adyacencia no se puede cambiar porque `field-styles` la usa
+	 * (`:focus + label`) para elevar la etiqueta, así que la unión va por id.
+	 */
+	it('asocia la etiqueta con el input mediante for/id', async () => {
+		const el = document.createElement('moni-text-field') as HTMLElement & {
+			label: string;
+			updateComplete: Promise<unknown>;
+		};
+		el.label = 'Correo';
+		document.body.appendChild(el);
+		await el.updateComplete;
+
+		const input = el.shadowRoot?.querySelector('input');
+		const label = el.shadowRoot?.querySelector('label');
+		expect(input?.id).toBe('input');
+		expect(label?.getAttribute('for')).toBe('input');
+		expect(input?.nextElementSibling).toBe(label);
+		el.remove();
+	});
+})

package/src/components/moni-text-field.ts

@@ -494,6 +494,7 @@ export class MoniTextField extends MoniElement {
 		return html`<div class=${classMap(fieldClasses)} part="field">
 			${leading}
 			<input
+				id="input"
 				part="input"
 				type=${this.type}
 				placeholder=${placeholder}
@@ -506,6 +507,7 @@ export class MoniTextField extends MoniElement {
 			/>
 			${this.label
 				? html`<label
+						for="input"
 						part="label"
 						class=${classMap({ active: isActive })}
 						>${this.label}</label

package/src/components/moni-textarea.test.ts

@@ -171,3 +171,19 @@ describe('moni-textarea', () => {
 		expect(textarea.style.blockSize).toBe('');
 	});
 });
+
+describe('moni-textarea · nombre accesible', () => {
+	it('asocia la etiqueta con el textarea mediante for/id', async () => {
+		const el = document.createElement('moni-textarea') as MoniTextarea;
+		el.label = 'Comentario';
+		document.body.appendChild(el);
+		await el.updateComplete;
+
+		const control = el.shadowRoot?.querySelector('textarea');
+		const label = el.shadowRoot?.querySelector('label');
+		expect(control?.id).toBe('input');
+		expect(label?.getAttribute('for')).toBe('input');
+		expect(control?.nextElementSibling).toBe(label);
+		el.remove();
+	});
+})

package/src/components/moni-textarea.ts

@@ -357,6 +357,7 @@ export class MoniTextarea extends MoniElement {
 		return html`<div class=${classMap(fieldClasses)} part="field">
 			${leading}
 			<textarea
+				id="input"
 				part="input"
 				rows=${this.rows}
 				maxlength=${ifDefined(this.maxlength ?? undefined)}
@@ -369,6 +370,7 @@ export class MoniTextarea extends MoniElement {
 			></textarea>
 			${this.label
 				? html`<label
+						for="input"
 						part="label"
 						class=${classMap({ active: isActive })}
 						>${this.label}</label