Harvester Dashboard and the Rancher UI Library: Backporting Accessible Comboboxes to React 17

Integration Feasibility

The newer Combobox and Select primitives in the Rancher UI library are likely incompatible with Harvester's React 17 codebase. These components typically rely on React 18 features, such as the useId hook for generating stable accessibility IDs and concurrent rendering APIs for managing focus and live-region updates. Attempting to import these into a React 17 environment will likely result in runtime errors or build-time type mismatches.

Analysis of Implementation Paths

There are two primary paths to resolve the accessibility gaps in the VM-create wizard:

• Backporting via Shims: While a compatibility shim could potentially polyfill useId to allow the components to render, this approach is high-risk. A shim can approximate the HTML markup, but it cannot replicate the internal React 18 fiber logic that ensures precise focus management and screen-reader announcements. This may result in "half-working" accessibility that passes basic checks but fails in real-world usage.
• Waiting for React 18 Migration: This is the lower-risk path. Since Harvester tracks Rancher Dashboard releases, waiting for the official upstream migration prevents codebase drift and ensures that accessibility primitives are used as intended by the library authors.

Verification Steps

To confirm the compatibility status before making a architectural decision, perform the following scoped checks:

1. Peer Dependency Audit: Check the package.json of the @rancher/ui library. If react is listed as a peer dependency with a version requirement of ^18.0.0, the components will not function in React 17.
2. Import Test: In a development branch, attempt to import the Combobox component into a isolated test page:

   import { Combobox } from '@rancher/ui';

   Observe if the build fails or if the browser console reports TypeError: (0, _react.useId) is not a function.
3. Hook Inspection: Search the Rancher UI source code for useId or useDeferredValue. If these are present without a version-based fallback, the components are strictly React 18+.

Assumptions and Uncertainties

This analysis assumes the 1.3.x series of Harvester remains on React 17. It is uncertain whether the Rancher UI library has implemented internal polyfills for these hooks; however, standard library patterns usually favor peer dependency requirements over internal shims to avoid bundle bloat. Furthermore, since there is no automated accessibility gate in CI, any manual backport would require extensive manual verification with screen readers (e.g., NVDA or VoiceOver) to ensure no regressions were introduced.

Required Diagnostic Detail: Are there specific accessibility failures (e.g., missing aria-expanded states or keyboard trap issues) in the current custom dropdowns that must be fixed immediately, or can they be mitigated with CSS/HTML patches while waiting for React 18?