Skip to content

fix(web): make dataset sidebar menu items buttons - #40248

Draft
lyzno1 wants to merge 1 commit into
mainfrom
codex/a11y-dataset-sidebar-menu-item
Draft

fix(web): make dataset sidebar menu items buttons#40248
lyzno1 wants to merge 1 commit into
mainfrom
codex/a11y-dataset-sidebar-menu-item

Conversation

@lyzno1

@lyzno1 lyzno1 commented Aug 9, 2026

Copy link
Copy Markdown
Member

Summary

  • Render dataset sidebar actions as native button type="button" elements.
  • Preserve the existing pointer behavior, default prevention, and propagation boundary.
  • Query the public role and accessible name in tests, and cover Tab focus plus Enter activation.
  • Prune the exact two obsolete jsx-a11y suppressions for this component.

Behavior contract

  • Every visible dataset sidebar menu item is exposed as a named button.
  • Pointer click and Enter activation invoke the supplied action once.
  • Activating an item does not trigger an ancestor action.
  • The item remains safe when rendered inside a form because its type is explicitly button.

Visual regression review

A temporary Storybook comparison rendered the previous div and the new button under the same production CSS. It was removed before commit.

  • Item geometry: 192 x 32 px for both
  • Padding: 6 x 8 px for both
  • Icon geometry: 16 x 16 px with identical relative coordinates
  • Text geometry: 32.88 x 20 px with identical relative coordinates
  • Hover background: rgba(200, 206, 218, 0.2) for both
  • text-start explicitly normalizes the button alignment to the previous div and avoids UA-centered text

The only intended new visual state is the browser focus indicator during keyboard navigation.

Validation

  • pnpm exec vp check app/components/app-sidebar/dataset-info/menu-item.tsx app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx
  • node scripts/lint-a11y.mjs app/components/app-sidebar/dataset-info/menu-item.tsx
  • pnpm exec vp test run app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx (21/21)
  • pnpm check (0 errors; 2059 existing warnings)

From Codex

@github-actions github-actions Bot added the web This relates to changes on the web. label 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 (e036075) to head (0bae0d4).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main   #40248   +/-   ##
=======================================
  Coverage   86.41%   86.42%           
=======================================
  Files        5107     5107           
  Lines      290731   290749   +18     
  Branches    57917    57923    +6     
=======================================
+ Hits       251245   251268   +23     
+ Misses      34545    34540    -5     
  Partials     4941     4941           
Flag Coverage Δ
dify-ui 93.49% <ø> (ø)
web 86.11% <ø> (+<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.

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

Labels

web This relates to changes on the web.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant