Add keyboard event handlers to fix mouse-events-have-key-events accessibility warning

[RichardGabelman]

Purpose

Fix react-doctor/mouse-events-have-key-events accessibility warning by pairing onMouseOver and onMouseOut handlers with their keyboard equivalents onFocus and onBlur in ValidationErrorBoundary.

Related Issues

• #27902

Related PRs

• N/A

Checklist

• e2e cypress tests locally verified. (for internal contributers)
• Manually ran React Doctor and the warning no longer appears
• UX/UI review done on the final implementation.
• Documentation provided. (Add links if there are any)
• Relevant backend changes deployed and verified
• Unit tests provided. (Add links if there are any)
• Integration tests provided. (Add links if there are any)

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines
• Ran FindSecurityBugs plugin and verified report
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets

Developer Checklist (Mandatory)

• Complete the Developer Checklist in the related product-is issue to track any behavioral change or migration impact.
• No behavioural change
• No migration impact
• No new configuration introduced

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: 8523a8e8-bc10-4f8f-9202-1cd2fe33845c

📥 Commits

Reviewing files that changed from the base of the PR and between 6ee4ece and 843f5c0.

📒 Files selected for processing (1)

• features/admin.flow-builder-core.v1/components/validation-panel/validation-error-boundary.tsx

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

• features/admin.flow-builder-core.v1/components/validation-panel/validation-error-boundary.tsx

---

📝 Walkthrough

Walkthrough

ValidationErrorBoundary gains keyboard focus support by making its wrapper <div> focusable with tabIndex when notifications are present, and adding onFocus and onBlur handlers that toggle the active state. These handlers apply the same guard conditions as the existing hover behavior (hasNotification and disableErrorBoundaryOnHover), extending error-highlight activation to keyboard navigation.

Changes

Focus/blur active state for ValidationErrorBoundary

Layer / File(s)	Summary
onFocus/onBlur handlers and keyboard focus support features/admin.flow-builder-core.v1/components/validation-panel/validation-error-boundary.tsx	Adds tabIndex="0" to the wrapper <div> when hasNotification is true to make it keyboard-focusable, and adds onFocus and onBlur handlers that toggle active state when hasNotification is true and disableErrorBoundaryOnHover is false, matching the existing onMouseEnter/onMouseLeave logic.

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: adding keyboard event handlers to fix an accessibility warning.
Description check	✅ Passed	The description is mostly complete with Purpose, Related Issues, and Developer Checklist sections filled out appropriately, though some template sections were intentionally marked as N/A or struck through.
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.
Changeset Required	✅ Passed	Pull request includes changeset file .changeset/brown-mice-lay.md with required packages @wso2is/console and @wso2is/admin.applications.v1 marked as patch version.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

• 🛠️ create changeset

---

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

features/admin.flow-builder-core.v1/components/validation-panel/validation-error-boundary.tsx (1)

104-117: ⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Add tabIndex to make the wrapper focusable for keyboard users.

The onFocus and onBlur handlers won't fire from keyboard navigation because <div> elements are not focusable by default. Without tabIndex={0}, keyboard users pressing Tab won't be able to focus this element, and the accessibility fix won't work as intended.

♿ Proposed fix to enable keyboard focus

        <div
            className={ classNames(
                {
                    active: hasNotification && active && disableErrorBoundaryOnHover,
                    [ notificationType ]: hasNotification && !!notificationType,
                    padded: hasNotification && !disableErrorBoundaryOnHover,
                    "validation-error-boundary": hasNotification
                }
            ) }
            data-componentid={ componentId }
+           tabIndex={ hasNotification ? 0 : undefined }
            onMouseOver={ () => hasNotification && disableErrorBoundaryOnHover && setActive(true) }
            onMouseOut={ () => hasNotification && disableErrorBoundaryOnHover && setActive(false) }
            onFocus={ () => hasNotification && disableErrorBoundaryOnHover && setActive(true) }
            onBlur={ () => hasNotification && disableErrorBoundaryOnHover && setActive(false) }
        >

Note: tabIndex={0} is conditionally applied only when there's a notification, so the wrapper only enters the tab order when it has validation errors to display.

🤖 Prompt for 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.

In
`@features/admin.flow-builder-core.v1/components/validation-panel/validation-error-boundary.tsx`
around lines 104 - 117, The `<div>` element with onFocus and onBlur handlers is
not focusable via keyboard navigation because div elements are not focusable by
default. Add a tabIndex prop to the div element in the validation-error-boundary
component and conditionally set it to 0 when hasNotification is true. This will
allow keyboard users to focus the element via Tab navigation, enabling the
onFocus and onBlur accessibility handlers to work as intended.

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

Outside diff comments:
In
`@features/admin.flow-builder-core.v1/components/validation-panel/validation-error-boundary.tsx`:
- Around line 104-117: The `<div>` element with onFocus and onBlur handlers is
not focusable via keyboard navigation because div elements are not focusable by
default. Add a tabIndex prop to the div element in the validation-error-boundary
component and conditionally set it to 0 when hasNotification is true. This will
allow keyboard users to focus the element via Tab navigation, enabling the
onFocus and onBlur accessibility handlers to work as intended.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: bf6e65d6-46b4-4c7d-bc21-e49847ccaeb0

📥 Commits

Reviewing files that changed from the base of the PR and between 1825338 and 6ee4ece.

📒 Files selected for processing (1)

• features/admin.flow-builder-core.v1/components/validation-panel/validation-error-boundary.tsx