[ZEPPELIN-6587] Keep simple notebook controls accessible without hover by yuminnnnni · Pull Request #5537 · apache/zeppelin · GitHub
Skip to content

[ZEPPELIN-6587] Keep simple notebook controls accessible without hover - #5537

Open
yuminnnnni wants to merge 2 commits into
apache:masterfrom
yuminnnnni:ZEPPELIN-6587
Open

yuminnnnni wants to merge 2 commits into
apache:masterfrom
yuminnnnni:ZEPPELIN-6587

Conversation

@yuminnnnni

@yuminnnnni yuminnnnni commented Oct 5, 2026 •

Copy link
Copy Markdown

What is this PR for?

In the Simple look-and-feel mode, notebook controls in the action bar and navigation buttons in the sidebar are hidden by default and rely on :hover interactions to be revealed.

On touch-only devices without a hover-capable pointer, users are unable to trigger hover states, rendering these essential notebook-level actions inaccessible.

This PR adds @media (any-hover: none) style fallbacks for both the action-bar and sidebar components in Simple mode, ensuring that essential controls and navigation items remain visible and accessible on touch-only devices while preserving the existing hover-to-reveal behavior on desktop environments.


What type of PR is it?

[Bug Fix]


Todos

  • Add @media (any-hover: none) fallback styles for .control (display: block) and .setting (display: flex) in action-bar.component.less.
  • Add @media (any-hover: none) fallback styles for .sidebar-button and .sidebar-nav (opacity: 1) in sidebar.component.less.
  • Add Playwright E2E spec (simple-look-and-feel-input.spec.ts) for verifying touch-only / non-hover interactions.
  • Retain existing hover-to-reveal behavior on hover-capable desktop environments.

What is the Jira issue?


How should this be tested?

  1. Playwright E2E Test:
    • Run the newly added Playwright test spec:
      cd zeppelin-web-angular && npx playwright test e2e/tests/notebook/simple-look-and-feel/simple-look-and-feel-input.spec.ts
  2. Touch Device Emulation (Chrome DevTools):
    • Open Developer Tools -> Toggle Device Toolbar (or emulate (any-hover: none)).
    • Open a notebook in Simple mode.
    • Verify that action-bar controls, note settings, and sidebar buttons remain accessible.
  3. Desktop Verification:
    • Verify in a normal desktop browser that controls in Simple mode remain hidden by default and appear on mouse hover.
  4. Linting:
    • Run cd zeppelin-web-angular && npm run lint.

Screenshots (if appropriate)

(Optional: Attach screenshots of Simple mode in an emulated touch context)


Questions:

  • Does the licenses files need to update? No
  • Is there breaking changes for older versions? No
  • Does this need user documentation changes? No

@yuminnnnni
yuminnnnni marked this pull request as draft October 5, 2026 09:25
…over-capable pointer

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@yuminnnnni
yuminnnnni marked this pull request as ready for review October 10, 2026 08:01
@yuminnnnni

Copy link
Copy Markdown
Author

@voidmatcha

Copy link
Copy Markdown
Member

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants