fix(search): fix a11y violations in Storybook stories #599 by ly-tempel-bitweb · Pull Request #600 · TEDI-Design-System/angular

ly-tempel-bitweb · 2026-08-06T07:21:41Z

Summary by CodeRabbit

Documentation
- Expanded form-control guidance for Search and Slider components.
- Clarified checkbox and dropdown Angular value-binding behavior.
- Added Search usage, accessibility, landmark naming, and suggestion-panel guidance.
- Updated checkbox reactive-forms examples.
Accessibility
- Added explicit accessible labels to search examples and variants.
- Refined combobox and dialog semantics for result actions and suggestion panels.
- Added conditional control references where applicable.
- Improved keyboard focus transfer and restoration when opening or closing result actions.

coderabbitai · 2026-08-06T07:22:22Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: e83591f1-8980-474e-9e00-cd17a7227ecc

📥 Commits

Reviewing files that changed from the base of the PR and between a2ba418 and 99075ff.

📒 Files selected for processing (2)

skills/tedi-angular/references/forms.md
tedi/components/form/search/search.stories.ts

🚧 Files skipped from review as they are similar to previous changes (1)

skills/tedi-angular/references/forms.md

📝 Walkthrough

Walkthrough

The pull request updates form-control documentation and Search accessibility examples. It adds Search and Slider guidance, clarifies Checkbox and Dropdown behavior, and applies conditional ARIA associations, dialog semantics, focus management, and accessible labels to Search stories.

Changes

Forms and Search updates

Layer / File(s)	Summary
Form-control guidance `skills/tedi-angular/references/forms.md`	The documentation adds Search and Slider controls, clarifies Checkbox and Dropdown behavior, updates the checkbox example, and documents Search usage and ARIA patterns.
Search story accessibility semantics `tedi/components/form/search/search.stories.ts`	Search stories add conditional `aria-controls`, combobox and dialog semantics, deferred focus transfer, focus restoration, and explicit accessible labels for size and state variants.

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

Sequence Diagram(s)

sequenceDiagram
  participant SearchInput
  participant ResultActionsDialog
  participant FocusManager
  SearchInput->>ResultActionsDialog: Open result-actions panel
  ResultActionsDialog->>FocusManager: Defer focus into dialog
  SearchInput->>ResultActionsDialog: Transfer focus with ArrowDown
  ResultActionsDialog->>FocusManager: Restore focus to input on close

Possibly related PRs

TEDI-Design-System/angular#539: Extends the Search accessibility and focus behavior introduced in this PR.
TEDI-Design-System/angular#542: Shares TEDI Angular form-control documentation and accessibility patterns.

Suggested reviewers: airikej

🚥 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 identifies accessibility fixes in the Search Storybook stories, which is the main change in the pull request.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/599-search-a11y-violations-in-storybook-stories

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: dependency version conflict. Check your lock file or package.json.

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

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

github-actions · 2026-08-06T07:26:30Z

♿ Accessibility — ✅ no blocking violations

No accessibility violations in the components changed by this PR.

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

Component	Rules	Stories
TEDI-Ready/Components/Form/InputGroup	`aria-input-field-name` ×3	3

Stories

TEDI-Ready/Components/Form/InputGroup — All Controls, End Dynamic, Start Dynamic

🔕 Known issues — 21 stories marked `todo` (warn only)

Stories

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, Logged Out With Search, With Inline Search, With Mobile Bottom Search
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 · 2026-08-06T07:26:34Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@skills/tedi-angular/references/forms.md`:
- Around line 158-159: Correct the ARIA guidance in
skills/tedi-angular/references/forms.md lines 158-159 and
tedi/components/form/search/search.stories.ts lines 322-326: state that
aria-controls is permitted on plain text inputs, while aria-expanded requires a
role="combobox" popup trigger; alternatively, the text input may trigger a
role="dialog" panel with aria-haspopup="dialog".

In `@tedi/components/form/search/search.stories.ts`:
- Line 367: Update the search story’s dialog popup behavior around the combobox
input and the element marked role="dialog": move focus into the dialog on
ArrowDown, handle Escape within the dialog, and restore focus to the combobox
input whenever the popup closes, including result selection and other close
paths.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 69eb1347-7ab8-40fd-be93-650347e9a508

📥 Commits

Reviewing files that changed from the base of the PR and between 767daf0 and a2ba418.

📒 Files selected for processing (2)

skills/tedi-angular/references/forms.md
tedi/components/form/search/search.stories.ts

fix(search): fix a11y violations in Storybook stories #599

a2ba418

ly-tempel-bitweb temporarily deployed to github-pages August 6, 2026 07:25 — with GitHub Actions Inactive

coderabbitai Bot reviewed Aug 6, 2026

View reviewed changes

Comment thread skills/tedi-angular/references/forms.md Outdated

Comment thread tedi/components/form/search/search.stories.ts

ly-tempel-bitweb linked an issue Aug 6, 2026 that may be closed by this pull request

[Search]: a11y violations in Storybook stories #599

Closed

fix(search): add CR fixes #599

99075ff

ly-tempel-bitweb temporarily deployed to github-pages August 6, 2026 08:37 — with GitHub Actions Inactive

ly-tempel-bitweb requested review from airikej and mart-sessman August 6, 2026 08:38

mart-sessman approved these changes Aug 6, 2026

View reviewed changes

ly-tempel-bitweb merged commit eb9667d into rc Aug 6, 2026
28 checks passed

ly-tempel-bitweb deleted the fix/599-search-a11y-violations-in-storybook-stories branch August 6, 2026 08:50

coderabbitai Bot mentioned this pull request Aug 6, 2026

fix(popover,search,header): fix Header a11y violations and document HeaderTop #601 #602

Merged

Navigation Menu

Uh oh!

fix(search): fix a11y violations in Storybook stories #599 - #600

fix(search): fix a11y violations in Storybook stories #599#600
ly-tempel-bitweb merged 2 commits into
rcfrom
fix/599-search-a11y-violations-in-storybook-stories

ly-tempel-bitweb commented Aug 6, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Aug 6, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

github-actions Bot commented Aug 6, 2026

Uh oh!

codecov Bot commented Aug 6, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

ly-tempel-bitweb commented Aug 6, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Aug 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

github-actions Bot commented Aug 6, 2026

♿ Accessibility — ✅ no blocking violations

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

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

Uh oh!

codecov Bot commented Aug 6, 2026

Codecov Report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ly-tempel-bitweb commented Aug 6, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Aug 6, 2026 •

edited

Loading

🔕 Known issues — 21 stories marked `todo` (warn only)