All Docs
FeaturesDepositClearUpdated March 11, 2026

Fixing Focus Traps & Auto-Open Behaviour in the Wear & Tear Slide-Over

Fixing Focus Traps & Auto-Open Behaviour in the Wear & Tear Slide-Over

Release: v0.1.105 · Category: Accessibility

Background

The Deduction Claim Builder lets landlords and agents record itemised deposit deductions category by category. For each category, a Wear & Tear Guide slide-over is available to help users apply fair, evidence-based deductions in line with the Renters' Rights Act.

In earlier versions, two separate UI layers were involved:

ComponentPositionz-index
AddDeductionDialog backdropfixedz-50
WearTearSlideOverfixed (rendered outside backdrop)z-40 / z-50

This stacking arrangement caused two distinct problems.

Problem 1 — Unexpected auto-open

Whenever a user selected a deduction category while creating a new deduction, the slide-over opened automatically:

if (cat && !editDeduction) {
  setSlideOverOpen(true)
}

For keyboard and screen reader users this was disorienting — focus shifted to a new layer with no deliberate user action. It also made the flow feel unpredictable for sighted users on their first visit.

Fix

The auto-open logic has been removed. The slide-over only opens when the user explicitly clicks the W&T Guide button. The guide is still one click away; it is simply no longer forced open.

Problem 2 — Broken focus management

Because the slide-over is rendered outside the dialog backdrop, the browser's native focus management had no awareness of the slide-over as a modal layer. This meant:

  • Screen reader users received no announcement that the slide-over had appeared.
  • Keyboard users could Tab out of the slide-over and back into the underlying dialog — or off-screen entirely.
  • Pressing Esc risked closing the parent dialog instead of (or as well as) the slide-over.

Fix

Four targeted changes restore correct accessible behaviour:

  1. role="dialog" + aria-modal="true" — marks the slide-over as a modal dialog to assistive technology, causing screen readers to confine their virtual cursor to the slide-over content.

  2. Programmatic focus on open — when the slide-over opens, focus is moved to its first interactive element (typically the close button or the first guide section link).

  3. Independent focus trap — Tab and Shift+Tab cycle only within the slide-over while it is open, preventing focus from leaking into the underlying dialog or the page behind it.

  4. aria-live="polite" announcement — a live region announces the slide-over's appearance so screen reader users are informed without an abrupt interruption.

  5. Esc key scope — Esc now closes only the slide-over. The parent AddDeductionDialog remains open, preserving any in-progress deduction data.

What stays the same

  • The Wear & Tear Guide content is unchanged.
  • The W&T Guide button is still present in the AddDeductionDialog toolbar.
  • No data model or API changes are included in this release.
  • Existing tenancy records and saved deductions are unaffected.

For developers and testers

If your test suite includes automated checks for the Deduction Claim Builder, update any test that:

  • Asserts the slide-over opens after a category is selected (it no longer does automatically).
  • Simulates keyboard navigation through the slide-over without explicitly clicking W&T Guide first.

The corrected test flow is:

  1. Open AddDeductionDialog.
  2. Select a deduction category.
  3. Assert slide-over is not visible.
  4. Click W&T Guide.
  5. Assert slide-over is visible and focused.
  6. Press Esc.
  7. Assert slide-over is closed and AddDeductionDialog is still open.

Accessibility checklist (post-fix)

  • Slide-over has role="dialog" and aria-modal="true"
  • Focus moves to first interactive element on open
  • Focus is trapped within the slide-over
  • aria-live="polite" region announces slide-over appearance
  • Esc closes slide-over only
  • Auto-open on category selection removed
  • Parent dialog remains open when slide-over is dismissed