@porsche-design-system/components-react 4.2.0 → 4.3.0

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/tabs.wrapper.mjs

@@ -5,21 +5,21 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.mjs';
 import { DSRTabs } from '../dsr-components/tabs.mjs';
 
-const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, aria, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, children, ...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,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTabs, { activeTabIndex, background, compact, size, weight, children })),
+                children: (jsx(DSRTabs, { activeTabIndex, aria, background, compact, size, weight, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/scroller.mjs

@@ -19,7 +19,7 @@ class DSRScroller extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$s(this.props.isIndicatorPrevVisible, this.props.isIndicatorNextVisible, this.props.sticky, this.props.scrollbar, this.props.compact));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("span", { className: "prev" }), jsx("span", { className: "next" }), jsxs("div", { className: "scroll", role: parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: this.props.isIndicatorPrevVisible || this.props.isIndicatorNextVisible ? 0 : null, children: [jsx("span", { className: "sentinel" }), jsx("slot", {}), jsx("span", { className: "sentinel" })] })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("span", { className: "prev" }), jsx("span", { className: "next" }), jsxs("div", { className: "scroll", ...parseAndGetAriaAttributes(this.props.aria), tabIndex: this.props.isIndicatorPrevVisible || this.props.isIndicatorNextVisible ? 0 : null, children: [jsx("span", { className: "sentinel" }), jsx("slot", {}), jsx("span", { className: "sentinel" })] })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.mjs

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getTabsBarCss as getComponentCss$b } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getSanitizedActiveTabIndex } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getSanitizedActiveTabIndex, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PScroller } from '../components/scroller.wrapper.mjs';
 
 /**
@@ -24,7 +24,12 @@ class DSRTabsBar extends Component {
     render() {
         const { children} = splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$b(this.props.background, this.props.size, this.props.compact, getSanitizedActiveTabIndex(this.props.activeTabIndex, children)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(PScroller, { className: "scroller", compact: this.props.compact, ...(this.props.isTabList && { aria: { role: 'tablist' } }), children: [jsx("slot", {}), jsx("span", { className: "bar" })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(PScroller, { className: "scroller", compact: this.props.compact, ...(this.props.isTabList && {
+                                aria: {
+                                    role: 'tablist',
+                                    ...parseAndGetAriaAttributes(this.props.aria),
+                                },
+                            }), children: [jsx("slot", {}), jsx("span", { className: "bar" })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs.mjs

@@ -21,7 +21,7 @@ class DSRTabs extends Component {
             ? { ...child, props: { ...child.props, theme: this.props.theme, hidden: this.props.activeTabIndex !== i ? true : null } }
             : child);
         const style = minifyCss(getComponentCss$9());
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PTabsBar, { className: "root", size: this.props.size, background: this.props.background, compact: this.props.compact, activeTabIndex: this.props.activeTabIndex, children: otherChildren.map((tab, index) => (jsx("button", { type: "button", children: typeof tab === 'object' && 'props' in tab && tab.props.label }, index))) }), jsx("slot", {})] })] }), manipulatedChildren] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PTabsBar, { className: "root", size: this.props.size, background: this.props.background, compact: this.props.compact, activeTabIndex: this.props.activeTabIndex, aria: this.props.aria, children: otherChildren.map((tab, index) => (jsx("button", { type: "button", children: typeof tab === 'object' && 'props' in tab && tab.props.label }, index))) }), jsx("slot", {})] })] }), manipulatedChildren] }));
     }
 }
 

package/ssr/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/ssr/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/ssr/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/ssr/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",