feat: expand clickable area for standalone radio and checkbox #8083
+24
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implement 44x44px minimum touch target for standalone radio and checkbox components using ::before pseudo-element approach. This improves accessibility and usability on mobile devices while maintaining the original visual layout and shape of the components. The expanded clickable area is achieved through a CSS pseudo-element with an inset of -12px on all sides, providing an invisible but clickable expansion area. The table component inherits this improvement automatically. - Add --pf-v6-c-radio--m-standalone--before--Inset component variable - Add --pf-v6-c-check--m-standalone--before--Inset component variable - Add position: relative to .pf-m-standalone radio and checkbox - Add ::before pseudo-element with expanded inset for clickable area Assisted-by: GitHub Copilot
WalkthroughAdds an expanded invisible hit area for standalone Check and Radio components via a new CSS variable and ::before overlay, and updates Skeleton gradient color stops to use loading-skeleton color tokens. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
Collaborator
|
Preview: https://pf-pr-8083.surge.sh A11y report: https://pf-pr-8083-a11y.surge.sh |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In `@src/patternfly/components/Check/check.scss`:
- Around line 6-8: Add a blank line before the inline comment on the standalone
checkbox CSS custom property block so stylelint is satisfied; specifically, in
the check.scss block that defines --#{$check}--m-standalone--MinHeight and
--#{$check}--m-standalone--before--Inset, insert an empty line before the line
starting with "// Expanded clickable area..." leaving the variable declarations
unchanged.
- Around line 42-45: The ::before rule in the Check component (selector
&::before) has properties in the wrong order for stylelint; move the position
declaration (position: absolute) above the content declaration (content: '') and
keep the inset variable (--#{$check}--m-standalone--before--Inset) after them so
the property order is position, content, then inset within the &::before block.
In `@src/patternfly/components/Radio/radio.scss`:
- Around line 6-8: Add a blank line before the inline comment that precedes the
custom property declaration for standalone radio spacing; specifically, insert
an empty line above the comment line describing the expanded clickable area so
the comment sits on its own line before the declaration of
--#{$radio}--m-standalone--before--Inset (and near
--#{$radio}--m-standalone--MinHeight), satisfying Stylelint's rule expecting a
blank line before `//` comments.
- Around line 43-46: In the &::before rule inside radio.scss the properties are
out of order for stylelint: move the position declaration above content (i.e.,
ensure position: absolute; appears before content: '';) and keep inset after
those two; update the &::before block for the $radio standalone before inset
variable (--#{$radio}--m-standalone--before--Inset) accordingly so property
order conforms to the linter.
Comment on lines
42
to
45
| &::before { | ||
| content: ''; | ||
| position: absolute; | ||
| inset: var(--#{$check}--m-standalone--before--Inset); |
There was a problem hiding this comment.
Fix lint: property order in ::before.
Stylelint expects position before content (Line 43–44).
Proposed fix
&::before {
- content: '';
position: absolute;
+ content: '';
inset: var(--#{$check}--m-standalone--before--Inset);
pointer-events: auto;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| &::before { | |
| content: ''; | |
| position: absolute; | |
| inset: var(--#{$check}--m-standalone--before--Inset); | |
| &::before { | |
| position: absolute; | |
| content: ''; | |
| inset: var(--#{$check}--m-standalone--before--Inset); |
🧰 Tools
🪛 GitHub Actions: pr-preview
[error] 44-44: order/properties-order: Expected "position" to come before "content"
🤖 Prompt for AI Agents
In `@src/patternfly/components/Check/check.scss` around lines 42 - 45, The
::before rule in the Check component (selector &::before) has properties in the
wrong order for stylelint; move the position declaration (position: absolute)
above the content declaration (content: '') and keep the inset variable
(--#{$check}--m-standalone--before--Inset) after them so the property order is
position, content, then inset within the &::before block.
Comment on lines
43
to
46
| &::before { | ||
| content: ''; | ||
| position: absolute; | ||
| inset: var(--#{$radio}--m-standalone--before--Inset); |
There was a problem hiding this comment.
Fix lint: property order in ::before.
Stylelint expects position before content (Line 44–45).
Proposed fix
&::before {
- content: '';
position: absolute;
+ content: '';
inset: var(--#{$radio}--m-standalone--before--Inset);
pointer-events: auto;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| &::before { | |
| content: ''; | |
| position: absolute; | |
| inset: var(--#{$radio}--m-standalone--before--Inset); | |
| &::before { | |
| position: absolute; | |
| content: ''; | |
| inset: var(--#{$radio}--m-standalone--before--Inset); |
🧰 Tools
🪛 GitHub Actions: pr-preview
[error] 45-45: order/properties-order: Expected "position" to come before "content"
🤖 Prompt for AI Agents
In `@src/patternfly/components/Radio/radio.scss` around lines 43 - 46, In the
&::before rule inside radio.scss the properties are out of order for stylelint:
move the position declaration above content (i.e., ensure position: absolute;
appears before content: '';) and keep inset after those two; update the
&::before block for the $radio standalone before inset variable
(--#{$radio}--m-standalone--before--Inset) accordingly so property order
conforms to the linter.
Contributor
Author
|
Fixes #7673 |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/patternfly/components/Check/check.scss`:
- Around line 42-48: The ::before pseudo-element used to expand the clickable
area for the Check component doesn't inherit the cursor, causing the extended
region to show the default cursor; update the &::before rule in the Check
component's stylesheet (the selector using &::before inside the Check SCSS) to
include cursor: inherit so the overlay preserves pointer/not-allowed affordances
from the underlying element (keep pointer-events: auto and content: '' as-is).
In `@src/patternfly/components/Radio/radio.scss`:
- Around line 43-49: The ::before pseudo-element used to expand the clickable
area (selector &::before using inset
var(--#{$radio}--m-standalone--before--Inset)) does not preserve the cursor
state; add cursor: inherit to that ::before rule so the extended overlay uses
the same cursor (pointer or not-allowed) as the radio input, keeping affordances
consistent.
Comment on lines
+42
to
+48
| // Expanded clickable area using pseudo-element | ||
| &::before { | ||
| position: absolute; | ||
| inset: var(--#{$check}--m-standalone--before--Inset); | ||
| pointer-events: auto; | ||
| content: ''; | ||
| } |
There was a problem hiding this comment.
Ensure the expanded hit area preserves cursor state.
The ::before overlay doesn’t inherit cursor, so the extended area can show the default cursor instead of pointer/not-allowed. Add cursor: inherit; to keep affordances consistent.
Proposed fix
&::before {
position: absolute;
inset: var(--#{$check}--m-standalone--before--Inset);
pointer-events: auto;
+ cursor: inherit;
content: '';
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| // Expanded clickable area using pseudo-element | |
| &::before { | |
| position: absolute; | |
| inset: var(--#{$check}--m-standalone--before--Inset); | |
| pointer-events: auto; | |
| content: ''; | |
| } | |
| // Expanded clickable area using pseudo-element | |
| &::before { | |
| position: absolute; | |
| inset: var(--#{$check}--m-standalone--before--Inset); | |
| pointer-events: auto; | |
| cursor: inherit; | |
| content: ''; | |
| } |
🤖 Prompt for AI Agents
In `@src/patternfly/components/Check/check.scss` around lines 42 - 48, The
::before pseudo-element used to expand the clickable area for the Check
component doesn't inherit the cursor, causing the extended region to show the
default cursor; update the &::before rule in the Check component's stylesheet
(the selector using &::before inside the Check SCSS) to include cursor: inherit
so the overlay preserves pointer/not-allowed affordances from the underlying
element (keep pointer-events: auto and content: '' as-is).
Comment on lines
+43
to
+49
| // Expanded clickable area using pseudo-element | ||
| &::before { | ||
| position: absolute; | ||
| inset: var(--#{$radio}--m-standalone--before--Inset); | ||
| pointer-events: auto; | ||
| content: ''; | ||
| } |
There was a problem hiding this comment.
Ensure the expanded hit area preserves cursor state.
The ::before overlay doesn’t inherit cursor, so the extended area can show the default cursor instead of pointer/not-allowed. Add cursor: inherit; to keep affordances consistent.
Proposed fix
&::before {
position: absolute;
inset: var(--#{$radio}--m-standalone--before--Inset);
pointer-events: auto;
+ cursor: inherit;
content: '';
}🤖 Prompt for AI Agents
In `@src/patternfly/components/Radio/radio.scss` around lines 43 - 49, The
::before pseudo-element used to expand the clickable area (selector &::before
using inset var(--#{$radio}--m-standalone--before--Inset)) does not preserve the
cursor state; add cursor: inherit to that ::before rule so the extended overlay
uses the same cursor (pointer or not-allowed) as the radio input, keeping
affordances consistent.
tarunvashishth
force-pushed
the
Tarun's-Branch
branch
from
b0cfede to
8d44097
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implement 44x44px minimum touch target for standalone radio and checkbox components using ::before pseudo-element approach. This improves accessibility and usability on mobile devices while maintaining the original visual layout and shape of the components.
The expanded clickable area is achieved through a CSS pseudo-element with an inset of -12px on all sides, providing an invisible but clickable expansion area. The table component inherits this improvement automatically.
Assisted-by: GitHub Copilot
Summary by CodeRabbit
Improvements
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.