Skip to content

fix(web): use button for chat variable panel close - #40333

Queued
lyzno1 wants to merge 3 commits into
mainfrom
codex/a11y-chat-variable-panel-close
Queued

fix(web): use button for chat variable panel close#40333
lyzno1 wants to merge 3 commits into
mainfrom
codex/a11y-chat-variable-panel-close

Conversation

@lyzno1

@lyzno1 lyzno1 commented Aug 9, 2026

Copy link
Copy Markdown
Member

Summary

  • replace the clickable close div with a native button type="button"
  • give the control the existing localized Close name
  • hide the decorative close glyph from the accessibility tree
  • replace the CSS-selector test query with a role/name query
  • remove this file's exact two JSX accessibility suppressions

Ownership and scope

This layer changes only the Conversation Variables panel close action. Variable CRUD, collaboration events, modal behavior, panel dimensions, and the adjacent tips control are unchanged. It is the root of this same-owner stack and can merge independently.

Validation

  • pnpm --dir web exec vp test run app/components/workflow/panel/chat-variable-panel/__tests__/index.spec.tsx — 4/4 passed
  • pnpm --dir web lint:a11y 'app/components/workflow/panel/chat-variable-panel/index.tsx' — passed
  • pnpm check — 0 errors / 2059 existing warnings
  • git diff --check — passed
  • the new role/name assertion failed against the old non-semantic close element before the production change

Visual regression review

Expected visual delta: none in pointer interaction; a native keyboard focus indicator is expected.

Please verify:

  • the close control remains 24×24 and aligned with the tips control
  • the 16×16 glyph, tertiary color, spacing, and panel header height are unchanged
  • hover does not gain a new filled background
  • light and dark modes keep the existing close-glyph contrast
  • Tab focus and Enter/Space activation close the panel without shifting layout

The button keeps the former 24×24 flex geometry. Explicit border-0, bg-transparent, p-0, and appearance-none isolate native button chrome without changing the normal state.

Rollback

Revert this PR alone. The two higher layers are optional refinements and do not change this close handler.

Final visual guard

The converted native button now also uses appearance-none, closing the remaining cross-browser UA appearance path while preserving the existing normal-state geometry and tokens.

@lyzno1 lyzno1 changed the title codex/a11y chat variable panel close fix(web): use button for chat variable panel close Aug 9, 2026
@codecov

codecov Bot commented Aug 9, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.42%. Comparing base (7522ae1) to head (2c29d75).
⚠️ Report is 14 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #40333      +/-   ##
==========================================
- Coverage   86.47%   86.42%   -0.05%     
==========================================
  Files        5264     5107     -157     
  Lines      294867   290741    -4126     
  Branches    59029    57924    -1105     
==========================================
- Hits       254976   251287    -3689     
+ Misses      34950    34513     -437     
  Partials     4941     4941              
Flag Coverage Δ
cli ?
dify-ui 93.49% <ø> (ø)
web 86.11% <100.00%> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

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

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@lyzno1
lyzno1 force-pushed the codex/a11y-chat-variable-panel-close branch from 946e714 to 6a4fd21 Compare August 9, 2026 14:31
@github-actions github-actions Bot added the web This relates to changes on the web. label Aug 9, 2026
@lyzno1
lyzno1 marked this pull request as ready for review August 9, 2026 15:47
@lyzno1
lyzno1 requested review from iamjoel and zxhlyh as code owners August 9, 2026 15:47
@dosubot dosubot Bot added the lgtm This PR has been approved by a maintainer label Aug 10, 2026
@lyzno1
lyzno1 added this pull request to the merge queue Aug 10, 2026
Any commits made after this event will not be merged.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

lgtm This PR has been approved by a maintainer web This relates to changes on the web.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants