feat: Add UAP directional controls and tooltips to drag/resize handles

[johannes-weber]

Description

This PR enhances the accessibility of board items by adding UAP (Universally Accessible Post-click/tap actions) controls and tooltips to drag and resize handles. UAPs allows drag/resize movements to be operated by a single pointer without dragging.

Screen recording of the new functionality:

Screen.Recording.2025-05-21.at.17.24.10.mov

Changes:

• Added UAP action buttons (up/down/left/right) to drag and resize handles for keyboard-based item movement.
• Implemented tooltips for drag and resize handles with configurable text via i18nStrings.
• Refactored handle components, splitting the generic handle into specialized drag-handle and resize-handle components.
• Enhanced state management with separate tracking for pointer and UAP interactions via useInternalDragHandleInteractionState from the components package.
• Added new test to cover UAP action button interactions.

Visual Changes:

• Before this change, a blue border was shown on items when they have been moved via keyboard.
• With this changes: The blue border on items is shown when interactinv via keyboard, UAPs or via mouse.
• Change made after walking through with Tanner.

PR follow ups:

• Refactorings: I don't want to blow up this PR with more refactorings. I'm following up with a refactoring PR of the ItemContainerComponent located in src/internal/item-container/index.tsx with a focus on improving it's readability and extracting pure functions.
• Add UAP action disabled state - disable UAP arrow icons for the direction where a drag or resize movement is not possible.

Related links, issue #, if available:

• AWSUI-60240
• sPYUAQa9vqDX

How has this been tested?

• added additional unit and functional tests.
• green dry-run to live: 7381967744.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

Attention: Patch coverage is 99.33555% with 2 lines in your changes missing coverage. Please review.

Project coverage is 94.63%. Comparing base (d636840) to head (49d9e3b).
Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
src/internal/item-container/index.tsx	98.52%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #356      +/-   ##
==========================================
+ Coverage   94.37%   94.63%   +0.25%     
==========================================
  Files          68       68              
  Lines        3128     3278     +150     
  Branches      674      694      +20     
==========================================
+ Hits         2952     3102     +150     
  Misses        176      176              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pan-kot]

@johannes-weber , I noticed that active state does not always show the outline.

Screen.Recording.2025-05-27.at.17.51.11.mov

[pan-kot]

@johannes-weber , is it expected that the "Drag or select to move" tooltip is shown on hover interaction, but not shown on focus interaction?

[pan-kot]

@johannes-weber , I noticed that sometimes upon closing toggling the drag handle, the UAP buttons re-appear for a split second.

Screen.Recording.2025-05-27.at.17.55.40.mov

[johannes-weber]

@pan-kot

I noticed that active state does not always show the outline.

That's caused by the board currently not tolerating any pointermove in between pointerdown and pointerup. I've added the tolerance for such a behaviour as we talked a while ago. Related change in the components package: cloudscape-design/components#3545

---

is it expected that the "Drag or select to move" tooltip is shown on hover interaction, but not shown on focus interaction?

Yes, that's expected.

---

I noticed that sometimes upon closing toggling the drag handle, the UAP buttons re-appear for a split second.

That's been an issue with the CSS animation. It got fixed in cloudscape-design/components#3543