Skip to content

fix: Extend resize handle pointer target to 24px minimum #4896

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Harsh-Anand-Singh merged 1 commit into from
Aug 13, 2026
+11 −0
Merged

fix: Extend resize handle pointer target to 24px minimum #4896

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/internal/components/drag-handle/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,17 @@

&-resize-area {
cursor: nwse-resize;
position: relative;

// Extend the pointer target to at least 24x24px (WCAG 2.5.8)

@mxschll mxschll Aug 12, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this overlap with other elements on a page?

@Harsh-Anand-Singh Harsh-Anand-Singh Aug 12, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No. The pseudo-element is anchored to the handle's bottom-right corner and only grows up and left, into the component's own surface, it can never extend below or to the right of the handle.

&::after {
content: '';
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
inline-size: max(24px, 100%);

@mxschll mxschll Aug 13, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The icon is 16x16, but now we have a clickable area of 24x24. Should we increase the icon too? Otherwise I can start clicking and dragging at an invisible space.

@Harsh-Anand-Singh Harsh-Anand-Singh Aug 13, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The invisible area isn't mystery space. Hovering anywhere in the extended area shows the resize cursor, like a pointer landing 4px off the icon was almost certainly aiming at it; starting the resize there is the expected outcome, not a surprise.

@mxschll mxschll Aug 13, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was pretty surprising to me.

block-size: max(24px, 100%);
}

@include styles.with-direction('rtl') {
cursor: nesw-resize;
Expand Down
Loading