fix(dropdown): keep checkbox trigger semantics and open on Enter #669

[intermetric]

Summary by CodeRabbit

• New Features
  • Dropdowns can now be triggered by non-button elements, which receive button semantics and keyboard support when needed. Existing roles and tab order are preserved.
  • Native controls retain their built-in behavior when used as dropdown triggers.
  • Added a dropdown example with a checkbox trigger.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: TEDI-Design-System/angular/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: af53e366-22e4-465a-adf2-864193564b69

📥 Commits

Reviewing files that changed from the base of the PR and between 52d884f and 00c8e52.

📒 Files selected for processing (3)

• src/tedi/components/overlay/dropdown/dropdown-trigger/dropdown-trigger.directive.ts
• src/tedi/components/overlay/dropdown/dropdown.component.spec.ts
• src/tedi/components/overlay/dropdown/dropdown.stories.ts

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

---

📝 Walkthrough

Walkthrough

The dropdown trigger directive now distinguishes native interactive controls from other elements. It adds button semantics to non-native triggers and applies keyboard handling based on trigger type. Tests and a Storybook story cover checkbox and non-button triggers.

Changes

Dropdown trigger behavior

Layer / File(s)	Summary
Trigger semantics and keyboard handling src/tedi/components/overlay/dropdown/dropdown-trigger/dropdown-trigger.directive.ts	The directive detects native interactive elements and preserves consumer-provided role and tabindex attributes. Enter toggles eligible triggers. Space toggles non-native triggers on keyup after a matching keydown.
Trigger tests and checkbox story src/tedi/components/overlay/dropdown/dropdown.component.spec.ts, src/tedi/components/overlay/dropdown/dropdown.stories.ts	Tests cover button, checkbox, text-input, and generic div triggers. The new story demonstrates a checkbox trigger with menu actions that update the selection count.

Priority: ➖ Normal

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

Change: Bug fix

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant GenericDivTrigger
  participant DropdownTriggerDirective
  participant Dropdown
  User->>GenericDivTrigger: Press Space
  GenericDivTrigger->>DropdownTriggerDirective: keydown
  DropdownTriggerDirective->>DropdownTriggerDirective: Record pending Space press
  User->>GenericDivTrigger: Release Space
  GenericDivTrigger->>DropdownTriggerDirective: keyup
  DropdownTriggerDirective->>Dropdown: Toggle dropdown

Loading

Suggested reviewers: mart-sessman

Merge Risk: ⚪ Minimal · up to 00c8e

The dropdown trigger change has no identified issue that needs resolution before merging; proceed with normal checks.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: preserving checkbox trigger semantics and opening the dropdown with Enter. It is concise and directly related to the implementation and tests.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 3…
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

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

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.}

[github-actions]

♿ Accessibility — ✅ no blocking violations

No accessibility violations in the components changed by this PR.

⚠️ Pre-existing — 19 violations in components not changed here (warn only)

Component	Rules	Stories
TEDI-Ready/Components/Overlay/Modal	unknown ×19	19

Stories

• TEDI-Ready/Components/Overlay/Modal — Custom width, Default, Footer Variants, Fullscreen, No backdrop close, No close button, Open For Visual Test play-test, Open Fullscreen For Visual Test play-test, Open Position Drawer For Visual Test play-test, Open Position Top For Visual Test play-test, Open Small For Visual Test play-test, Open Wide Page Scroll For Visual Test play-test, Position, Scrollable Content, Size, Template-based (deprecated), Width, With date picker and toast, With header description

🔕 Known issues — 19 stories marked todo (warn only)

Stories

• TEDI-Ready/Components/Form/DateField — Open For Visual Test
• TEDI-Ready/Content/Calendar — Availability, Day Statuses, Header Variants, Multiple Selected Dates, No Controls, Range, With Footer, With Weeks Count
• TEDI-Ready/Content/TextGroup — Types
• TEDI-Ready/Layout/Header — Logged In With Sidenav
• TEDI-Ready/Layout/SideNav — Collapsible Toggle, Default, Medium Sidenav Items, Second Level Menu Items, Second Level Menu Items Parents Are Links, Small Sidenav Items, Third Level Menu Items, Third Level Menu Items Parents Are Links

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!