Bug corregido — duplicación de enunciado + fade mal posicionado
This commit is contained in:
@@ -63,7 +63,11 @@ body {
|
|||||||
.skip-link:focus { left: 4px; }
|
.skip-link:focus { left: 4px; }
|
||||||
|
|
||||||
/* ── Screen reader only ── */
|
/* ── Screen reader only ── */
|
||||||
.sr-only {
|
/* El legend/label de los widgets dentro del wizard se oculta visualmente —
|
||||||
|
el enunciado ya se muestra una sola vez en .wizard-prompt-block. Se deja
|
||||||
|
el texto accesible (nombre del fieldset/label) en vez de quitarlo. */
|
||||||
|
.sr-only,
|
||||||
|
.wizard-answer-area .question-legend {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
@@ -586,9 +590,13 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Área de respuesta: altura máxima + scroll interno + fade inferior cuando hay más abajo. */
|
/* Área de respuesta: altura máxima + scroll interno + fade inferior cuando hay más abajo.
|
||||||
|
flex: 0 1 auto (NO flex:1) — mide según su contenido, nunca se estira a llenar el alto
|
||||||
|
disponible. Si creciera con flex:1, una pregunta corta (3 opciones) dejaría la caja con
|
||||||
|
espacio vacío abajo y el fade ::after (sticky bottom:0) quedaría flotando justo después
|
||||||
|
del contenido real, lejos del borde inferior visual de la caja — en vez de pegado a él. */
|
||||||
.wizard-answer-area {
|
.wizard-answer-area {
|
||||||
flex: 1;
|
flex: 0 1 auto;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
max-height: 360px;
|
max-height: 360px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|||||||
@@ -40,13 +40,14 @@ export function CheckboxGroup({
|
|||||||
{required && <span className="required-mark" aria-hidden="true"> *</span>}
|
{required && <span className="required-mark" aria-hidden="true"> *</span>}
|
||||||
{required && <span className="sr-only"> (obligatorio)</span>}
|
{required && <span className="sr-only"> (obligatorio)</span>}
|
||||||
</legend>
|
</legend>
|
||||||
{maxSelect !== null ? (
|
{/* El hint estático ("Podés marcar más de una opción") ya vive en
|
||||||
|
wizard-prompt-block (question.hint) — acá solo el contador vivo,
|
||||||
|
que es información que no está en ningún otro lado. */}
|
||||||
|
{maxSelect !== null && (
|
||||||
<p className="max-select-hint" aria-live="polite">
|
<p className="max-select-hint" aria-live="polite">
|
||||||
Elegí hasta {maxSelect} opciones
|
Elegí hasta {maxSelect} opciones
|
||||||
{value.length > 0 && ` · ${value.length}/${maxSelect} seleccionadas`}
|
{value.length > 0 && ` · ${value.length}/${maxSelect} seleccionadas`}
|
||||||
</p>
|
</p>
|
||||||
) : (
|
|
||||||
<p className="max-select-hint">Podés marcar más de una opción</p>
|
|
||||||
)}
|
)}
|
||||||
<div className="options-list" role="list">
|
<div className="options-list" role="list">
|
||||||
{options.map((opt) => {
|
{options.map((opt) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user