Skip to content

Accessibility#135

Merged
Sobyt483 merged 6 commits into
mainfrom
accessibility
May 25, 2026
Merged

Accessibility#135
Sobyt483 merged 6 commits into
mainfrom
accessibility

Conversation

@Sobyt483
Copy link
Copy Markdown
Contributor

@Sobyt483 Sobyt483 commented May 21, 2026

Summary by CodeRabbit

  • New Features

    • Visual feedback when copying values to clipboard — shows confirmation briefly.
  • Bug Fixes / Accessibility

    • Service cards now support Enter key activation and are keyboard-focusable.
    • Added accessible names to dashboard, cards, table actions, dialogs, and value toggles for screen readers.
    • Auto-focuses the "Add Card" button when entering edit mode.
    • Added descriptive tooltips for table edit and delete actions.

Review Change Stack

Sobyt483 added 2 commits May 21, 2026 17:24
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
@Sobyt483 Sobyt483 requested review from a team as code owners May 21, 2026 13:39
@Sobyt483 Sobyt483 self-assigned this May 21, 2026
@Sobyt483 Sobyt483 added the enhancement New feature or request label May 21, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 21, 2026

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Accessibility and interaction updates: adds accessibleName attributes across dashboard and table components, enables Enter-key activation on visited-service cards, auto-focuses the Add Card button after entering edit mode, and tracks clipboard copy success with a new signal in ValueCell.

Changes

Accessibility and interaction enhancements

Layer / File(s) Summary
Keyboard support and edit-mode auto-focus
projects/ngx/cards/visited-service-card/visited-service-card.component.html, projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
Visited service card now emits cardClick on Enter key and adds role/tabindex. Dashboard injects Injector, adds a viewChild for addCardBtn, and uses afterNextRender to focus it when edit mode is enabled.
Dashboard toolbar and card/section accessible names
projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html, projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.html, projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.html
Toolbar buttons ("Add Card", actions menu, custom actions, "Edit View") receive computed accessibleName bindings; remove buttons for cards and sections gain accessible names derived from metadata.
Table card buttons, dialogs, and action tooltips
projects/ngx/declarative-ui/table-card/declarative-table-card.component.html, projects/ngx/declarative-ui/table-card/declarative-table-card.component.ts
Search/create buttons and create/edit/delete dialogs gain accessibleName bindings with fallbacks; edit and delete action definitions now include explicit tooltip values ("Edit", "Delete").
ValueCell accessible names and copy success feedback
projects/ngx/declarative-ui/value-cell/value-cell.component.html, projects/ngx/declarative-ui/value-cell/value-cell.component.ts
Secret-value toggle, action buttons, and copy icon use interactive mode and dynamic accessibleName/design/name based on state. ValueCell adds copySuccess = signal(false) and sets it true on successful clipboard write, resetting after 2s.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

enhancement

Suggested reviewers

  • gkrajniak

Poem

🐰 I hopped from key to button bright,
Made labels sing so screen readers write,
A focused Add Card greets the day,
And "Copied" sparkles — then fades away,
Accessibility — hop, delight! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title 'Accessibility' is vague and overly generic. While the PR does address accessibility improvements, the single word provides no specific insight into what accessibility changes were made or their scope. Consider a more descriptive title like 'Add keyboard interaction and accessible names to dashboard components' to clearly indicate the primary changes.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
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.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ 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 accessibility

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 and usage tips.

@Sobyt483 Sobyt483 moved this to In review in OpenMFP Development May 21, 2026
@Sobyt483 Sobyt483 linked an issue May 21, 2026 that may be closed by this pull request
6 tasks
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

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 `@projects/ngx/cards/visited-service-card/visited-service-card.component.html`:
- Around line 3-6: The element is given button semantics but only activates on
Enter; add handling for the Space key so keyboard users get expected button
behavior by invoking the same action and preventing default scrolling. Update
the template for VisitedServiceCardComponent to handle keydown.space the same as
keydown.enter (call cardClick.emit(path())) and call $event.preventDefault() to
stop page scroll; alternatively implement a component method (e.g.,
onCardKeydown(event)) that checks event.code or event.key for ' ' / 'Space' and
'Enter', prevents default for Space, and emits via cardClick.emit(path()) so
both keys activate the control.

In `@projects/ngx/declarative-ui/value-cell/value-cell.component.ts`:
- Around line 105-110: The copyValue clipboard call only handles the success
path; update the navigator.clipboard.writeText(this.value() || '') call inside
copyValue to handle rejections (e.g., add a .catch or use try/await with
try/catch) so copySuccess is reset on failure and errors are surfaced (set
this.copySuccess.set(false) in the failure branch and optionally log the error).
Locate the clipboard invocation in copyValue and ensure both success and failure
paths explicitly update the copySuccess signal.
🪄 Autofix (Beta)

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: defaults

Review profile: CHILL

Plan: Pro

Run ID: b00e6410-1673-4a52-9890-be7ecb8a371b

📥 Commits

Reviewing files that changed from the base of the PR and between 09e2942 and b496e1e.

📒 Files selected for processing (9)
  • projects/ngx/cards/visited-service-card/visited-service-card.component.html
  • projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.html
  • projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html
  • projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
  • projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.html
  • projects/ngx/declarative-ui/table-card/declarative-table-card.component.html
  • projects/ngx/declarative-ui/table-card/declarative-table-card.component.ts
  • projects/ngx/declarative-ui/value-cell/value-cell.component.html
  • projects/ngx/declarative-ui/value-cell/value-cell.component.ts

Comment thread projects/ngx/declarative-ui/value-cell/value-cell.component.ts
@Sobyt483 Sobyt483 enabled auto-merge (squash) May 25, 2026 11:27
@Sobyt483 Sobyt483 merged commit 6839b4f into main May 25, 2026
8 checks passed
@Sobyt483 Sobyt483 deleted the accessibility branch May 25, 2026 11:29
@github-project-automation github-project-automation Bot moved this from In review to Done in OpenMFP Development May 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

🔧 Dashboard Productize: Accessibility

2 participants