Updated: review notice UI with improved layout and messaging#1640
Updated: review notice UI with improved layout and messaging#1640SteveJonesDev wants to merge 1 commit intodevelopfrom
Conversation
📝 WalkthroughWalkthroughThe admin review notice UI was redesigned with an added logo image, restructured content layout using BEM-style classes, updated button labels and styling, and CSS refactored from grid-based to flex-based layout. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![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 refactors the accessibility checker's review notice, updating its HTML structure to include a logo and transitioning the layout to Flexbox. The review feedback highlights a visual regression where the rating stars are no longer styled yellow and suggests enhancing the hover and focus states of the new text-link buttons for better user feedback.
| <?php esc_html_e( 'Thanks for using Accessibility Checker. Please consider leaving a review to help others learn about web accessibility.', 'accessibility-checker' ); ?> | ||
| </p> | ||
| <div class="edac-review-notice-actions"> | ||
| <button class="edac-review-notice-review button button-primary"><?php esc_html_e( 'Leave a 5-Star Review', 'accessibility-checker' ); ?> <span aria-hidden="true">★★★★★</span></button> |
There was a problem hiding this comment.
The stars in the review button are no longer styled with the yellow color used in the previous version. This is a visual regression that makes the rating less prominent. Consider adding a specific class to the stars container to restore the yellow styling.
<button class="edac-review-notice-review button button-primary"><?php esc_html_e( 'Leave a 5-Star Review', 'accessibility-checker' ); ?> <span class="edac-review-notice-stars" aria-hidden="true">★★★★★</span></button>| color: variables.$color-blue; | ||
| text-decoration: none; |
There was a problem hiding this comment.
The hover and focus states for the text-link buttons currently provide minimal visual feedback as the color remains the same and the underline is removed, which can be counter-intuitive for users. Additionally, the color property is redundant here. Consider using an opacity change or a different color to improve the interactive experience.
| color: variables.$color-blue; | |
| text-decoration: none; | |
| opacity: 0.7; | |
| text-decoration: none; |
| text-decoration: none; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Add styling for the stars to restore the yellow color and provide proper spacing, matching the previous design's intent.
&-stars {
color: variables.$color-yellow;
margin-left: 4px;
}
}![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/admin/sass/accessibility-checker-admin.scss (1)
1032-1045: Add an explicit keyboard focus-visible style for text-link buttons.These controls are critical actions; defining
:focus-visibleexplicitly will make keyboard focus more reliable and obvious.💡 Suggested refinement
&-text-link { background: none; border: none; padding: 0; color: variables.$color-blue; text-decoration: underline; font-size: 13px; cursor: pointer; &:hover, - &:focus { + &:focus { color: variables.$color-blue; text-decoration: none; } + + &:focus-visible { + outline: 2px solid variables.$color-blue; + outline-offset: 2px; + text-decoration: underline; + } }Based on learnings: Test accessibility changes with screen readers (NVDA, JAWS, VoiceOver) and axe-core to verify WCAG compliance.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/admin/sass/accessibility-checker-admin.scss` around lines 1032 - 1045, The .-text-link button lacks an explicit :focus-visible rule, so keyboard users may not see a clear focus indicator; add a :focus-visible selector for the &-text-link block (alongside existing &:hover and &:focus) that sets a visible, high-contrast outline or box-shadow and preserves background/foreground colors (e.g., 2px solid or 3px ring using variables.$color-blue or a contrast-safe variable), ensure outline-offset and border-radius match the button shape, and keep text-decoration consistent; update the &-text-link rule in src/admin/sass/accessibility-checker-admin.scss so keyboard focus uses :focus-visible for reliable, accessible focus styling.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@admin/class-admin-notices.php`:
- Around line 325-327: The three notice action buttons rendered in
admin/class-admin-notices.php (the elements with classes
edac-review-notice-review, edac-review-notice-remind, and
edac-review-notice-dismiss) lack an explicit type attribute; add type="button"
to each button element so they are semantically correct and won't act as
accidental form submitters when JavaScript click handlers are used.
---
Nitpick comments:
In `@src/admin/sass/accessibility-checker-admin.scss`:
- Around line 1032-1045: The .-text-link button lacks an explicit :focus-visible
rule, so keyboard users may not see a clear focus indicator; add a
:focus-visible selector for the &-text-link block (alongside existing &:hover
and &:focus) that sets a visible, high-contrast outline or box-shadow and
preserves background/foreground colors (e.g., 2px solid or 3px ring using
variables.$color-blue or a contrast-safe variable), ensure outline-offset and
border-radius match the button shape, and keep text-decoration consistent;
update the &-text-link rule in src/admin/sass/accessibility-checker-admin.scss
so keyboard focus uses :focus-visible for reliable, accessible focus styling.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 9bc67773-7fcc-47f7-815a-73125fe292d2
📒 Files selected for processing (2)
admin/class-admin-notices.phpsrc/admin/sass/accessibility-checker-admin.scss
1 participant
This pull request updates the review notice UI in the Accessibility Checker admin area to provide a more visually appealing and accessible experience. The changes include both markup and styling improvements, introducing an icon, clearer messaging, and more modern button styles.
Admin notice UI improvements:
class-admin-notices.phpto include an Accessibility Checker icon, simplified message, and reorganized action buttons for leaving a review, reminding later, or dismissing the notice. Button labels and layout were also improved for clarity and accessibility.Styling enhancements:
accessibility-checker-admin.scssto use a flexbox layout for better alignment, added styles for the icon, improved spacing, modernized the appearance of action buttons, and introduced new text-link button styles for secondary actions.Summary by CodeRabbit