cps-dialog: focus ring on the dialog frame covers the dialog and blocks all clicks inside it

Abierto Apto para principiantes
  • ¿Algo no está bien?
#948 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
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
72/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
angular, css, playwright, scss, typescript
Área
frontend

Línea de trabajo

Empieza con el mixin focus-ring en projects/cps-ui-kit/styles/_mixins.scss y la regla :focus-visible en cps-dialog.component.scss alrededor de la línea 107. Para reproducirlo, abre el ejemplo del diálogo arrastrable, haz clic en el encabezado, pulsa ArrowDown y comprueba que elementFromPoint devuelve el diálogo en lugar del botón. Está terminado cuando los pseudo-elementos del anillo no capturan clics, el anillo se ve igual que antes y una spec de Playwright junto a las pruebas de focus-ring hace clic correctamente en «Close dialog».

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

Descripción

bug

Summary

When a cps-dialog has keyboard focus on its frame, the focus ring drawn around the dialog covers the whole dialog and takes every pointer event. Buttons, inputs and links inside the dialog stop responding to clicks until the focus moves elsewhere.

The state is easy to reach: click on the dialog's header, then press a key. The click focuses the dialog frame (div.cps-dialog[tabindex="-1"]), and the key press makes the browser treat that focus as keyboard focus (:focus-visible matches), which turns the ring on.

Environment

  • cps-ui-kit 21.33.0. The source of 22.3.0 has the same CSS for this ring, but I did not run that version.
  • Reproduced in Chromium and WebKit (automated browsers).
  • Reproduced on the kit's own documentation site, so it does not depend on any application code. I do not know which kit version the site is currently built with.

Steps to reproduce

  1. Open https://absaoss.github.io/cps-shared-ui/dialog/examples and click the Draggable dialog button.
  2. In the dialog, click Disable closing. This stops Esc from closing the dialog, which would otherwise hide the problem. (Skipping this step and pressing ArrowDown in step 4 gives the same result.)
  3. Click on the dialog's header, in a bare part of it.
  4. Press Esc (or ArrowDown).
  5. Click anything inside the dialog, for example the Close dialog button.

Expected

The dialog shows its focus ring, and everything inside it still responds to clicks.

Actual

The dialog shows its focus ring, but clicks on everything inside it do nothing. The cursor behaves as if the dialog were one inert block.

Observed in the browser after step 4:

  • document.activeElement is div.cps-dialog, and .matches(':focus-visible') is true.
  • document.elementFromPoint(...) at the centre of the Close dialog button returns div.cps-dialog, not the button.
  • getComputedStyle(dialog, '::before') is content: "", inset: -1px, border: 1px solid, pointer-events: auto. ::after is the same with inset: -2px.
  • Playwright's click on the button fails with: <div role="dialog" tabindex="-1" data-testid="cps-dialog" ... class="cps-dialog ..."> intercepts pointer events.

Cause

The dialog frame's focus ring comes from the focus-ring mixin:

  • projects/cps-ui-kit/src/lib/services/cps-dialog/internal/components/cps-dialog/cps-dialog.component.scss, around line 107: &:focus-visible { @include focus-ring(0.0625rem, 0.125rem, inherit); }
  • projects/cps-ui-kit/styles/_mixins.scss, @mixin focus-ring: it sets position: relative on the element and draws the ring with ::before and ::after, both position: absolute with a negative inset and a border.

On a small control that is harmless. On the dialog frame the two pseudo-elements are as large as the whole dialog. They are positioned, so they paint above the dialog's non-positioned content, and because pointer-events is left at its default they become the hit-test target for every point inside the dialog.

Esc is only one way in. A dialog whose closeOnEscape is false (or disableClose is set) stays open after Esc, so it is the clearest repro, but any key press after the header click does it: ArrowDown works on the docs site in both browsers. In WebKit, Shift alone does not turn the ring on, but ArrowDown and Esc do.

Suggested fix

The ring is decorative, so it should never be a pointer target. The smallest change is in the mixin, which also protects every other component that uses it:

&::before,
&::after {
  content: '';
  position: absolute;
  pointer-events: none; // the ring is decorative and must never take clicks
  border-radius: $radius;
}

If changing the mixin is too broad, put the same pointer-events: none on the ring's pseudo-elements for the dialog frame only.

The ring must stay visible; only its pointer behaviour changes. Other uses of the mixin on large containers (for example the resizable handles in the same file, around lines 195 and 285) may be worth checking for the same effect. I did not test those.

Acceptance criteria

  • After clicking the dialog header and pressing Esc (with closeOnEscape: false) or ArrowDown, buttons and inputs inside the dialog can be clicked.
  • The focus ring is still drawn exactly as before.
  • A Playwright test covers it, next to the existing focus-ring specs under playwright/cps-ui-kit/components/: open the draggable dialog example, click the header, press ArrowDown, then click Close dialog and expect the dialog to close.

Workaround for applications

.cps-dialog:focus-visible::before,
.cps-dialog:focus-visible::after {
  pointer-events: none;
}
Lenguaje dominante
TypeScript
Estrellas
9
Forks
8
Merge medio
1 d 6 h
PR fusionados (30 d)
25

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.