cps-timepicker: fields and AM/PM selector don't reflow (WCAG 1.4.10)

Abierto
  • ¿Algo no está bien?
#911 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
49/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
angular, playwright, scss, typescript
Área
accessibility, frontend

Línea de trabajo

Read projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.scss around &-body and investigate how the timepicker fits within cps-scheduler at desktop widths. Then run the reflow and 200% text tests in playwright/cps-ui-kit/accessibility-cps-ui-kit.spec.ts; done means the timepicker fits at the specified widths, those tests pass, and desktop rendering of both components is unchanged.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Problem

cps-timepicker doesn't reflow (WCAG 1.4.10). The hours, minutes and seconds fields, their delimiters and the AM/PM selector stay on one row. That row is about 362 px wide. At 320 px and 640 px wide, about 245 px is available in a docs example, so the AM/PM selector sticks out and the page scrolls sideways. The same happens at 1280 px with 200% text.

Found by the reflow tests added in #908.

Where

projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.scss:29 (&-body): a flex row with no wrapping.

Why it's not a one-line fix

flex-wrap: wrap on the body fixes the timepicker page, but it changes the desktop layout of cps-scheduler. There the timepicker sits in a row that's already too narrow for it (the Monthly view gets about 72 px taller at 1280 px). The timepicker has to wrap without changing the scheduler at desktop widths, so fix it together with, or after, the scheduler reflow issue.

Acceptance criteria

  • At 320 px and 640 px, and at 1280 px with 200% text, the timepicker fits its container.
  • Remove the Timepicker entry from KNOWN_FAILURES in playwright/cps-ui-kit/accessibility-cps-ui-kit.spec.ts. Its reflow and 200% text tests then pass.
  • Desktop rendering of both the timepicker and the scheduler is unchanged.
Lenguaje dominante
TypeScript
Estrellas
9
Forks
8
Merge medio
1 d 1 h
PR fusionados (30 d)
23

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de AbsaOSS/cps-shared-ui

Todos los issues de AbsaOSS/cps-shared-ui

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.