Merge branch 'main' into user-menu-item-sample

Author: SvilenDarvenyashki

packages/main/cypress/specs/Panel.cy.tsx

@@ -1,4 +1,3 @@
-import Button from "../../src/Button.js";
 import Label from "../../src/Label.js";
 import Panel from "../../src/Panel.js";
 import Title from "../../src/Title.js";
@@ -726,139 +725,3 @@ describe("Accessibility", () => {
 			.should("have.attr", "aria-label", accessibleNamePanel);
 	});
 });
-
-describe("Scrollable Content Focus", () => {
-	function addPageStyles(styles: string) {
-		cy.document().then((doc) => {
-			const style = doc.createElement("style");
-			style.id = "panel-focus-styles";
-			style.innerHTML = styles;
-			doc.head.appendChild(style);
-		});
-	}
-	function clearPageStyles() {
-		cy.window()
-			.then($el => {
-				const styleTag = $el.document.head.querySelector("style[id='panel-focus-styles']");
-				styleTag?.remove();
-			});
-	}
-
-	it("Scrollable content with no focusable children is focusable", () => {
-		addPageStyles(`
-			#panel-scroll::part(content) {
-				max-height: 50px;
-			}
-		`);
-
-		const longText = "Lorem ipsum dolor sit amet. ".repeat(20);
-
-		cy.mount(
-			<Panel headerText="Scrollable Panel" id="panel-scroll">
-				<div>{longText}</div>
-			</Panel>
-		);
-
-		cy.get("[ui5-panel]")
-			.shadow()
-			.find(".ui5-panel-content")
-			.as("content");
-
-		cy.get("[ui5-panel]")
-			.shadow()
-			.find(".ui5-panel-content-wrapper")
-			.as("wrapper");
-
-		cy.wait(100);
-
-		cy.get("@content")
-			.should($el => {
-				expect($el[0].scrollHeight).to.be.greaterThan($el[0].clientHeight);
-			});
-
-		cy.get("@content")
-			.should("have.attr", "tabindex", "0");
-
-		cy.get("@wrapper")
-			.should("have.class", "ui5-panel-content-focusable");
-
-		cy.get("[ui5-panel]")
-			.shadow()
-			.find(".ui5-panel-header")
-			.focus()
-			.realPress("Tab");
-
-		cy.get("@content")
-			.should("be.focused");
-
-		clearPageStyles();
-	});
-
-	it("Scrollable content with focusable children is NOT focusable", () => {
-		addPageStyles(`
-			#panel-button::part(content) {
-				max-height: 50px;
-			}
-		`);
-
-		const longText = "Lorem ipsum dolor sit amet. ".repeat(10);
-
-		cy.mount(
-			<Panel headerText="Panel with Button" id="panel-button">
-				<div>{longText}</div>
-				<Button>Click me</Button>
-				<div>{longText}</div>
-			</Panel>
-		);
-
-		cy.get("[ui5-panel]")
-			.shadow()
-			.find(".ui5-panel-content")
-			.as("content");
-
-		cy.get("[ui5-panel]")
-			.shadow()
-			.find(".ui5-panel-content-wrapper")
-			.as("wrapper");
-
-		cy.wait(100);
-
-		cy.get("@content")
-			.should("not.have.attr", "tabindex");
-
-		cy.get("@wrapper")
-			.should("not.have.class", "ui5-panel-content-focusable");
-
-		cy.get("[ui5-panel]")
-			.shadow()
-			.find(".ui5-panel-header")
-			.focus()
-			.realPress("Tab");
-
-		cy.get("[ui5-button]")
-			.should("be.focused");
-
-		clearPageStyles();
-	});
-
-	it("Non-scrollable content is NOT focusable", () => {
-		cy.mount(
-			<Panel headerText="Short Content Panel">
-				<Label>Short text</Label>
-			</Panel>
-		);
-
-		cy.get("[ui5-panel]")
-			.shadow()
-			.find(".ui5-panel-content")
-			.as("content");
-
-		cy.get("@content")
-			.should($el => {
-				expect($el[0].scrollHeight).to.be.lte($el[0].clientHeight);
-			});
-
-		cy.get("@content")
-			.should("not.have.attr", "tabindex");
-	});
-});

packages/main/src/Panel.ts

@@ -14,7 +14,6 @@ import { supportsTouch } from "@ui5/webcomponents-base/dist/Device.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { UI5CustomEvent } from "@ui5/webcomponents-base";
-import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import type TitleLevel from "./types/TitleLevel.js";
 import type Button from "./Button.js";
 import type PanelAccessibleRole from "./types/PanelAccessibleRole.js";
