OCPBUGS-105273: Fix nested interactive controls on Search page

[rhamilto]

Analysis / Root cause:
The Search page accordion toggle (co-search__accordion-toggle) renders an "Add to navigation" / "Remove from navigation" <Button> as a child of <AccordionToggle>, which itself renders as a <button>. This creates a <button> nested inside a <button>, violating WCAG 4.1.2 (nested-interactive). Axe flags this as a "serious" accessibility violation — nested interactive controls are not always announced by screen readers and cause focus problems for assistive technologies. Example failure: https://gcsweb-ci.apps.ci.l2s4.p1.openshiftapps.com/gcs/test-platform-results/pr-logs/pull/openshift_console/16741/pull-ci-openshift-console-main-e2e-playwright/2085257705513029632/artifacts/e2e-playwright/test/artifacts/playwright-report/index.html#?q=s%3Afailed&testId=8a1e1e4ea9c5d3c5a917-c26f79b8e02bada30d0e

Solution description:
Move the pin toggle <Button> out of <AccordionToggle> and into <AccordionItem> as a sibling element. Updated SCSS positions it absolutely over the accordion header to maintain the same visual layout.

Screenshots / screen recording:

Screen.Recording.2026-08-06.at.9.09.55.AM.mov

Test setup:
None required.

Test cases:

• Verify the "Add to navigation" / "Remove from navigation" button on the Search page still functions correctly
• Run axe accessibility audit and confirm no nested-interactive violations
• Verify keyboard navigation works correctly for both the accordion toggle and the pin button
• Run resource-crud.spec.ts Playwright tests (PersistentVolume CRUD lifecycle) and confirm the a11y check passes

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:
https://redhat.atlassian.net/browse/OCPBUGS-105273

Reviewers and assignees:

Summary by CodeRabbit

• Bug Fixes
  • Improved the positioning of the pin/unpin control in search accordion items.
  • Ensured the pin control remains accessible and visually aligned independently of the accordion toggle.
  • Preserved existing pinning behavior, labels, and icons.

[openshift-merge-bot]

Pipeline controller notification
This repo is configured to use the pipeline controller. Second-stage tests will be triggered either automatically or after lgtm label is added, depending on the repository configuration. The pipeline controller will automatically detect which contexts are required and will utilize /test Prow commands to trigger the second stage.

For optional jobs, comment /test ? to see a list of all defined jobs. To trigger manually all jobs from second stage use /pipeline required command.

This repository is configured in: LGTM mode

[openshift-ci-robot]

@rhamilto: This pull request references Jira Issue OCPBUGS-105273, which is invalid:

• expected the bug to target the "5.0.0" version, but no target version was set

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Analysis / Root cause:
The Search page accordion toggle (co-search__accordion-toggle) renders an "Add to navigation" / "Remove from navigation" <Button> as a child of <AccordionToggle>, which itself renders as a <button>. This creates a <button> nested inside a <button>, violating WCAG 4.1.2 (nested-interactive). Axe flags this as a "serious" accessibility violation — nested interactive controls are not always announced by screen readers and cause focus problems for assistive technologies.

Solution description:
Move the pin toggle <Button> out of <AccordionToggle> and into <AccordionItem> as a sibling element. Updated SCSS positions it absolutely over the accordion header to maintain the same visual layout.

Screenshots / screen recording:
TODO: Add before/after screenshots

Test setup:
None required.

Test cases:

• Verify the "Add to navigation" / "Remove from navigation" button on the Search page still functions correctly
• Run axe accessibility audit and confirm no nested-interactive violations
• Verify keyboard navigation works correctly for both the accordion toggle and the pin button
• Run resource-crud.spec.ts Playwright tests (PersistentVolume CRUD lifecycle) and confirm the a11y check passes

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:
https://redhat.atlassian.net/browse/OCPBUGS-105273

Reviewers and assignees:

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[coderabbitai]

Walkthrough

The resource dropdown now renders the pin toggle as an accordion item sibling. CSS positions the toggle absolutely within the accordion while preserving its visibility, labels, icons, and click behavior.

Changes

Resource dropdown pin toggle

Layer / File(s)	Summary
Pin toggle positioning and rendering frontend/public/components/_resource-dropdown.scss, frontend/public/components/search.tsx	The accordion provides a relative positioning context. The pin toggle renders outside AccordionToggle and uses absolute positioning. Its behavior and visual content remain unchanged.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: logonoff

🚥 Pre-merge checks | ✅ 15

✅ Passed checks (15 passed)

