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

projects/cps-ui-kit/styles/_mixins.scss の focus-ring ミックスインと、cps-dialog.component.scss の107行目付近にある :focus-visible ルールから始めます。再現手順は、ドラッグ可能なダイアログの例を開き、ヘッダーをクリックし、ArrowDown を押して、elementFromPoint がボタンではなくダイアログを返すことを確認するだけです。リングの疑似要素がクリックを奪わず、リングの見た目が変わらず、focus-ring のテストの隣に置いた Playwright スペックで「Close dialog」を正常にクリックできれば完了です。

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;
}