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

The Playwright (auth) job failed on the previous commit because the new desktop hover spec asserted (any-hover: hover) on headless Firefox in CI, which reports no hover-capable pointer. I fixed this in 6e4e379 by skipping that spec when the browser reports no hover support; the CSS change is unchanged.

The workflows for the new commit are awaiting maintainer approval. Could a maintainer approve them so CI can run? Thank you!

@voidmatcha

Copy link
Copy Markdown
Member

The touch-only CSS change makes sense. I found one test setup issue: the manually created browser.newContext() does not inherit use.baseURL. openTestNotebook() then calls page.goto("/#/"), so the WebKit test cannot reach its assertions. Could you pass the baseURL fixture to newContext()? I prepared an example commit here: voidmatcha@87bdedf. It also reuses the existing Action Bar page object for the look-and-feel selector.

The current E2E jobs stop at an unrelated Prettier check in host-remote-contract.ts. #5564 has now merged into master, so rebasing should clear that formatting gate. Please run the WebKit spec after fixing the context setup.

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