refactor: welcome screen#965
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the welcome screen to improve UX by making the benefits section collapsible. It adds a toggle button that allows users to show/hide the benefits list, creating a cleaner initial view while still providing access to detailed information.
Key Changes:
- Adds a new translatable string for the benefits toggle button
- Implements a collapsible benefits section with toggle functionality
- Includes keyboard accessibility support for the toggle interaction
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| inc/admin.php | Adds new translatable string for the benefits toggle button |
| assets/src/dashboard/parts/connect/index.js | Implements the collapsible benefits UI with toggle functionality and keyboard support |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| onKeyPress={ ( e ) => { | ||
| if ( 'Enter' === e.key || ' ' === e.key ) { | ||
| setShowBenefits( ! showBenefits ); | ||
| } | ||
| }} |
There was a problem hiding this comment.
The onKeyPress event is deprecated and doesn't handle all keyboard interactions properly. Use onKeyDown instead for better accessibility support, as it captures key presses more reliably across different browsers and assistive technologies.
| role="button" | ||
| tabIndex="0" | ||
| onKeyPress={ ( e ) => { | ||
| if ( 'Enter' === e.key || ' ' === e.key ) { |
There was a problem hiding this comment.
Missing e.preventDefault() and e.stopPropagation() calls when handling the Space key. This can cause the page to scroll when users press Space to activate the toggle button.
| if ( 'Enter' === e.key || ' ' === e.key ) { | |
| if ( 'Enter' === e.key || ' ' === e.key ) { | |
| if (e.key === ' ') { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } |
@RaduCristianPopescu can we make a small ui adjustment on the existing user button, also make the background for the login box lighter as in the image. |
RaduCristianPopescu
force-pushed
the
refactor/welcome-screen
branch
from
acc5d75 to
1ad40a7
Compare
|
🎉 This PR is included in version 4.1.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
pirate-bot
added
the
released
All Submissions:
Changes proposed in this Pull Request:
Improve welcome screen UX with toggle-able benefits display.
Closes https://github.com/Codeinwp/optimole-service/issues/1528#event-19753237307
Other information: