fix(rsp): NaN was appearing on action-bar by marissahuysentruyt · Pull Request #165 · adobe/spectrum-hub

marissahuysentruyt · 2026-10-01T22:33:14Z

Description

Fixes the React Spectrum Action Bar playground preview rendering NaN instead of the authored selected-item count, 224.

Root-level RSP snippet attributes were copied directly into the preview props, bypassing the JSX value parser already used for nested components. As a result, selectedItemCount="{224}" reached Action Bar as the literal string "{224}" rather than the number 224.

This change:

Adds a shared buildRspProps() helper for parsing RSP snippet attributes.
Uses the same parsing behavior for root and nested RSP components.
Preserves numeric JSX expressions as numbers while leaving numeric-looking string attributes as strings.
Adds regression coverage for numeric JSX expressions on root component props.

Screenshots (if applicable)

🚫 Before

https://spectrum.adobe.com/web/rsp/components/action-bar

✅ After

https://action-bar--spectrum-hub--adobe.aem.live/web/rsp/components/action-bar

Type of change

Related issue(s)

fixes [TICKET NUMBER]

Validation steps

This PR has visual elements, so it was reviewed by a designer.
This PR has code changes, and our linters still pass.
This PR affects production code, so it was browser tested (see below).
This PR affects existing pages, so automated E2E tests were run (see below).
This PR has new code, so new tests were added or updated, and they pass.
This PR has copy changes, so copy was proofread and approved.
The content of this PR requires documentation, so a detailed description of the component's purpose, requirements, quirks, and instructions for use by designers and developers was added, along with accessibility information if pertinent.

To Validate

URL for testing:
https://action-bar--spectrum-hub--adobe.aem.live/web/rsp/components/action-bar

Make sure all PR checks have passed.
Pull down the action-bar branch or visit the branch preview.
Open the React Spectrum Action Bar component page.
Confirm the playground preview displays a selected-item count of 224, not NaN.
Confirm the code disclosure contains selectedItemCount={224}.
Confirm the Edit, Copy, and Delete action buttons still render.
Check another RSP component with a numeric JSX prop, such as Avatar, Calendar, Meter, ProgressBar, and confirm its preview still renders correctly.
Verify the change in a browser with aem up.

Accessibility testing checklist

Keyboard
1. Open the React Spectrum Action Bar playground at the validation URL.
2. Press Tab to move through the rendered Action Bar controls.
3. Confirm focus reaches the Edit, Copy, and Delete buttons in a logical order.
4. Confirm each focused control has a visible focus indicator and can be activated with Enter or Space.
5. Confirm there are no focus traps or keyboard regressions.
Screen reader
1. Open the React Spectrum Action Bar playground at the validation URL with a screen reader enabled.
2. Navigate to the rendered Action Bar and its action buttons.
3. Confirm the selected-item count is represented as 224 and is not announced as NaN.
4. Confirm the Edit, Copy, and Delete buttons are announced with the correct names and button roles.
5. Confirm there are no duplicate or unexpected announcements.

Device review

Did it pass in Desktop?
Did it pass in (emulated) Mobile?
Did it pass in (emulated) iPad?

Checklist:

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.

aem-code-sync · 2026-10-01T22:33:18Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.