Klarna: Fix accessibility issue with opening klarna widget #3560
Conversation
🦋 Changeset detectedLatest commit: 2ffc030 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Summary of ChangesHello @johnayeni, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request primarily focuses on enhancing the accessibility of the Klarna payment widget by ensuring it responds correctly to keyboard interactions, specifically the Enter key. This is achieved by intercepting the Enter key press and explicitly triggering the widget's authorization. Additionally, it includes several type definition improvements across various button components, leading to more robust and predictable component behavior and better developer experience. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
✅ Deploy Preview for adyen-web ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| target: '_self', | ||
| onClick: () => {}, | ||
| onMouseEnter: () => {}, | ||
| onMouseLeave: () => {}, | ||
| onFocus: () => {}, | ||
| onBlur: () => {}, | ||
| onKeyPress: () => {} |
There was a problem hiding this comment.
These default handlers were simply just adding event listeners to the button element which did nothing
e.g
Before
Now
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request addresses an accessibility issue with the Klarna widget by enabling activation with the Enter key, and improves type safety for button onClick props across several components. The changes are well-implemented. My main feedback focuses on replacing the deprecated onKeyPress event with onKeyDown for better compatibility and adherence to modern web standards.
packages/lib/src/components/Klarna/components/KlarnaWidget/KlarnaWidget.tsx
Outdated
Show resolved
Hide resolved
✅ Deploy Preview for adyen-web ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
size-limit report 📦
|
|
Summary
ButtoncomponentonClickpropTested scenarios
Fixed issue: