Skip to content

Lock page scroll and enable backdrop dismissal for Package for Stores dialog #6090

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kendzisah10 merged 6 commits into from
Jul 9, 2026
Merged

Lock page scroll and enable backdrop dismissal for Package for Stores dialog #6090

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e76d3ca
Initial plan
Copilot Jul 2, 2026
6d638f0
Fix package modal scroll locking
Copilot Jul 2, 2026
05e1d3a
Simplify dialog scroll lock via WA class, make all dialogs light-dismiss
JudahGabriel-MS Jul 8, 2026
434268e
Merge origin/main into scroll dialog fix
Copilot Jul 8, 2026
f8e0b25
Merge branch 'copilot/bug-bash-8-25-fix-scrollbar-dialog' of https://…
JudahGabriel-MS Jul 8, 2026
9da6635
Potential fix for pull request finding
JudahGabriel Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions apps/pwabuilder/Frontend/public/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,17 @@ body {
overflow-x: hidden; /* Prevent horizontal scrolling at high zoom */
}

/*
* WebAwesome locks page scrolling by adding the `wa-scroll-lock` class to
* <html> while a dialog is open, but its bundled rule only targets <body>
* (`.wa-scroll-lock body { overflow: hidden }`). PWABuilder scrolls on <html>,
* so that rule is a no-op here. Mirror it on <html> so WA's built-in scroll
* lock works for every dialog without any per-dialog JavaScript.
*/
html.wa-scroll-lock {
overflow: hidden !important;
}

