@porsche-design-system/components-react 4.2.0 → 4.3.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.3.0-rc.0] - 2026-06-24
+
+### Added
+
+- `Tabs`, `Tabs Bar`: `aria` prop to provide additional context for screen readers
+  ([#4538](https://github.com/porsche-design-system/porsche-design-system/pull/4538))
+
+### Changed
+
+- `Angular`: Widen peer dependency to support Angular version 21 + 22
+  ([#4546](https://github.com/porsche-design-system/porsche-design-system/pull/4546))
+
 ## [4.2.0] - 2026-06-22
 
 ## [4.2.0-rc.5] - 2026-06-12

package/cjs/lib/components/tabs-bar.wrapper.cjs

@@ -6,14 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
+const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, aria, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, background, compact, size, weight];
+    const propsToSync = [activeTabIndex, aria, background, compact, size, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'aria', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/tabs.wrapper.cjs

@@ -6,14 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
+const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, aria, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, background, compact, size, weight];
+    const propsToSync = [activeTabIndex, aria, background, compact, size, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'aria', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/scroller.wrapper.d.ts

@@ -7,7 +7,7 @@ export type PScrollerProps = BaseProps & {
      */
     alignScrollIndicator?: ScrollerAlignScrollIndicator;
     /**
-     * Sets the ARIA `role` attribute on the scroller's scroll container, useful for list-based navigation patterns.
+     * Sets ARIA role and attributes on the scroller's scroll container, useful for tablist navigation patterns and additional accessibility context.
      */
     aria?: SelectedAriaAttributes<ScrollerAriaAttribute>;
     /**
@@ -36,7 +36,7 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<i
      */
     alignScrollIndicator?: ScrollerAlignScrollIndicator;
     /**
-     * Sets the ARIA `role` attribute on the scroller's scroll container, useful for list-based navigation patterns.
+     * Sets ARIA role and attributes on the scroller's scroll container, useful for tablist navigation patterns and additional accessibility context.
      */
     aria?: SelectedAriaAttributes<ScrollerAriaAttribute>;
     /**

package/esm/lib/components/tabs-bar.wrapper.d.ts

@@ -1,10 +1,14 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TabsBarBackground, TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
+import type { SelectedAriaAttributes, TabsBarAriaAttribute, TabsBarBackground, TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
 export type PTabsBarProps = BaseProps & {
     /**
      * Sets the zero-based index of the currently active tab. Pass `undefined` to render all tabs in an unselected state.
      */
     activeTabIndex?: number | undefined;
+    /**
+     * Sets ARIA attributes on the tablist, such as `aria-label` and `aria-description`.
+     */
+    aria?: SelectedAriaAttributes<TabsBarAriaAttribute>;
     /**
      * Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
      * @default 'none'
@@ -34,6 +38,10 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<im
      * Sets the zero-based index of the currently active tab. Pass `undefined` to render all tabs in an unselected state.
      */
     activeTabIndex?: number | undefined;
+    /**
+     * Sets ARIA attributes on the tablist, such as `aria-label` and `aria-description`.
+     */
+    aria?: SelectedAriaAttributes<TabsBarAriaAttribute>;
     /**
      * Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
      * @default 'none'

package/esm/lib/components/tabs-bar.wrapper.mjs

@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
+const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, aria, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, background, compact, size, weight];
+    const propsToSync = [activeTabIndex, aria, background, compact, size, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'aria', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/tabs.wrapper.d.ts

@@ -1,11 +1,15 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TabsBackground, TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
+import type { SelectedAriaAttributes, TabsAriaAttribute, TabsBackground, TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
 export type PTabsProps = BaseProps & {
     /**
      * Sets the zero-based index of the currently active tab; update this prop to switch tabs programmatically.
      * @default 0
      */
     activeTabIndex?: number;
+    /**
+     * Sets ARIA attributes on the tablist, such as `aria-label` and `aria-description`.
+     */
+    aria?: SelectedAriaAttributes<TabsAriaAttribute>;
     /**
      * Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
      * @default 'none'
@@ -36,6 +40,10 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<impor
      * @default 0
      */
     activeTabIndex?: number;
+    /**
+     * Sets ARIA attributes on the tablist, such as `aria-label` and `aria-description`.
+     */
+    aria?: SelectedAriaAttributes<TabsAriaAttribute>;
     /**
      * Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
      * @default 'none'

package/esm/lib/components/tabs.wrapper.mjs

@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
+const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, aria, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, background, compact, size, weight];
+    const propsToSync = [activeTabIndex, aria, background, compact, size, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'aria', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/types.d.ts

@@ -1583,7 +1583,9 @@ declare const SCROLLER_ALIGN_SCROLL_INDICATORS: readonly [
 /** @deprecated */
 export type ScrollerAlignScrollIndicator = (typeof SCROLLER_ALIGN_SCROLL_INDICATORS)[number];
 declare const SCROLLER_ARIA_ATTRIBUTES: readonly [
-    "role"
+    "role",
+    "aria-label",
+    "aria-description"
 ];
 export type ScrollerAriaAttribute = (typeof SCROLLER_ARIA_ATTRIBUTES)[number];
 /** @deprecated */
@@ -1670,6 +1672,11 @@ export type TableHeadCellSort = {
     direction?: Direction;
 };
 export type TableUpdateEventDetail = TableHeadCellSort;
+declare const TABS_ARIA_ATTRIBUTES: readonly [
+    "aria-label",
+    "aria-description"
+];
+export type TabsAriaAttribute = (typeof TABS_ARIA_ATTRIBUTES)[number];
 declare const TABS_SIZES: readonly [
     "small",
     "medium"
@@ -1691,6 +1698,11 @@ export type TabsWeight = (typeof TABS_WEIGHTS)[number];
 export type TabsUpdateEventDetail = {
     activeTabIndex: number;
 };
+declare const TABS_BAR_ARIA_ATTRIBUTES: readonly [
+    "aria-label",
+    "aria-description"
+];
+export type TabsBarAriaAttribute = (typeof TABS_BAR_ARIA_ATTRIBUTES)[number];
 declare const TABS_BAR_BACKGROUNDS: readonly [
     "canvas",
     "surface",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.2.0",
+  "version": "4.3.0-rc.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -21,7 +21,7 @@
     "url": "https://github.com/porsche-design-system/porsche-design-system"
   },
   "dependencies": {
-    "@porsche-design-system/components-js": "4.2.0"
+    "@porsche-design-system/components-js": "4.3.0-rc.0"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 35.0.0 <36.0.0",