GAUD-10291 - Fix issue where focusing the divider causes a page scroll

components/page/demo/page-component.js

@@ -60,6 +60,7 @@ class PageDemo extends LitElement {
 		}
 		.horizontal-fields {
 			display: flex;
+			flex-wrap: wrap;
 			gap: 1rem;
 		}
 	`];

components/page/page-divider-internal.js

@@ -57,28 +57,39 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 			background-color: var(--d2l-color-gypsum);
 			cursor: ew-resize;
 			height: 100%;
-			outline: none;
+			position: relative;
 			width: ${DIVIDER_WIDTH}px;
 		}
 		.divider:hover {
 			background-color: var(--d2l-color-mica);
 		}
-		.divider:focus {
+		.divider:focus-within {
 			background-color: var(--d2l-color-celestine);
 		}
 
+		.slider {
+			outline: none;
+			position: absolute;
+			top: 55px;
+		}
+
 		:host([panel-type="drawer"]) .divider {
 			background-color: var(--d2l-color-celestine);
 			cursor: ns-resize;
 			height: ${DIVIDER_WIDTH}px;
 			width: 100%;
 		}
 
+		:host([panel-type="drawer"]) .slider {
+			inset-inline-end: 18px;
+			top: auto;
+		}
+
 		/* TO DO: Lots more divider styling to come */
 
 	`;
 
-	static focusElementSelector = '.divider';
+	static focusElementSelector = '.slider';
 
 	constructor() {
 		super();
@@ -98,17 +109,19 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		}
 
 		return html`
-			<div
-				class="divider"
-				role="slider"
-				tabindex="0"
-				aria-label="${this.label}"
-				aria-orientation="${this.panelType === 'panel' ? 'horizontal' : 'vertical'}"
-				aria-valuemax="${ifDefined(ariaValues.max)}"
-				aria-valuemin="${ifDefined(ariaValues.min)}"
-				aria-valuenow="${ifDefined(ariaValues.now)}"
-				aria-valuetext="${ifDefined(ariaValues.text)}"
-				@keydown="${this.#handleKeyDown}">
+		    <div class="divider" @pointerdown="${this.#handlePointerDown}">
+				<div
+					class="slider"
+					role="slider"
+					tabindex="0"
+					aria-label="${this.label}"
+					aria-orientation="${this.panelType === 'panel' ? 'horizontal' : 'vertical'}"
+					aria-valuemax="${ifDefined(ariaValues.max)}"
+					aria-valuemin="${ifDefined(ariaValues.min)}"
+					aria-valuenow="${ifDefined(ariaValues.now)}"
+					aria-valuetext="${ifDefined(ariaValues.text)}"
+					@keydown="${this.#handleKeyDown}">
+				</div>
 			</div>
 		`;
 	}
@@ -148,6 +161,11 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		this.#sendResizeEvent(requestedSize);
 	}
 
+	#handlePointerDown(e) {
+		e.preventDefault();
+		this.focus();
+	}
+
 	#sendResizeEvent(requestedSize) {
 		const clampedRequestedSize = clampedSize(requestedSize, this.minSize, this.maxSize);
 		/** @ignore */

components/page/page.js

@@ -132,13 +132,18 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		}
 
 		.side-nav-panel,
-		.supporting-panel {
+		.supporting-panel,
+		.divider {
 			max-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));
-			overflow: clip auto;
 			position: sticky;
 			top: var(--d2l-page-header-height, 0);
 		}
 
+		.side-nav-panel,
+		.supporting-panel {
+			overflow: clip auto;
+		}
+
 		.footer:not([hidden]),
 		.floating-buttons-container {
 			display: inline;
@@ -294,6 +299,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 	#renderDivider(panelKey, label, panelPosition) {
 		return html`
 			<d2l-page-divider-internal
+				class="divider"
 				data-panel-key="${panelKey}"
 				label="${label}"
 				current-size="${this._panelState.getSize(panelKey)}"

components/page/test/page-divider-internal-fixtures.js

@@ -34,7 +34,7 @@ export function getDivider(elem, panelKey) {
 }
 
 export function getSlider(elem) {
-	return elem.shadowRoot.querySelector('.divider');
+	return elem.shadowRoot.querySelector('.slider');
 }
 
 export const pageDividerFixtures = {

components/page/test/page-divider-internal.test.js

@@ -1,6 +1,6 @@
+import { createDivider, getSlider } from './page-divider-internal-fixtures.js';
 import { expect, fixture, html, nextFrame, oneEvent, runConstructor, sendKeysElem } from '@brightspace-ui/testing';
 import { KEYBOARD_STEP, KEYBOARD_STEP_LARGE } from '../page-divider-internal.js';
-import { createDivider } from './page-divider-internal-fixtures.js';
 
 describe('d2l-page-divider-internal', () => {
 
@@ -11,7 +11,7 @@ describe('d2l-page-divider-internal', () => {
 	describe('accessibility', () => {
 		it('calculates aria values correctly', async() => {
 			const elem = await fixture(html`<d2l-page-divider-internal label="Resize" min-size="100" max-size="200" current-size="150"></d2l-page-divider-internal>`);
-			const slider = elem.shadowRoot.querySelector('.divider');
+			const slider = getSlider(elem);
 			expect(slider.getAttribute('aria-valuemax')).to.equal('200');
 			expect(slider.getAttribute('aria-valuemin')).to.equal('0');
 			expect(slider.getAttribute('aria-valuenow')).to.equal('150');
@@ -20,7 +20,7 @@ describe('d2l-page-divider-internal', () => {
 
 		it('does not set aria values when in unknown state', async() => {
 			const elem = await fixture(html`<d2l-page-divider-internal label="Resize"></d2l-page-divider-internal>`);
-			const slider = elem.shadowRoot.querySelector('.divider');
+			const slider = getSlider(elem);
 			expect(slider.hasAttribute('aria-valuemax')).to.be.false;
 			expect(slider.hasAttribute('aria-valuemin')).to.be.false;
 			expect(slider.hasAttribute('aria-valuenow')).to.be.false;

components/page/test/page-divider-internal.vdiff.js

@@ -51,6 +51,24 @@ describe('page-divider-internal', () => {
 		});
 	});
 
+	describe('focus-stay-scrolled', () => {
+		[
+			{ name: 'main', divider: 'side-nav', fixture: pageDividerFixtures.sideNavLongMainBothHeaders },
+			{ name: 'panel', divider: 'supporting', fixture: pageDividerFixtures.supportingLongFooter },
+			{ name: 'immersive-main', divider: 'supporting', fixture: pageDividerFixtures.supportingImmersiveLongMain },
+			{ name: 'immersive-panel', divider: 'side-nav', fixture: pageDividerFixtures.sideNavImmersiveLongFooter }
+		].forEach(test => {
+			it(test.name, async() => {
+				const elem = await fixture(test.fixture, { pagePadding: false, viewport: { width: 1000, height: 400 } });
+				window.scrollTo(0, document.body.scrollHeight);
+				const panel = elem.shadowRoot.querySelector(`.${test.divider}-panel`);
+				panel.scrollTop = panel.scrollHeight;
+				await focusElem(getDivider(elem, test.divider));
+				await expect(elem).to.be.golden({ margin: 0 });
+			});
+		});
+	});
+
 	describe('keyboard', () => {
 		// TO DO once arrow visuals added
 	});