diff --git a/src/renderer/src/components/browser-pane/BrowserPane.tsx b/src/renderer/src/components/browser-pane/BrowserPane.tsx index 29fdb3045aa..4ed588e3433 100644 --- a/src/renderer/src/components/browser-pane/BrowserPane.tsx +++ b/src/renderer/src/components/browser-pane/BrowserPane.tsx @@ -119,6 +119,7 @@ import { applyBrowserPageZoom, browserPageZoomLevelToPercent, DEFAULT_BROWSER_PAGE_ZOOM_LEVEL, + getBrowserPageZoomIndicatorState, normalizeBrowserPageZoomLevel, setBrowserPageZoomLevel, type BrowserPageZoomDirection @@ -4242,8 +4243,10 @@ function BrowserPagePane({ } return received })() - const showBrowserZoomIndicator = - browserZoomFeedbackVisible || browserZoomPercent !== browserDefaultZoomPercent + const browserZoomIndicatorState = getBrowserPageZoomIndicatorState({ + feedbackVisible: browserZoomFeedbackVisible, + isDefaultZoom: browserZoomPercent === browserDefaultZoomPercent + }) useEffect(() => { const webview = webviewRef.current @@ -4758,14 +4761,10 @@ function BrowserPagePane({
{browserZoomPercent}% diff --git a/src/renderer/src/components/browser-pane/browser-page-zoom.test.ts b/src/renderer/src/components/browser-pane/browser-page-zoom.test.ts index 94cdb2462cf..4e59d565c85 100644 --- a/src/renderer/src/components/browser-pane/browser-page-zoom.test.ts +++ b/src/renderer/src/components/browser-pane/browser-page-zoom.test.ts @@ -2,6 +2,7 @@ import { describe, expect, it, vi } from 'vitest' import { applyBrowserPageZoom, browserPageZoomLevelToPercent, + getBrowserPageZoomIndicatorState, nextBrowserPageZoomLevel, normalizeBrowserPageZoomLevel, setBrowserPageZoomLevel @@ -106,3 +107,20 @@ describe('setBrowserPageZoomLevel', () => { expect(webview.setZoomLevel).toHaveBeenCalledWith(1.5) }) }) + +describe('getBrowserPageZoomIndicatorState', () => { + it('shows browser zoom percent only while feedback is active', () => { + expect( + getBrowserPageZoomIndicatorState({ feedbackVisible: true, isDefaultZoom: false }) + ).toEqual({ + ariaHidden: false, + opacityClassName: 'opacity-100' + }) + expect( + getBrowserPageZoomIndicatorState({ feedbackVisible: false, isDefaultZoom: false }) + ).toEqual({ + ariaHidden: true, + opacityClassName: 'opacity-0' + }) + }) +}) diff --git a/src/renderer/src/components/browser-pane/browser-page-zoom.ts b/src/renderer/src/components/browser-pane/browser-page-zoom.ts index a255e7181cc..79d878d3655 100644 --- a/src/renderer/src/components/browser-pane/browser-page-zoom.ts +++ b/src/renderer/src/components/browser-pane/browser-page-zoom.ts @@ -21,6 +21,16 @@ export type BrowserPageZoomEventDetail = { direction: BrowserPageZoomDirection } +export type BrowserPageZoomIndicatorState = { + ariaHidden: boolean + opacityClassName: 'opacity-100' | 'opacity-0' +} + +export type BrowserPageZoomIndicatorInput = { + feedbackVisible: boolean + isDefaultZoom: boolean +} + type BrowserPageZoomWebview = { getZoomLevel: () => number setZoomLevel: (level: number) => void @@ -60,6 +70,17 @@ export function setBrowserPageZoomLevel( } } +export function getBrowserPageZoomIndicatorState({ + feedbackVisible +}: BrowserPageZoomIndicatorInput): BrowserPageZoomIndicatorState { + // Why: browser zoom percent is transient feedback; non-default page zoom + // should not leave a permanent badge over the webview. + return { + ariaHidden: !feedbackVisible, + opacityClassName: feedbackVisible ? 'opacity-100' : 'opacity-0' + } +} + export function dispatchBrowserPageZoomEvent(detail: BrowserPageZoomEventDetail): void { window.dispatchEvent( new CustomEvent(ORCA_BROWSER_PAGE_ZOOM_EVENT, {