Skip to content

Fix feedback dialog focus ring clipping#394

Open
Farhan (fkb032) wants to merge 3 commits into
developfrom
fix/report-issue-focus-ring
Open

Fix feedback dialog focus ring clipping#394
Farhan (fkb032) wants to merge 3 commits into
developfrom
fix/report-issue-focus-ring

Conversation

@fkb032

Copy link
Copy Markdown
Contributor

Summary

  • Fixes clipped focus-ring paint in the Report Issue dialog by adding scroll-container padding around the main form body.
  • Applies the same focus-ring buffer to the nested “Share with the team” checkbox list.
  • Adds a render-based regression test that verifies the actual dialog scroll containers include focus-ring buffer classes.

Original problem screenshot: attached in the first PR comment.

Test Plan

  • git fetch origin develop && git rev-list --left-right --count HEAD...origin/develop -> 1 0 after commit, meaning this branch is one commit ahead of latest origin/develop and not behind.
  • bun run test:unit src/components/widget/feedback/feedback-dialog.test.tsx
  • bun run check -> 0 errors, existing 131 warnings
  • bun -F native build
  • Computer Use: opened the rebuilt branch app, opened Report Issue, focused the textarea, tabbed to Current app state, and verified focus rings have left/top breathing room.
  • $claude-review: one outer claude-fable-5 / xhigh review call; valid findings addressed before PR creation.

Manual QA instructions:

  1. Run the native app from this branch.
  2. Click Report Issue.
  3. Confirm the textarea focus outline is fully visible on all sides.
  4. Press Tab until Current app state is focused under Share with the team.
  5. Confirm that checkbox focus ring is fully visible and not clipped on the left/top edges.

Docs

  • No docs update needed

@github-actions

github-actions Bot commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

🎨 Storybook preview

Open Storybook preview

Updated for cf4e1fc


❌ Failed snapshots (2)

These stories' HTML snapshots changed. Update snapshots ↗ to regenerate baselines and open a PR:

Settings/AutoConfigField › Controls

Settings/AutoConfigField › Controls

Settings/AutoTuningSection › Evolution Settings

Settings/AutoTuningSection › Evolution Settings

@github-actions

github-actions Bot commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

📋 PR Overview

Lines changed 43 (+41 / -2)
Files 1 added, 1 modified, 0 deleted
Draft / WIP no
Has Test Plan yes
No Test Plan Needed no
New UI components no
New Storybook stories no
New Rust modules no
New TS source files no
New tests yes (1)
package.json touched no
Cargo.toml touched no
Infra / CI touched no

🔬 Coverage

Report Lines Statements Functions Branches
apps/native/coverage/coverage-summary.json 27.8% 27.8% 25.8% 20.9%

Generated by 🚫 dangerJS against cf4e1fc

@fkb032

Copy link
Copy Markdown
Contributor Author

Original problem screenshot:

original-focus-ring-clipped

@linear-code

linear-code Bot commented Jun 19, 2026

Copy link
Copy Markdown

ENG-569

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested it and it works, yay!

However:

  • Storybooks seem broken
  • A couple of small improvements could be done in the code

Comment on lines +55 to +57
const FEEDBACK_DIALOG_BODY_CLASS = "space-y-6 flex-1 overflow-y-auto pl-1 py-1 pr-3";
const FEEDBACK_SHARE_OPTIONS_CLASS =
"space-y-2 max-h-[28vh] overflow-y-auto pl-1 py-1 pr-2";

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extracting these vars out seems unnecessary, it doesn't hurt though.

Comment on lines +19 to +35
describe("FeedbackDialog focus ring buffers", () => {
it("keeps focus-ring paint inside scrollable dialog containers", async () => {
useWidgetStore.getState().openFeedback(FeedbackType.Issue);

render(<FeedbackDialog />);

const textarea = await screen.findByLabelText("DESCRIBE WHAT HAPPENED");
const dialogBody = textarea.closest(".overflow-y-auto");

expect(dialogBody).toHaveClass("pl-1", "py-1", "pr-3");

const shareCheckbox = screen.getByRole("checkbox", { name: "Current app state" });
const shareOptions = shareCheckbox.closest(".overflow-y-auto");

expect(shareOptions).toHaveClass("pl-1", "py-1", "pr-2");
});
});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test just repeats the implementation. I would remove it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants