Traffic Boost: Minor fixes to tab visibility for accessibility #3342
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (2)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the 📝 WalkthroughWalkthroughThe updates include CSS modifications to improve focus visibility and tab ordering in the traffic boost sidebar, enhancing accessibility and layout. Additionally, a keyboard event handler in the single link component was refactored for clarity by introducing a named function, with no changes to the component’s logic or exports. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SingleLinkComponent
User->>SingleLinkComponent: KeyDown (Enter/Space)
SingleLinkComponent->>SingleLinkComponent: handleKeyDown(event)
alt Key is Enter or Space
SingleLinkComponent->>SingleLinkComponent: Prevent default
SingleLinkComponent->>SingleLinkComponent: Trigger click handler
end
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
src/content-helper/dashboard-page/pages/traffic-boost/sidebar/sidebar.scss
Show resolved
Hide resolved
...tent-helper/dashboard-page/pages/traffic-boost/sidebar/components/links-list/single-link.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
src/content-helper/dashboard-page/pages/traffic-boost/sidebar/sidebar.scss (1)
199-205: Ensure keyboard focus order matches visual tab order.
While setting CSSordercontrols the visual arrangement of the.suggestions-taband.inbound-links-tab, it does not affect the DOM order or the browser’s tabbing sequence. If the underlying markup order does not already reflect the intended navigation order, keyboard users may tab through elements in an unexpected sequence. Consider verifying that the DOM order aligns with these CSS orders or, if reordering the markup is not feasible, explicitly manage focus order (e.g., viatabindex) to maintain consistency.src/content-helper/dashboard-page/pages/traffic-boost/sidebar/components/links-list/links-list.scss (2)
31-35: Prefer:focus-visibleover:focusfor keyboard-only outlines.
Using:focus-visibleensures the outline appears only on keyboard navigation (not when clicking with a mouse), reducing visual noise for mouse users. Example:- & :focus { + & :focus-visible { outline: 2px solid var(--wp-admin-theme-color); outline-offset: -2px; box-shadow: none; }
83-86: Apply the same:focus-visiblepattern to the<select>element.
Consistently use:focus-visiblehere as well:- select:focus { + select:focus-visible { outline: 2px solid var(--wp-admin-theme-color); outline-offset: 1px; }src/content-helper/dashboard-page/pages/traffic-boost/sidebar/components/links-list/single-link.tsx (2)
4-4: Align type imports with component imports for consistency.
You importforwardReffrom@wordpress/elementbut bring in types from'react'. To keep imports unified, either import types from@wordpress/element(it re-exports React types) or switch the runtime import toimport { forwardRef } from 'react';.
59-64: Enhance cross-browser support for the Space key.
Some browsers (e.g., legacy IE/Edge) reporte.key === 'Spacebar'. Consider guarding against both values:- if ( e.key === 'Enter' || e.key === ' ' ) { + if ( e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar' ) { e.preventDefault(); onClickHandler(); }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
⛔ Files ignored due to path filters (4)
build/content-helper/dashboard-page-rtl.cssis excluded by!build/**build/content-helper/dashboard-page.asset.phpis excluded by!build/**build/content-helper/dashboard-page.cssis excluded by!build/**build/content-helper/dashboard-page.jsis excluded by!build/**
📒 Files selected for processing (3)
src/content-helper/dashboard-page/pages/traffic-boost/sidebar/components/links-list/links-list.scss(2 hunks)src/content-helper/dashboard-page/pages/traffic-boost/sidebar/components/links-list/single-link.tsx(3 hunks)src/content-helper/dashboard-page/pages/traffic-boost/sidebar/sidebar.scss(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`**/*.{css,scss}`: "Perform a detailed review of the provided code with following key aspects in mind: - Review the SCSS code to ensure it is well-structured and adheres to best ...
**/*.{css,scss}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the SCSS code to ensure it is well-structured and adheres to best practices.
- Convert dimensions greater than or equal to 3px to rem units using the to_rem function.
- Utilize variables for sizes and colors defined in src/content-helper/common/css/variables.scss instead of hardcoding values."
src/content-helper/dashboard-page/pages/traffic-boost/sidebar/sidebar.scsssrc/content-helper/dashboard-page/pages/traffic-boost/sidebar/components/links-list/links-list.scss
`**/*.{js,ts,tsx,jsx}`: "Perform a detailed review of the provided code with following key aspects in mind: - Review the code to ensure it is well-structured and adheres to best ...
**/*.{js,ts,tsx,jsx}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the code to ensure it is well-structured and adheres to best practices.
- Verify compliance with WordPress coding standards.
- Ensure the code is well-documented.
- Check for security vulnerabilities and confirm the code is secure.
- Optimize the code for performance, removing any unnecessary elements.
- Validate JSDoc comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Confirm every JSDoc comment includes a @SInCE tag indicating the next version of the plugin to include the code.
- Guarantee compatibility with the latest version of WordPress, avoiding deprecated functions or features."
src/content-helper/dashboard-page/pages/traffic-boost/sidebar/components/links-list/single-link.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: E2E against WordPress latest
Description
At present, using the tab key to select and use the Traffic Boost feature doesn't seem to select anything. With testing, most of the components support tab movement, but the
:focusstate wasn't being drawn. This PR mostly adds:focusstates to ensure navigation via keyboard is visible. See the short demo at the bottom of this PR for how it looks now.Motivation and context
This change improves accessibility and keyboard navigation.
How has this been tested?
Test locally, see video below.
Screenshots
Noodling around Traffic Boost menus with tab/shift-tab:
Screen.Recording.2025-05-19.at.1.08.18.PM.mov
Summary by CodeRabbit
Style
Refactor