@porsche-design-system/components-react 4.6.0-rc.0 → 4.6.0-rc.2

package/skills/pds-knowledge-react/references/components/p-modal/accessibility.md

@@ -0,0 +1,80 @@
+# p-modal accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```tsx
+<PButton aria-haspopup="dialog">
+  Details of product XYZ
+</PButton>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PButton aria={{'aria-haspopup': 'dialog'}}>
+  Details of product XYZ
+</PButton>
+```
+
+### Dialog label on component host vs header slot
+
+#### ❌ Anti-pattern
+
+```tsx
+<PModal aria-label="Details">
+  ...
+</PModal>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PModal>
+  <PHeading slot="header" tag="h2" size="lg">
+    Details of product XYZ
+  </PHeading>
+  ...
+</PModal>
+
+{/* or with aria prop when no visible header is shown */}
+
+<PModal aria={{'aria-label': 'Details of product XYZ'}}>
+  ...
+</PModal>
+```
+
+### Modal trigger without popup semantics or context
+
+#### ❌ Anti-pattern
+
+```tsx
+<PButton>
+  Open
+</PButton>
+
+<PModal>
+  <PHeading slot="header" tag="h2" size="lg">
+    Details
+  </PHeading>
+  ...
+</PModal>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PButton aria={{'aria-haspopup': 'dialog'}}>
+  Details of product XYZ
+</PButton>
+
+<PModal>
+  <PHeading slot="header" tag="h2" size="lg">
+    Details of product XYZ
+  </PHeading>
+  ...
+</PModal>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-modal/p-modal.md

@@ -80,6 +80,10 @@ To inform users that the trigger button opens a `dialog`, the `aria-haspopup` at
 - **Don't** add raw host-level ARIA attributes as a workaround.
 - **Don't** use unclear trigger copy like "Open" when the destination is not obvious.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

package/skills/pds-knowledge-react/references/components/p-multi-select/accessibility.md

@@ -0,0 +1,78 @@
+# p-multi-select accessibility integration examples
+
+## Integration examples
+
+### Prompt option used instead of a label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PMultiSelect name="features">
+  <PMultiSelectOption value="">
+    Select features
+  </PMultiSelectOption>
+  <PMultiSelectOption value="sport">
+    Sport Chrono Package
+  </PMultiSelectOption>
+</PMultiSelect>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PMultiSelect label="Optional features" name="features" description="Select all features for your configuration.">
+  <PMultiSelectOption value="sport">
+    Sport Chrono Package
+  </PMultiSelectOption>
+  <PMultiSelectOption value="audio">
+    BOSE Surround Sound
+  </PMultiSelectOption>
+</PMultiSelect>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PMultiSelect name="features" hideLabel={true}>
+  <PMultiSelectOption value="sport">
+    Sport Chrono Package
+  </PMultiSelectOption>
+</PMultiSelect>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PMultiSelect label="Optional features" name="features" hideLabel={true}>
+  <PMultiSelectOption value="sport">
+    Sport Chrono Package
+  </PMultiSelectOption>
+</PMultiSelect>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```tsx
+<PMultiSelect label="Optional features" name="features" aria-invalid={true} message="Required">
+  <PMultiSelectOption value="sport">
+    Sport Chrono Package
+  </PMultiSelectOption>
+</PMultiSelect>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PMultiSelect label="Optional features" name="features" required={true} state="error" message="Select at least one feature to continue.">
+  <PMultiSelectOption value="sport">
+    Sport Chrono Package
+  </PMultiSelectOption>
+  <PMultiSelectOption value="audio">
+    BOSE Surround Sound
+  </PMultiSelectOption>
+</PMultiSelect>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-multi-select/examples/AsyncFilter.tsx

@@ -9,7 +9,7 @@ import {
   PMultiSelectOption,
   type PMultiSelectProps,
 } from '@porsche-design-system/components-react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
 const useDebounce = <T,>(callback: (value: T) => void, delay = 400) => {
   const timer = useRef<number | undefined>(undefined);
@@ -19,6 +19,20 @@ const useDebounce = <T,>(callback: (value: T) => void, delay = 400) => {
   };
 };
 
+const getFilterStatusMessage = (
+  searchValue: string,
+  optionCount: number,
+  isLoading: boolean,
+  error: string | null
+): string => {
+  if (error) return '';
+  if (isLoading) return 'Loading options';
+  const term = searchValue.trim();
+  if (!term) return '';
+  if (optionCount === 0) return 'No results found';
+  return optionCount === 1 ? '1 result available' : `${optionCount} results available`;
+};
+
 export const Example = () => {
   const [value, setValue] = useState<PMultiSelectProps['value']>([]);
   const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
@@ -83,6 +97,11 @@ export const Example = () => {
     }
   };
 
+  const filterStatusMessage = useMemo(
+    () => getFilterStatusMessage(searchValue, options.length, initialLoading || loading, error),
+    [searchValue, options.length, initialLoading, loading, error]
+  );
+
   return (
     <PMultiSelect name="async-search-select" label="Async Search" value={value} onChange={onChange} onToggle={onToggle}>
       <PInputSearch
@@ -100,6 +119,11 @@ export const Example = () => {
         onChange={(e: any) => e.stopPropagation()}
       />
 
+      {/* Persistent status announcer for assistive technologies (keep always in the DOM) */}
+      <div slot="options-status" className="sr-only" aria-live="polite" aria-atomic="true">
+        {filterStatusMessage}
+      </div>
+
       {/* Initial skeleton loading */}
       {initialLoading &&
         !error &&
@@ -112,15 +136,14 @@ export const Example = () => {
         </PMultiSelectOption>
       ))}
 
-      {/* No filter results */}
-      {!initialLoading && options.length === 0 && !error && (
+      {/* No filter results (visual only; announcements come from the live region) */}
+      {!initialLoading && !loading && options.length === 0 && !error && (
         <div
           slot="options-status"
           className="text-contrast-medium cursor-not-allowed py-static-sm px-[12px]"
-          role="alert"
+          aria-hidden="true"
         >
-          <span aria-hidden="true">–</span>
-          <span className="sr-only">No results found</span>
+          –
         </div>
       )}
 

package/{skill → skills/pds-knowledge-react}/references/components/p-multi-select/p-multi-select.md

@@ -4,7 +4,7 @@ The `p-multi-select` component is a versatile custom form element that facilitat
 
 Many of the properties closely resemble those found in the [select](../p-select/p-select.md) and other form components (e.g. `label`, `description`, `state`, `message`, `hideLabel`, `disabled`, `required` & `dropdownDirection`). The `p-multi-select` offers a search field by default. When the user types in a search string, the options are reduced by matching the options text.
 
-Options are slotted using the `p-multi-select-option` component. Each option needs to have an assigned value, which can be passed via an attribute or property and needs to be of type string. Initial selection states can only be achieved using the value property on the `p-multi-select` component ([More Info](./p-multi-select.md)). Options don't have a selected attribute or property. If an option should be visible but not selectable, it can be disabled by using the `disabled` attribute.
+Options are slotted using the `p-multi-select-option` component. Each option needs to have an assigned value, which can be passed via an attribute or property and needs to be a string or number. `null` and `undefined` are not valid option values. Initial selection states can only be achieved using the value property on the `p-multi-select` component ([More Info](./p-multi-select.md)). Options don't have a selected attribute or property. If an option should be visible but not selectable, it can be disabled by using the `disabled` attribute.
 
 **Hint:** The `p-multi-select` utilizes the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) to render its dropdown on the `#top-layer` which enables it to be shown correctly even when used e.g. within a scroll container.
 
@@ -85,6 +85,10 @@ In general, avoid using the `disabled` state. Disabled elements are no longer fo
 - **Don't** use a prompt option or adjacent text as a substitute for a field label.
 - **Don't** use `hide-label` without an accessible name.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties
@@ -142,7 +146,7 @@ Allowed parents: `p-multi-select`, `p-optgroup`.
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `disabled` | `boolean` | `false` | Disables the option, preventing it from being selected. |
-| `value` _(required)_ | `string | number` | `undefined` | Sets the value submitted with the form data when this option is selected in the parent multi-select. |
+| `value` _(required)_ | `string | number` | `undefined` | Sets the required option value submitted with the form data when selected. Must be a string or number. |
 
 #### Slots
 

package/skills/pds-knowledge-react/references/components/p-pagination/accessibility.md

@@ -0,0 +1,23 @@
+# p-pagination accessibility integration examples
+
+## Integration examples
+
+### Default English labels on a localized page
+
+#### ❌ Anti-pattern
+
+```tsx
+<html lang="de_DE">
+  ...
+  <PPagination totalItemsCount={120} itemsPerPage={10} activePage={1}></PPagination>
+</html>
+```
+
+#### ✅ Recommended
+
+```tsx
+<html lang="de_DE">
+  ...
+  <PPagination totalItemsCount={120} itemsPerPage={10} activePage={1} intl={{'root': 'Seitennavigation', 'prev': 'Vorherige Seite', 'next': 'Nächste Seite', 'page': 'Seite'}}></PPagination>
+</html>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-pagination/p-pagination.md

@@ -54,6 +54,10 @@ To adapt the pagination to the specific viewport context, the amount of displaye
 - **Do** keep prev/next and page button labels specific enough to identify the pagination control.
 - **Don't** rely on default English `intl` strings on localized pages.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

package/skills/pds-knowledge-react/references/components/p-pin-code/accessibility.md

@@ -0,0 +1,45 @@
+# p-pin-code accessibility integration examples
+
+## Integration examples
+
+### Missing field label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PPinCode name="verification" length={6}></PPinCode>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PPinCode name="verification" length={6} label="Verification code" description="Enter the 6-digit code from your email."></PPinCode>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PPinCode name="verification" length={6} hideLabel={true}></PPinCode>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PPinCode name="verification" length={6} hideLabel={true} label="Verification code"></PPinCode>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```tsx
+<PPinCode name="verification" label="Verification code" aria-invalid={true} message="Invalid"></PPinCode>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PPinCode name="verification" length={6} label="Verification code" state="error" message="Enter the complete 6-digit verification code."></PPinCode>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-pin-code/p-pin-code.md

@@ -58,6 +58,10 @@ In general, avoid using the `disabled="true"` state. Disabled elements are no lo
 - **Do** use the component state/message API so validation and status changes are announced.
 - **Don't** use `hide-label` without an accessible name.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties
@@ -77,14 +81,14 @@ In general, avoid using the `disabled="true"` state. Disabled elements are no lo
 | `required` | `boolean` | `false` | Marks the pin code as required so the form cannot be submitted until all fields are filled. |
 | `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state of the pin code, which controls its visual appearance and feedback message style (`none`, `success`, `error`). |
 | `type` | `'number'` `'password'` | `'number'` | Controls whether the individual input fields mask their content as password dots (`password`) or show digits (`number`). |
-| `value` | `string` | `''` | Sets the current concatenated value of all pin code fields and allows setting the initial value. |
+| `value` | `string | number | null` | `''` | Sets the current concatenated value. Numbers are accepted for programmatic assignment, but user input updates the value as a string. |
 
 ### Events
 
 | Event | Type | Description |
 | --- | --- | --- |
 | `blur` | `CustomEvent<void>` | Emitted when the pin code component loses focus after the user finishes entering characters. |
-| `change` | `CustomEvent<PinCodeChangeEventDetail>`<br>`{ value: string; isComplete: boolean }` | Emitted when the pin code value changes as the user types, carrying the new concatenated value in the event detail. |
+| `change` | `CustomEvent<PinCodeChangeEventDetail>`<br>`{ value: string; isComplete: boolean }` | Emitted when the pin code value changes as the user types, carrying `{ value: string; isComplete: boolean }` in the event detail. |
 
 ### Controlled properties
 

package/skills/pds-knowledge-react/references/components/p-popover/accessibility.md

@@ -0,0 +1,61 @@
+# p-popover accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```tsx
+<PPopover aria-label="Specification details" description="Additional specification details."></PPopover>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PPopover aria={{'aria-label': 'Specification details'}} description="Additional specification details."></PPopover>
+```
+
+### Custom slotted trigger without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PPopover>
+  <button slot="button" type="button"></button>
+  Additional specification details.
+</PPopover>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PPopover description="Additional specification details."></PPopover>
+
+{/* or provide an accessible name on a custom slotted button */}
+
+<PPopover>
+  <button slot="button" type="button" ariaLabel="Specification details">
+    i
+  </button>
+  Additional specification details.
+</PPopover>
+```
+
+### Custom slotted trigger without aria-expanded
+
+#### ❌ Anti-pattern
+
+```tsx
+<PPopover>
+  <button slot="button" type="button"></button>
+</PPopover>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PPopover>
+  <button slot="button" type="button" ariaExpanded="false"></button>
+</PPopover>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-popover/p-popover.md

@@ -65,6 +65,10 @@ In **controlled** mode the consumer owns the `open` state, so the slotted trigge
 - **Don't** use an unnamed custom slotted trigger button.
 - **Don't** add native `aria-*` attributes directly on the component host.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

package/skills/pds-knowledge-react/references/components/p-radio-group/accessibility.md

@@ -0,0 +1,63 @@
+# p-radio-group accessibility integration examples
+
+## Integration examples
+
+### Missing group label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PRadioGroup name="fuel">
+  <PRadioGroupOption value="electric" label="Electric"></PRadioGroupOption>
+  <PRadioGroupOption value="hybrid" label="Hybrid"></PRadioGroupOption>
+</PRadioGroup>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PRadioGroup label="Powertrain" name="fuel" description="Select your preferred powertrain.">
+  <PRadioGroupOption value="electric" label="Electric"></PRadioGroupOption>
+  <PRadioGroupOption value="hybrid" label="Hybrid"></PRadioGroupOption>
+</PRadioGroup>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PRadioGroup name="fuel" hideLabel={true}>
+  <PRadioGroupOption value="electric" label="Electric"></PRadioGroupOption>
+  <PRadioGroupOption value="hybrid" label="Hybrid"></PRadioGroupOption>
+</PRadioGroup>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PRadioGroup label="Powertrain" name="fuel" hideLabel={true}>
+  <PRadioGroupOption value="electric" label="Electric"></PRadioGroupOption>
+  <PRadioGroupOption value="hybrid" label="Hybrid"></PRadioGroupOption>
+</PRadioGroup>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```tsx
+<PRadioGroup label="Powertrain" name="fuel" aria-invalid={true} message="Required">
+  <PRadioGroupOption value="electric" label="Electric"></PRadioGroupOption>
+  <PRadioGroupOption value="hybrid" label="Hybrid"></PRadioGroupOption>
+</PRadioGroup>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PRadioGroup label="Powertrain" name="fuel" required={true} state="error" message="Select a powertrain to continue.">
+  <PRadioGroupOption value="electric" label="Electric"></PRadioGroupOption>
+  <PRadioGroupOption value="hybrid" label="Hybrid"></PRadioGroupOption>
+</PRadioGroup>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-radio-group/examples/Form.tsx

