Merge branch 'main' into fix/tools/dev-server-config

Author: zeroedin

.changeset/base-tab-id.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+`<pf-tabs>`: improved accessibility for elements extending `BaseTab` and 
+`BaseTabPanel` by assigning random IDs when no exists.

.changeset/perfect-dragons-double.md

@@ -0,0 +1,7 @@
+---
+"@patternfly/elements": patch
+---
+
+`BaseTab`: 
+ - fixed Safari focus issue on keyboard navigation
+ - fixed Safari focus issue on mouse click

.changeset/two-pugs-add.md

@@ -0,0 +1,7 @@
+---
+"@patternfly/pfe-core": patch
+---
+
+`overflow-controller`: 
+ - improves display calculations for overflow scroll buttons
+ - adds smooth scroll behavior

core/pfe-core/controllers/overflow-controller.ts

@@ -42,7 +42,12 @@ export class OverflowController implements ReactiveController {
     }
     this.overflowLeft = !this.#hideOverflowButtons && !isElementInView(this.#container, this.firstItem);
     this.overflowRight = !this.#hideOverflowButtons && !isElementInView(this.#container, this.lastItem);
-    this.showScrollButtons = !this.#hideOverflowButtons && (this.overflowLeft || this.overflowRight);
+    let scrollButtonsWidth = 0;
+    if (this.overflowLeft || this.overflowRight) {
+      scrollButtonsWidth = (this.#container.parentElement?.querySelector('button')?.getBoundingClientRect().width || 0) * 2;
+    }
+    this.showScrollButtons = !this.#hideOverflowButtons &&
+    this.#container.scrollWidth > (this.#container.clientWidth + scrollButtonsWidth);
     this.host.requestUpdate();
   }
 
@@ -61,35 +66,17 @@ export class OverflowController implements ReactiveController {
     if (!this.#container) {
       return;
     }
-    let firstElementInView: HTMLElement | undefined;
-    let lastElementOutOfView: HTMLElement | undefined;
-    for (let i = 0; i < this.#items.length && !firstElementInView; i++) {
-      if (isElementInView(this.#container, this.#items[i] as HTMLElement, false)) {
-        firstElementInView = this.#items[i];
-        lastElementOutOfView = this.#items[i - 1];
-      }
-    }
-    if (lastElementOutOfView) {
-      this.#container.scrollLeft -= lastElementOutOfView.scrollWidth;
-    }
+    const leftScroll = this.#container.scrollLeft - this.#container.clientWidth;
+    this.#container.scroll({ left: leftScroll, behavior: 'smooth' });
     this.#setOverflowState();
   }
 
   scrollRight() {
     if (!this.#container) {
       return;
     }
-    let lastElementInView: HTMLElement | undefined;
-    let firstElementOutOfView: HTMLElement | undefined;
-    for (let i = this.#items.length - 1; i >= 0 && !lastElementInView; i--) {
-      if (isElementInView(this.#container, this.#items[i] as HTMLElement, false)) {
-        lastElementInView = this.#items[i];
-        firstElementOutOfView = this.#items[i + 1];
-      }
-    }
-    if (firstElementOutOfView) {
-      this.#container.scrollLeft += firstElementOutOfView.scrollWidth;
-    }
+    const leftScroll = this.#container.scrollLeft + this.#container.clientWidth;
+    this.#container.scroll({ left: leftScroll, behavior: 'smooth' });
     this.#setOverflowState();
   }
 

elements/pf-tabs/BaseTab.ts

@@ -4,6 +4,7 @@ import { LitElement, html } from 'lit';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
 import { query } from 'lit/decorators/query.js';
 
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { ComposedEvent } from '@patternfly/pfe-core';
 
 import style from './BaseTab.css';
@@ -37,6 +38,7 @@ export abstract class BaseTab extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.id ||= getRandomId(this.localName);
     this.addEventListener('click', this.#clickHandler);
     this.#internals.role = 'tab';
   }
@@ -63,9 +65,14 @@ export abstract class BaseTab extends LitElement {
     }
   }
 
+  focus() {
+    this.button.focus();
+  }
+
   #clickHandler() {
     if (!this.disabled && this.#internals.ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {
       this.active = true;
+      this.focus(); // safari fix
     }
   }
 

elements/pf-tabs/BaseTabPanel.ts

@@ -2,6 +2,8 @@ import { LitElement, html } from 'lit';
 
 import style from './BaseTabPanel.css';
 
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
+
 export abstract class BaseTabPanel extends LitElement {
   static readonly styles = [style];
 
@@ -17,6 +19,7 @@ export abstract class BaseTabPanel extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.id ||= getRandomId('pf-tab-panel');
     this.#internals.role = 'tabpanel';
     /*
      To make it easy for screen reader users to navigate from a tab

elements/pf-tabs/BaseTabs.ts

@@ -226,8 +226,10 @@ export abstract class BaseTabs extends LitElement {
     }
 
     if (event.active) {
+      if (event.tab !== this.#tabindex.activeItem) {
+        this.#tabindex.updateActiveItem(event.tab);
+      }
       this.activeIndex = this.#allTabs.findIndex(tab => tab === event.tab);
-      this.#tabindex.updateActiveItem(this.#activeTab);
     }
   };
 

elements/pf-tabs/pf-tab-panel.ts

@@ -1,7 +1,5 @@
 import { customElement } from 'lit/decorators/custom-element.js';
 
-import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
-
 import styles from './pf-tab-panel.css';
 
 import { BaseTabPanel } from './BaseTabPanel.js';
@@ -16,11 +14,6 @@ import { BaseTabPanel } from './BaseTabPanel.js';
 @customElement('pf-tab-panel')
 export class PfTabPanel extends BaseTabPanel {
   static readonly styles = [...BaseTabPanel.styles, styles];
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.id ||= getRandomId('pf-tab-panel');
-  }
 }
 
 declare global {

elements/pf-tabs/pf-tab.ts

@@ -2,7 +2,6 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import { observed } from '@patternfly/pfe-core/decorators.js';
-import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 
 import { BaseTab } from './BaseTab.js';
 
@@ -77,11 +76,6 @@ export class PfTab extends BaseTab {
 
   @observed
   @property({ reflect: true, type: Boolean }) disabled = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.id ||= getRandomId('pf-tab');
-  }
 }
 
 declare global {