fix(dock): prevent tab interaction on mobile

[jcmill]

Fixes #8339
Prevents keyboard navigation to items in collapsed dock on mobile.

Added visibility: hidden to collapsed dock with transition timing that:

• Shows items immediately when expanding
• Hides items after slide animation completes when collapsing

Changes applied to both Page and Compass components for consistency.

Summary by CodeRabbit

• Style
  • Enhanced dock panel animations with improved visibility transitions when expanding and collapsing.
  • Refined transition timing across different screen sizes for consistent dock behavior throughout the interface.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: df7f8380-bd9e-4324-bfdb-47972eea58b9

📥 Commits

Reviewing files that changed from the base of the PR and between b06d57f and 83e2f03.

📒 Files selected for processing (2)

• src/patternfly/components/Compass/compass.scss
• src/patternfly/components/Page/page.scss

---

Walkthrough

The pull request updates dock styling in Compass and Page components to prevent keyboard focus on collapsed docked navigation. Both files now coordinate visibility transitions alongside translate animations, hiding the dock by default and making it visible when expanded, with desktop breakpoints reverting to natural visibility behavior.

Changes

Dock Visibility and Transition Coordination

Layer / File(s)	Summary
Dock Collapse/Expand Visibility Transitions src/patternfly/components/Compass/compass.scss, src/patternfly/components/Page/page.scss	Dock styling now defaults to visibility: hidden and transitions both translate and visibility properties. When expanded, visibility changes to visible immediately while the translate slide animation proceeds with its full duration.
Desktop Breakpoint Visibility Revert src/patternfly/components/Compass/compass.scss, src/patternfly/components/Page/page.scss	In desktop media queries where dock positioning is reset from fixed to default, visibility: revert restores natural visibility behavior instead of maintaining the mobile hidden state.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• patternfly/patternfly#8335: Adjusts dock translate/bidirectional sliding in the same file affected by visibility transitions.
• patternfly/patternfly#8330: Modifies Compass dock show/hide behavior with pf-m-expanded state and translate/visibility transitions.
• patternfly/patternfly#8308: Changes dock behavior styling in both Compass and Page SCSS files.

Suggested labels

released on @prerelease``

Suggested reviewers

• mcoker
• thatblindgeye

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly describes the main change: using visibility to prevent tab/keyboard interaction on collapsed docks.
Linked Issues check	✅ Passed	The PR successfully implements all coding requirements from issue #8339: visibility control is added to both Page and Compass components with correct transition timing for collapsed/expanded states.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the dock visibility issue in both Page and Compass components as required by issue #8339.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[patternfly-build]

Preview: https://pf-pr-8384.surge.sh

A11y report: https://pf-pr-8384-a11y.surge.sh