Check name	Status	Explanation
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.
Stable And Deterministic Test Names	✅ Passed	The PR changes only a TSX component and SCSS; no Ginkgo test declarations or test titles were added or modified, and no dynamic test-name values are present.
Test Structure And Quality	✅ Passed	The commit changes only two frontend files and contains no Go or Ginkgo test code, so these Ginkgo test-quality requirements are not applicable.
Microshift Test Compatibility	✅ Passed	The pull request changes only frontend SCSS and TSX files; it adds no Ginkgo e2e tests or test declarations requiring MicroShift compatibility review.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	The PR changes only frontend SCSS and TSX; it adds no Ginkgo e2e tests or multi-node assumptions requiring SNO review.
Topology-Aware Scheduling Compatibility	✅ Passed	The PR changes only React/SCSS search UI files. They add no deployment manifests, operators, controllers, replicas, affinities, node selectors, tolerations, or PDBs, so topology-aware scheduling is...
Ote Binary Stdout Contract	✅ Passed	The PR changes only frontend TSX and SCSS; its commit has no Go, OTE binary, suite setup, or process-level stdout changes.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	The PR changes only two frontend files and adds no Ginkgo or e2e tests, IPv4 assumptions, or external connectivity requirements.
No-Weak-Crypto	✅ Passed	The PR changes only accordion JSX and SCSS positioning; diff additions contain no weak-crypto algorithms, custom crypto, or secret/token comparisons.
Container-Privileges	✅ Passed	The PR changes only two SCSS/TSX source files; neither is a container/Kubernetes manifest, and the patch contains no privilege-related settings.
No-Sensitive-Data-In-Logs	✅ Passed	The patch only changes JSX placement and SCSS positioning; it adds no console/logger calls or logging of passwords, tokens, PII, hostnames, or customer data.
Title check	✅ Passed	The title clearly identifies the Jira issue and the primary fix for nested interactive controls on the Search page.
Description check	✅ Passed	The description covers root cause, solution, visual evidence, testing, browser conformance, additional information, and reviewer guidance.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[rhamilto]

/pipeline required

[openshift-merge-bot]

Scheduling tests matching the pipeline_run_if_changed or not excluded by pipeline_skip_if_only_changed parameters:
/test e2e-gcp-console
/test e2e-playwright

[rhamilto]

/test e2e-playwright

[rhamilto]

/jira refresh

[openshift-ci-robot]

@rhamilto: This pull request references Jira Issue OCPBUGS-105273, which is valid. The bug has been moved to the POST state.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (5.0.0) matches configured target version for branch (5.0.0)
• bug is in the state New, which is one of the valid states (NEW, ASSIGNED, POST)

Details

In response to this:

/jira refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[logonoff]

/lgtm

[openshift-merge-bot]

Tests from second stage were triggered manually. Pipeline can be controlled only manually, until HEAD changes. Use command to trigger second stage.

[shahsahil264]

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff, rhamilto, shahsahil264

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [logonoff,rhamilto]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[rhamilto]

/verified by @rhamilto

[openshift-ci-robot]

@rhamilto: This PR has been marked as verified by @rhamilto.

Details

In response to this:

/verified by @rhamilto

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[rhamilto]

/retest

[openshift-ci]

@rhamilto: all tests passed!

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

[openshift-ci-robot]

@rhamilto: Jira Issue Verification Checks: Jira Issue OCPBUGS-105273
✔️ This pull request was pre-merge verified.
✔️ All associated pull requests have merged.
✔️ All associated, merged pull requests were pre-merge verified.

Jira Issue OCPBUGS-105273 has been moved to the MODIFIED state and will move to the VERIFIED state when the change is available in an accepted nightly payload. 🕓

Details

In response to this:

Analysis / Root cause:
The Search page accordion toggle (co-search__accordion-toggle) renders an "Add to navigation" / "Remove from navigation" <Button> as a child of <AccordionToggle>, which itself renders as a <button>. This creates a <button> nested inside a <button>, violating WCAG 4.1.2 (nested-interactive). Axe flags this as a "serious" accessibility violation — nested interactive controls are not always announced by screen readers and cause focus problems for assistive technologies. Example failure: https://gcsweb-ci.apps.ci.l2s4.p1.openshiftapps.com/gcs/test-platform-results/pr-logs/pull/openshift_console/16741/pull-ci-openshift-console-main-e2e-playwright/2085257705513029632/artifacts/e2e-playwright/test/artifacts/playwright-report/index.html#?q=s%3Afailed&testId=8a1e1e4ea9c5d3c5a917-c26f79b8e02bada30d0e

Solution description:
Move the pin toggle <Button> out of <AccordionToggle> and into <AccordionItem> as a sibling element. Updated SCSS positions it absolutely over the accordion header to maintain the same visual layout.

Screenshots / screen recording:

Screen.Recording.2026-08-06.at.9.09.55.AM.mov

Test setup:
None required.

Test cases:

• Verify the "Add to navigation" / "Remove from navigation" button on the Search page still functions correctly
• Run axe accessibility audit and confirm no nested-interactive violations
• Verify keyboard navigation works correctly for both the accordion toggle and the pin button
• Run resource-crud.spec.ts Playwright tests (PersistentVolume CRUD lifecycle) and confirm the a11y check passes

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:
https://redhat.atlassian.net/browse/OCPBUGS-105273

Reviewers and assignees:

Summary by CodeRabbit

• Bug Fixes
• Improved the positioning of the pin/unpin control in search accordion items.
• Ensured the pin control remains accessible and visually aligned independently of the accordion toggle.
• Preserved existing pinning behavior, labels, and icons.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[openshift-merge-robot]

Fix included in release 5.0.0-0.nightly-2026-08-07-234136