/* Ensure all text wraps properly */
* {
word-wrap: break-word;
Expand Down
4 changes: 1 addition & 3 deletions apps/pwabuilder/Frontend/src/script/components/manifest-editor-frame.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,10 @@ export class ManifestEditorFrame extends LitElement {
if (e.target === dialog) {
dialog!.open = false;
recordPWABuilderProcessStep("manifest_editor_closed", AnalyticsBehavior.ProcessCheckpoint);
document.body.style.height = "unset";
}
}

async openDialog() {
document.body.style.height = "100vh"
const dialog = this.shadowRoot!.querySelector(".dialog");

dialog?.removeEventListener('wa-request-close', () => { });
Expand Down Expand Up @@ -120,7 +118,7 @@ export class ManifestEditorFrame extends LitElement {

render() {
return html`
<wa-dialog class="dialog" @wa-show=${() => this.openDialog()} @wa-hide=${(e: any) => this.hideDialog(e)}>
<wa-dialog class="dialog" light-dismiss @wa-show=${() => this.openDialog()} @wa-hide=${(e: any) => this.hideDialog(e)}>
<div id="frame-wrapper">
<div id="frame-content">
<div id="frame-header">
Expand Down
4 changes: 0 additions & 4 deletions apps/pwabuilder/Frontend/src/script/components/publish-pane.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,10 +322,6 @@ export const publishPaneStyles = css`
flex-direction: column;
}

.noX::part(close-button) {
display: none;
}

.dialog::part(body){
padding: 0;
width: 100%;
Expand Down
14 changes: 2 additions & 12 deletions apps/pwabuilder/Frontend/src/script/components/publish-pane.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import './android-form';
import './ios-form';
import { AppPackageFormBase } from './app-package-form-base';
import { PackageOptions } from '../utils/interfaces';
import { classMap } from 'lit/directives/class-map.js';
import { getDataFromDB, setDataInDB } from '../utils/indexedDB';
import { GooglePlayPackageError } from "../models/google-play-package-error";
import { enqueueGooglePlayPackageJob } from "../services/publish/android-publish";
Expand Down Expand Up @@ -51,8 +50,6 @@ export class PublishPane extends LitElement {
@state() downloadFileName: string | null = null;
@state() feedbackMessages: TemplateResult[] = [];

@property({ type: Boolean }) preventClosing = false;

@state() storeMap: any = {
"Windows":
{
Expand Down Expand Up @@ -469,17 +466,10 @@ export class PublishPane extends LitElement {
this.feedbackMessages = [];
dialog!.open = false;
recordPWABuilderProcessStep("publish_pane_closed", AnalyticsBehavior.ProcessCheckpoint);
document.body.style.height = "unset";
this.cardsOrForm = true;
}
}

handleRequestClose(e: Event) {
if (this.preventClosing) {
e.preventDefault();
}
}

// goes from form back to cards when you click the back arrow
backToCards() {
this.cardsOrForm = !this.cardsOrForm;
Expand Down Expand Up @@ -663,9 +653,9 @@ export class PublishPane extends LitElement {
return html`
<wa-dialog
label="Dialog"
class=${classMap({ noX: this.preventClosing, dialog: true })}
class="dialog"
light-dismiss
@wa-hide=${(e: any) => this.hideDialog(e)}
Comment thread
JudahGabriel marked this conversation as resolved.
@wa-request-close=${(e: any) => this.handleRequestClose(e)}
>
<div id="pp-frame-wrapper">
<div id="pp-frame-content">
Expand Down
9 changes: 1 addition & 8 deletions apps/pwabuilder/Frontend/src/script/components/share-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
@customElement('share-card')
export class ShareCard extends LitElement {

@property() preventClosing = false;
@property() manifestData = "";
@property() swData = "";
@property() enhancementsData = "";
Expand Down Expand Up @@ -106,15 +105,9 @@ export class ShareCard extends LitElement {
dialog!.open = false;
}

handleRequestClose(e: Event){
if (this.preventClosing) {
e.preventDefault();
}
}

render() {
return html`
<wa-dialog class="dialog" @wa-show=${() => this.setup()} @wa-hide=${() => this.hideDialog()}>
<wa-dialog class="dialog" light-dismiss @wa-show=${() => this.setup()} @wa-hide=${() => this.hideDialog()}>
<div class="share-modal-header">Share your PWA score with the community!</div>
<div id="frame-wrapper">
<div id="frame-content">
Expand Down
3 changes: 1 addition & 2 deletions apps/pwabuilder/Frontend/src/script/components/sw-selector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ export class SWSelector extends LitElement {
if(e.target === dialog){
dialog!.open = false;
recordPWABuilderProcessStep("sw_selector_closed", AnalyticsBehavior.ProcessCheckpoint);
document.body.style.height = "unset";
}
}

Expand Down Expand Up @@ -63,7 +62,7 @@ export class SWSelector extends LitElement {

render() {
return html`
<wa-dialog class="dialog" @wa-show=${() => document.body.style.height = "100vh"} @wa-hide=${(e: any) => this.hideDialog(e)}>
<wa-dialog class="dialog" light-dismiss @wa-hide=${(e: any) => this.hideDialog(e)}>
<div id="selector-header">
<h1>Download a Service Worker</h1>
<p>Download one of our pre-built Service Workers package that utilize Workbox to make building your offline experience easy.</p>
Expand Down
3 changes: 1 addition & 2 deletions apps/pwabuilder/Frontend/src/script/components/test-publish-pane.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,13 +235,12 @@ export class TestPublishPane extends LitElement {
this.generating = false;
dialog!.open = false;
recordPWABuilderProcessStep("test_publish_pane_closed", AnalyticsBehavior.ProcessCheckpoint);
document.body.style.height = "unset";
}
}

render() {
return html`
<wa-dialog class="dialog" @wa-show=${() => document.body.style.height = "100vh"} @wa-hide=${(e: any) => this.hideDialog(e)}>
<wa-dialog class="dialog" light-dismiss @wa-hide=${(e: any) => this.hideDialog(e)}>
<div id="pp-frame-wrapper">
<div id="pp-frame-content">
<div id="pp-frame-header">
Expand Down
6 changes: 3 additions & 3 deletions apps/pwabuilder/Frontend/src/script/pages/app-report.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1132,7 +1132,7 @@ export class AppReport extends LitElement {
</div>
</div>

<wa-dialog class="dialog" ?open=${this.showRetestConfirmationModal} @wa-hide=${() => { this.showRetestConfirmationModal = false; this.readDenied = false; }} without-header>
<wa-dialog class="dialog" light-dismiss ?open=${this.showRetestConfirmationModal} @wa-hide=${() => { this.showRetestConfirmationModal = false; this.readDenied = false; }} without-header>
${this.renderReadDialog()}
</wa-dialog>

Expand Down Expand Up @@ -1396,7 +1396,7 @@ export class AppReport extends LitElement {
}

return html`
<wa-dialog class="analysis-logs-dialog" label="Analysis Logs">
<wa-dialog class="analysis-logs-dialog" label="Analysis Logs" light-dismiss>
<h3>
Logs
<wa-copy-button value="" from="logs-text-area.value"></wa-copy-button>
Expand All @@ -1422,7 +1422,7 @@ export class AppReport extends LitElement {
const errorInfo = `${this.analysis.url} failed due to an internal error.\r\n\r\n> ${this.analysis.error}\r\n\r\nId: ${this.analysis.id}\r\n\r\nLogs:\r\n> ${this.analysis.logs.join("\r\n")}`;
const bugLink = `https://github.com/pwa-builder/pwabuilder/issues/new?title=Analysis%20Failed&labels=bug%20:bug:&body=${encodeURIComponent(errorInfo.substring(0, 4000))}`;
return html`
<wa-dialog label="Error" class="analysis-error-dialog">
<wa-dialog label="Error" class="analysis-error-dialog" light-dismiss>
<p>
😵 Oh no, PWABuilder was unable to analyze your web app due to an error.
</p>
Expand Down
2 changes: 1 addition & 1 deletion apps/pwabuilder/Frontend/src/script/pages/powerplatform-publish.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export class AppReport extends LitElement {
</div>
</div>

<publish-pane .preventClosing=${true}></publish-pane>
<publish-pane></publish-pane>
Comment thread
JudahGabriel marked this conversation as resolved.
`;
}
}
7 changes: 0 additions & 7 deletions apps/pwabuilder/Frontend/src/script/utils/dom-utils.ts
View file
Open in desktop

This file was deleted.

60 changes: 59 additions & 1 deletion apps/pwabuilder/Frontend/tests/packaging.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,65 @@ test('Ensure Windows Download Package button has visible focus indicator', async
expect(outlineWidth).toBe('2px');
});

test('Package for Stores dialog locks scrolling and closes on backdrop click', async ({ page }) => {
const demoButton = page.locator('id=demo-action');

await demoButton.click();
await page.waitForLoadState('networkidle');
await expect(page.url()).toContain('/reportcard');
await page.waitForLoadState('networkidle');

await page.evaluate(() => window.scrollTo(0, 500));
const initialScrollPosition = await page.evaluate(() => window.scrollY);

await page.evaluate(() => {
const appReport = document.querySelector('app-index')?.shadowRoot?.querySelector('app-report') as {
openPublishModal?: () => void;
} | null;

appReport?.openPublishModal?.();
});

await expect.poll(async () => {
return page.evaluate(() => {
const appReport = document.querySelector('app-index')?.shadowRoot?.querySelector('app-report');
const dialog = appReport?.shadowRoot
?.querySelector('publish-pane')
?.shadowRoot
?.querySelector('.dialog') as { open?: boolean } | null;

return dialog?.open ?? false;
});
}).toBe(true);

await expect.poll(async () => {
return page.evaluate(() => document.documentElement.classList.contains('wa-scroll-lock'));
}).toBe(true);

await page.mouse.wheel(0, 500);
await expect.poll(async () => {
return page.evaluate(() => window.scrollY);
}).toBe(initialScrollPosition);

Comment thread
Copilot marked this conversation as resolved.
Outdated
await page.mouse.click(20, 20);
Comment thread
JudahGabriel marked this conversation as resolved.

await expect.poll(async () => {
return page.evaluate(() => {
const appReport = document.querySelector('app-index')?.shadowRoot?.querySelector('app-report');
const dialog = appReport?.shadowRoot
?.querySelector('publish-pane')
?.shadowRoot
?.querySelector('.dialog') as { open?: boolean } | null;

return dialog?.open ?? false;
});
}).toBe(false);

await expect.poll(async () => {
return page.evaluate(() => document.documentElement.classList.contains('wa-scroll-lock'));
}).toBe(false);
});

test('Ensure Windows package dialog back button focus does not span the close button', async ({ page }) => {
const headerMetrics = await page.evaluate(async () => {
sessionStorage.setItem('current_url', 'https://example.com');
Expand Down Expand Up @@ -331,7 +390,6 @@ test('Ensure Windows package dialog initially focuses the Package ID field', asy
internalInputFocused: internalInput === packageIdInput?.shadowRoot?.activeElement
};
});

expect(focusState).not.toBeNull();
expect(focusState?.packageIdFocused || focusState?.internalInputFocused).toBe(true);
});
Loading