@@ -10,7 +10,7 @@ import {
 import { FormEvent, useState } from 'react';
 
 export const Example = () => {
-  const [form, setForm] = useState({ myRadioGroup: '' });
+  const [form, setForm] = useState<{ myRadioGroup: PRadioGroupProps['value'] }>({ myRadioGroup: null });
   const [lastSubmittedData, setLastSubmittedData] = useState<any>();
 
   const onChange = (e: CustomEvent<RadioGroupChangeEventDetail>) => {
@@ -28,7 +28,7 @@ export const Example = () => {
 
   const onReset = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setForm({ myRadioGroup: '' });
+    setForm({ myRadioGroup: null });
   };
 
   return (

package/{skill → skills/pds-knowledge-react}/references/components/p-radio-group/p-radio-group.md

@@ -6,7 +6,7 @@ The `p-radio-group` component is a versatile custom form element that enables th
 >
 > The `blur` event is emitted whenever the focused `p-radio-group-option` changes — not only when the entire `p-radio-group` loses focus. This means that switching between options within the same group will also trigger a `blur` event for the previously focused option.
 
-Options are slotted using the `p-radio-group-option` component. Each option needs to have an assigned value, which can be passed via an attribute or property and needs to be of type string. Initial selection states can only be achieved using the value property on the `p-radio-group` component. If an option should be visible but not selectable, it can be disabled by using the `disabled` attribute.
+Options are slotted using the `p-radio-group-option` component. Each option needs an assigned `string` or `number` value. The `p-radio-group` value matches an option strictly by type and value, so a number does not match the equivalent string. `undefined` and `null` are reserved for the radio group's unselected state and are not valid option values. Initial selection states can only be achieved using the `value` property on the `p-radio-group` component. If an option should be visible but not selectable, it can be disabled using the `disabled` attribute.
 
 A `label` is a caption which informs the user what information a particular form field is asking for. The `p-radio-group` component can be used with or without a label, but it's recommended to keep the label visible for better accessibility whenever possible. When used without a label, it's best practice to provide a descriptive label text for screen readers.
 
@@ -70,6 +70,10 @@ In general, avoid using the `disabled` state. Disabled elements are no longer fo
 - **Don't** rely on adjacent text instead of the group `label` prop.
 - **Don't** use `hide-label` without an accessible name.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## Tests
 
 ### Automated
@@ -105,7 +109,7 @@ In general, avoid using the `disabled` state. Disabled elements are no longer fo
 | `name` _(required)_ | `string` | `undefined` | Sets the shared name attribute for all radio buttons in the group, grouping them for mutually exclusive selection. |
 | `required` | `boolean` | `false` | Marks the radio group as required so the form cannot be submitted until one option is selected. |
 | `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state of the radio group, controlling its visual appearance and feedback message style (`none`, `success`, `error`). |
-| `value` | `string` | `''` | Sets the currently selected value that pre-selects the matching radio option and reflects user changes. |
+| `value` | `string | number | null` | `undefined` | Sets the currently selected value that pre-selects the matching radio option and reflects user changes. Matches an option strictly by type and value, meaning string or number only match an option whose value has the same type and equal value. Use undefined or null for no preselection; these values never match an option because every option requires a string or number value. Please note that FormData always serializes values as strings, so when participating in a native (uncontrolled) form a number value is restored as string via formStateRestoreCallback and will no longer strictly match a number-typed option. This limitation only applies to native form state restoration; in controlled forms (where the consumer manages value directly via the change event), the number type is preserved end-to-end. |
 
 ### Events
 
@@ -139,7 +143,7 @@ Allowed parent: `p-radio-group`.
 | `disabled` | `boolean` | `false` | Prevents this option from being selected and excludes its value from form submissions while it is disabled. |
 | `label` | `string` | `undefined` | Sets the visible label text displayed next to the radio button that the user reads to identify the option. |
 | `loading` _(experimental)_ | `boolean` | `false` | @experimental Disables this option and shows a spinner to indicate that this particular option is in a loading state. |
-| `value` | `string` | `undefined` | Sets the value submitted with the form data when this radio option is selected within its parent group. |
+| `value` _(required)_ | `string | number` | `undefined` | Sets the required option value. Must be a string or number and is selected when it strictly matches the parent `p-radio-group` value by type and value. |
 
 #### Slots
 

package/skills/pds-knowledge-react/references/components/p-scroller/accessibility.md

@@ -0,0 +1,31 @@
+# p-scroller accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```tsx
+<PScroller aria-label="Section tags" aria-description="Section tags for the section overview">
+  <PTag>
+    Overview
+  </PTag>
+  <PTag>
+    Equipment
+  </PTag>
+</PScroller>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PScroller aria={{'aria-label': 'Section tags', 'aria-description': 'Section tags for the section overview'}}>
+  <PTag>
+    Overview
+  </PTag>
+  <PTag>
+    Equipment
+  </PTag>
+</PScroller>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-scroller/p-scroller.md

@@ -57,6 +57,10 @@ If the `p-scroller` component is accessed by keyboard navigation and is focused,
 - **Do** pass `aria-label` and `aria-description` via the `aria` prop, not as host attributes.
 - **Don't** add native `aria-*` attributes directly on the component host.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties