fix(ui): add keyboard-resizable drawers with Escape handling and focus restoration.

[terabytesoftw]

Pull Request

• Breaking change (fix or feature that would cause existing functionality to change)
• Bugfix (non-breaking change that fixes an issue)
• CI/build configuration
• Documentation update
• New feature (non-breaking change that adds functionality)
• Refactoring (no functional changes)

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 59937548-796d-4447-8696-00c0a98dd047

📥 Commits

Reviewing files that changed from the base of the PR and between 5ef24d9 and bfa239c.

⛔ Files ignored due to path filters (3)

• resources/assets/dist/js/debug.min.js is excluded by !**/dist/**, !**/*.min.js
• resources/assets/dist/js/focus.min.js is excluded by !**/dist/**, !**/*.min.js
• resources/assets/dist/js/toolbar.min.js is excluded by !**/dist/**, !**/*.min.js

📒 Files selected for processing (9)

• CHANGELOG.md
• README.md
• resources/src/core/debug.js
• resources/src/toolbar/element.js
• resources/src/toolbar/focus.js
• resources/src/toolbar/position.js
• resources/src/toolbar/toolbar-shadow.css
• resources/tests/toolbar-runtime.test.js
• stryker.config.mjs

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

📜 Recent review details

⏰ Context from checks skipped due to timeout. (2)

• GitHub Check: mutation / PHP 8.5-ubuntu-latest
• GitHub Check: mutation / PHP 8.5-ubuntu-latest

🔇 Additional comments (9)

resources/src/toolbar/element.js (1)

25-30: LGTM!

Also applies to: 46-50, 68-68, 149-152, 201-201, 227-227, 346-358, 1014-1016, 1039-1048, 1078-1080, 1101-1101, 1112-1127, 1147-1148, 1172-1219

resources/src/core/debug.js (1)

15-15: LGTM!

Also applies to: 299-307

resources/src/toolbar/focus.js (1)

1-78: LGTM!

resources/tests/toolbar-runtime.test.js (1)

6-12: LGTM!

Also applies to: 30-45, 231-384, 417-428

resources/src/toolbar/toolbar-shadow.css (1)

651-656: LGTM!

Also applies to: 671-676

resources/src/toolbar/position.js (1)

20-47: LGTM!

README.md (1)

58-60: LGTM!

CHANGELOG.md (1)

25-25: LGTM!

stryker.config.mjs (1)

7-7: LGTM!

---

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • Drawers can be resized using the keyboard with Arrow, Home, and End keys.
  • Pressing Escape closes open drawers and restores focus to the appropriate toolbar control.
  • Improved accessibility for drawer controls and resize handles, including ARIA updates and visible focus indicators.
• Documentation
  • Added guidance covering drawer focus restoration, Escape-key closing, and keyboard resizing.
• Bug Fixes
  • Improved drawer closing behavior and focus handling across toolbar interactions.

Walkthrough

The toolbar now restores focus after drawer interactions, closes drawers with Escape, validates iframe close messages, and supports keyboard resizing with bounded height and synchronized ARIA values. Tests, documentation, styling, and mutation-test configuration cover the changes.

Changes

Toolbar focus and Escape handling

Layer / File(s)	Summary
Focus and Escape handling resources/src/toolbar/focus.js, resources/src/core/debug.js, resources/src/toolbar/element.js, resources/tests/toolbar-runtime.test.js	Focus utilities locate toolbar controls, validate drawer-close messages, and request parent closure for eligible Escape events. Toolbar logic closes active drawers and restores focus. Tests cover focus, message validation, and Escape behavior.
Drawer lifecycle and accessibility wiring resources/src/toolbar/element.js, resources/src/toolbar/toolbar-shadow.css	Drawer opening focuses the close control. Closing restores focus to the trigger or toolbar toggle. Resize handles expose separator semantics and visible keyboard focus styling.
Keyboard drawer resizing resources/src/toolbar/position.js, resources/src/toolbar/element.js, resources/tests/toolbar-runtime.test.js, README.md, CHANGELOG.md, stryker.config.mjs	Home, End, ArrowUp, and ArrowDown resize drawers within bounded heights. ARIA values track the rendered height. Tests and documentation describe the behavior, and mutation testing includes the focus module.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to bfa23

This feature adds keyboard-resizable drawers with Escape handling and focus restoration; no actionable merge-blocking risk remains based on the supplied evidence.

Sequence Diagram(s)

sequenceDiagram
  participant DebugContext as resources/src/core/debug.js
  participant FocusUtilities as resources/src/toolbar/focus.js
  participant ParentToolbar as YiiDebugToolbar
  participant Drawer as toolbar drawer
  DebugContext->>FocusUtilities: requestParentToolbarDrawerClose(event, browserWindow, dropdownWasOpen)
  FocusUtilities->>ParentToolbar: postMessage drawer-close request
  ParentToolbar->>FocusUtilities: validate close-drawer message
  FocusUtilities-->>ParentToolbar: accepted message
  ParentToolbar->>Drawer: close drawer and restore focus

Loading

Poem

I’m a rabbit with keys in my paw,
I hop through drawers without a flaw.
Escape makes the panels close,
Focus returns where it arose.
Arrows stretch the drawer just right.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the keyboard-resizable drawers, Escape handling, and focus restoration added by the pull request.
Description check	✅ Passed	The description identifies the change as a non-breaking new feature, which matches the documented UI functionality.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/add-keyboard-resizable-drawers

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.93%. Comparing base (5ef24d9) to head (bfa239c).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff            @@
##               main      #16   +/-   ##
=========================================
  Coverage     99.93%   99.93%           
  Complexity     1498     1498           
=========================================
  Files           130      130           
  Lines          5853     5853           
=========================================
  Hits           5849     5849           
  Misses            4        4           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.