@@ -204,14 +203,6 @@ class Panel extends UI5Element {
 	@property({ type: Boolean })
 	_touched = false;
 
-	/**
-	 * Indicates whether the content area should be focusable.
-	 * This is true when content is scrollable and has no focusable children.
-	 * @private
-	 */
-	@property({ type: Boolean, noAttribute: true })
-	_contentFocusable = false;
-
 	/**
 	 * Defines the component header area.
 	 *
@@ -233,10 +224,6 @@ class Panel extends UI5Element {
 		this._hasHeader = !!this.header.length;
 	}
 
-	onAfterRendering() {
-		this._updateContentFocusable();
-	}
-
 	shouldToggle(element: HTMLElement): boolean {
 		const customContent = this.header.length;
 		if (customContent) {
@@ -348,50 +335,6 @@ class Panel extends UI5Element {
 		return target.classList.contains("sapMPanelWrappingDiv");
 	}
 
-	/**
-	 * Updates the focusability of the content area.
-	 * Content becomes focusable when:
-	 * - Panel is expanded (not collapsed)
-	 * - Content is scrollable (scrollHeight > clientHeight or scrollWidth > clientWidth)
-	 * - No focusable children exist inside
-	 * @private
-	 */
-	_updateContentFocusable() {
-		// Not focusable when collapsed
-		if (this.collapsed) {
-			this._contentFocusable = false;
-			return;
-		}
-
-		const contentDom = this.shadowRoot?.querySelector(".ui5-panel-content") as HTMLElement | null;
-		if (!contentDom) {
-			this._contentFocusable = false;
-			return;
-		}
-
-		// Check if scrollable (vertical OR horizontal)
-		const isScrollable = contentDom.scrollHeight > contentDom.clientHeight
-			|| contentDom.scrollWidth > contentDom.clientWidth;
-
-		if (!isScrollable) {
-			this._contentFocusable = false;
-			return;
-		}
-
-		// Check for focusable children (synchronous)
-		const tabbables = getTabbableElements(contentDom);
-		this._contentFocusable = tabbables.length === 0;
-	}
-
-	/**
-	 * Returns the tabindex for the content area.
-	 * Returns 0 when content should be focusable, undefined otherwise (removes attribute).
-	 * @private
-	 */
-	get _contentTabIndex(): number | undefined {
-		return this._contentFocusable ? 0 : undefined;
-	}
-
 	get toggleButtonTitle() {
 		return Panel.i18nBundle.getText(PANEL_ICON);
 	}

packages/main/src/PanelTemplate.tsx

@@ -89,22 +89,15 @@ export default function PanelTemplate(this: Panel) {
 
 			{/* content area */}
 			<div
-				class={{
-					"ui5-panel-content-wrapper": true,
-					"ui5-panel-content-focusable": this._contentFocusable,
-				}}
+				class="ui5-panel-content"
+				id={ `${this._id}-content` }
+				tabindex={ -1 }
 				style={{
 					display: this._contentExpanded ? "block" : "none",
 				}}
+				part="content"
 			>
-				<div
-					class="ui5-panel-content"
-					id={ `${this._id}-content` }
-					tabindex={ this._contentTabIndex }
-					part="content"
-				>
-					<slot></slot>
-				</div>
+				<slot></slot>
 			</div>
 		</div>
 	</>);

packages/main/src/themes/Panel.css

@@ -91,30 +91,13 @@
 	white-space: nowrap;
 }
 
-.ui5-panel-content-wrapper {
-	overflow: hidden;
+.ui5-panel-content {
 	padding: var(--_ui5_panel_content_padding);
 	background-color: var(--sapGroup_ContentBackground);
+	outline: none;
 	border-bottom-left-radius: var(--_ui5_panel_border_radius);
 	border-bottom-right-radius: var(--_ui5_panel_border_radius);
-	flex: 1;
-	min-height: 0;
-	box-sizing: border-box;
-}
-
-.ui5-panel-content-wrapper.ui5-panel-content-focusable:focus-within {
-	outline: var(--_ui5_panel_focus_border);
-	outline-offset: var(--_ui5_panel_content_focus_offset);
-}
-
-.ui5-panel-content {
-	height: 100%;
 	overflow: auto;
-	outline: none;
-}
-
-.ui5-panel-content:focus {
-	outline: none;
 }
 
 .ui5-panel-header-button-root {

packages/main/src/themes/base/Panel-parameters.css

@@ -13,7 +13,6 @@
 	--_ui5_panel_focus_offset: 1px;
 	--_ui5_panel_focus_bottom_offset: var(--_ui5_panel_focus_offset);
 	--_ui5_panel_content_padding: 0.625rem 1rem 1.375rem 1rem;
-	--_ui5_panel_content_focus_offset: -0.1875rem;
 	--_ui5_panel_header_background_color: var(--sapBackgroundColor);
 }