@porsche-design-system/components-vue 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/TabsBarWrapper.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const e=require("../../utils.cjs");let t=require("vue");var n=(0,t.defineComponent)({__name:`TabsBarWrapper`,props:{activeTabIndex:{},background:{default:`none`},compact:{type:Boolean},size:{default:`small`},weight:{default:`regular`}},emits:[`update`],setup(n,{emit:r}){let i=e.usePrefix(`p-tabs-bar`),a=n,o=(0,t.ref)(),s=r,c=()=>e.syncProperties(o,a);return(0,t.onMounted)(()=>{c(),e.addEventListenerToElementRef(o,`update`,s)}),(0,t.onUpdated)(c),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)((0,t.unref)(i)),{ref_key:`pdsComponentRef`,ref:o},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},512))}});exports.default=n;
+const e=require("../../utils.cjs");let t=require("vue");var n=(0,t.defineComponent)({__name:`TabsBarWrapper`,props:{activeTabIndex:{},aria:{},background:{default:`none`},compact:{type:Boolean},size:{default:`small`},weight:{default:`regular`}},emits:[`update`],setup(n,{emit:r}){let i=e.usePrefix(`p-tabs-bar`),a=n,o=(0,t.ref)(),s=r,c=()=>e.syncProperties(o,a);return(0,t.onMounted)(()=>{c(),e.addEventListenerToElementRef(o,`update`,s)}),(0,t.onUpdated)(c),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)((0,t.unref)(i)),{ref_key:`pdsComponentRef`,ref:o},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},512))}});exports.default=n;

package/cjs/lib/components/TabsWrapper.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const e=require("../../utils.cjs");let t=require("vue");var n=(0,t.defineComponent)({__name:`TabsWrapper`,props:{activeTabIndex:{default:0},background:{default:`none`},compact:{type:Boolean},size:{default:`small`},weight:{default:`regular`}},emits:[`update`],setup(n,{emit:r}){let i=e.usePrefix(`p-tabs`),a=n,o=(0,t.ref)(),s=r,c=()=>e.syncProperties(o,a);return(0,t.onMounted)(()=>{c(),e.addEventListenerToElementRef(o,`update`,s)}),(0,t.onUpdated)(c),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)((0,t.unref)(i)),{ref_key:`pdsComponentRef`,ref:o},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},512))}});exports.default=n;
+const e=require("../../utils.cjs");let t=require("vue");var n=(0,t.defineComponent)({__name:`TabsWrapper`,props:{activeTabIndex:{default:0},aria:{},background:{default:`none`},compact:{type:Boolean},size:{default:`small`},weight:{default:`regular`}},emits:[`update`],setup(n,{emit:r}){let i=e.usePrefix(`p-tabs`),a=n,o=(0,t.ref)(),s=r,c=()=>e.syncProperties(o,a);return(0,t.onMounted)(()=>{c(),e.addEventListenerToElementRef(o,`update`,s)}),(0,t.onUpdated)(c),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)((0,t.unref)(i)),{ref_key:`pdsComponentRef`,ref:o},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},512))}});exports.default=n;

package/esm/lib/components/ScrollerWrapper.vue.d.ts

@@ -6,7 +6,7 @@ export type PScrollerProps = {
      */
     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/TabsBarWrapper.vue.d.ts

@@ -1,9 +1,13 @@
-import type { TabsBarBackground, TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
+import type { SelectedAriaAttributes, TabsBarAriaAttribute, TabsBarBackground, TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
 export type PTabsBarProps = {
     /**
      * 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/TabsBarWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -5,6 +5,7 @@ var p = /*@__PURE__*/ i({
 	__name: "TabsBarWrapper",
 	props: {
 		activeTabIndex: {},
+		aria: {},
 		background: { default: "none" },
 		compact: { type: Boolean },
 		size: { default: "small" },

package/esm/lib/components/TabsWrapper.vue.d.ts

@@ -1,10 +1,14 @@
-import type { TabsBackground, TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
+import type { SelectedAriaAttributes, TabsAriaAttribute, TabsBackground, TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
 export type PTabsProps = {
     /**
      * 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'

package/esm/lib/components/TabsWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -5,6 +5,7 @@ var p = /*@__PURE__*/ i({
 	__name: "TabsWrapper",
 	props: {
 		activeTabIndex: { default: 0 },
+		aria: {},
 		background: { default: "none" },
 		compact: { type: Boolean },
 		size: { default: "small" },

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-vue",
-  "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-enterprise": ">= 35.0.0 <36.0.0",