Skip to content

feat(buttons): add button disability changes#2589

Open
Vishala230531 wants to merge 1 commit intopaypal:mainfrom
Vishala230531:Code-change-for-Disabling-buttons"

Hidden character warning

The head ref may contain hidden characters: "Code-change-for-Disabling-buttons""
Open

feat(buttons): add button disability changes#2589
Vishala230531 wants to merge 1 commit intopaypal:mainfrom
Vishala230531:Code-change-for-Disabling-buttons"

Conversation

@Vishala230531
Copy link
Contributor

@Vishala230531 Vishala230531 commented Jan 27, 2026

Description

This PR addresses the accessibility issue reported by TPG/Vodafone, where focus navigation was still moving to the PayPal button even when it was disabled. The fix ensures that when the PayPal button is disabled, it is no longer focusable via keyboard navigation, improving accessibility compliance.

Implement disabled button functionality with onInit callback for dynamic enable/disable control.

Add disabled prop to ButtonProps type with onInit callback
Add disabled state management in Button component
Add disabled CSS class and ARIA attributes for accessibility
Implement onInit callback in prerender with disable/enable actions
Add DISABLED class constant for styling

Jira Ticket:
(https://paypal.atlassian.net/browse/LI-134276)

Reproduction Steps

Build both csnw and scnw packages to ensure all dependencies are up to date:

Run the build commands for both csnw and scnw in your local environment.

Alias the paypal-checkout components to point to your local changes:

Run npm run storybook to test in local and verify all button stories render correctly
Navigate to react-paypal-js/Buttons/DisabledButtons - verify checkbox enables button
Navigate to testing/onInit/DisabledButtons - verify vanilla JS disabled button works

we can verify these changes in testing environment-points to local
(https://www.te-sdktestingnodeweb.qa.paypal.com/sdktestingnodeweb/storybook?path=/story/react-paypal-js-buttons--disabled-buttons&globals=sdkEnvironment:local)

Vanilla JS SDk

Screen.Recording.2026-01-27.at.2.12.16.PM.mov

React SDk

Screen.Recording.2026-01-27.at.2.13.46.PM.mov

@Vishala230531 Vishala230531 requested a review from a team as a code owner January 27, 2026 20:28
@codecov
Copy link

codecov bot commented Jan 27, 2026

Codecov Report

❌ Patch coverage is 76.47059% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 54.19%. Comparing base (a1c952c) to head (90a5dd1).
⚠️ Report is 81 commits behind head on main.

Files with missing lines Patch % Lines
src/zoid/buttons/component.jsx 0.00% 6 Missing ⚠️
src/ui/buttons/button.jsx 80.00% 1 Missing ⚠️
src/zoid/buttons/prerender.jsx 0.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2589      +/-   ##
==========================================
- Coverage   54.51%   54.19%   -0.32%     
==========================================
  Files         162      164       +2     
  Lines       16365    17703    +1338     
  Branches     1083     1211     +128     
==========================================
+ Hits         8922     9595     +673     
- Misses       7330     7982     +652     
- Partials      113      126      +13     
Flag Coverage Δ
jest 29.09% <87.50%> (+1.60%) ⬆️
karma 56.15% <50.00%> (+0.49%) ⬆️
vitest 49.75% <67.64%> (-0.27%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants