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

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

@@ -84,6 +84,10 @@ Due to the nature of **Web Components** and **shadow DOM**, there are limitation
 | `aria-labelledby` | 🚫 |
 | `aria-describedby` | 🚫 |
 
+## 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-input-search/accessibility.md

@@ -0,0 +1,59 @@
+# p-input-search accessibility integration examples
+
+## Integration examples
+
+### Placeholder used as the only label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputSearch name="search" placeholder="Search"></PInputSearch>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputSearch name="search" label="Search vehicles" description="Search by model name or VIN."></PInputSearch>
+```
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputSearch name="search" label="Search vehicles" role="combobox" aria-expanded={false} aria-haspopup="listbox"></PInputSearch>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputSearch name="search" label="Search vehicles" aria={{'role': 'combobox', 'aria-expanded': 'false', 'aria-haspopup': 'listbox'}}></PInputSearch>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputSearch name="search" hideLabel={true}></PInputSearch>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputSearch name="search" hideLabel={true} label="Search vehicles"></PInputSearch>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputSearch name="search" label="Search vehicles" aria-invalid={true} message="Invalid"></PInputSearch>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputSearch name="search" label="Search vehicles" state="error" message="Enter at least 3 characters to search."></PInputSearch>
+```

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

@@ -119,6 +119,10 @@ Due to the nature of **Web Components** and **shadow DOM**, there are limitation
 | `aria-owns` | 🚫 |
 | `aria-activedescendant` | 🚫 |
 
+## 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-input-tel/accessibility.md

@@ -0,0 +1,45 @@
+# p-input-tel accessibility integration examples
+
+## Integration examples
+
+### Placeholder used as the only label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputTel name="phone" placeholder="Phone"></PInputTel>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputTel name="phone" label="Phone number" description="Include your country code, for example +49."></PInputTel>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputTel name="phone" hideLabel={true}></PInputTel>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputTel name="phone" hideLabel={true} label="Phone number"></PInputTel>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputTel name="phone" label="Phone number" aria-invalid={true} message="Invalid"></PInputTel>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputTel name="phone" label="Phone number" state="error" message="Enter a valid phone number including your country code."></PInputTel>
+```

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

@@ -84,6 +84,10 @@ Due to the nature of **Web Components** and **shadow DOM**, there are limitation
 | `aria-labelledby` | 🚫 |
 | `aria-describedby` | 🚫 |
 
+## 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-input-text/accessibility.md

@@ -0,0 +1,45 @@
+# p-input-text accessibility integration examples
+
+## Integration examples
+
+### Placeholder used as the only label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputText name="email" placeholder="Email"></PInputText>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputText name="email" label="Email address" description="We use this to send your confirmation."></PInputText>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputText name="reference" hideLabel={true}></PInputText>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputText name="reference" hideLabel={true} label="Order reference"></PInputText>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputText name="email" label="Email" aria-invalid={true} message="Invalid"></PInputText>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputText name="email" label="Email address" state="error" message="Enter a valid email address, for example name@example.com."></PInputText>
+```

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

@@ -88,6 +88,10 @@ Due to the nature of **Web Components** and **shadow DOM**, there are limitation
 | `aria-labelledby` | 🚫 |
 | `aria-describedby` | 🚫 |
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties
@@ -112,15 +116,15 @@ Due to the nature of **Web Components** and **shadow DOM**, there are limitation
 | `required` | `boolean` | `false` | Marks the field as required — form submission is blocked while this field is empty. |
 | `spellCheck` | `boolean` | `undefined` | Controls whether the browser's built-in spell-checking is enabled for this field. |
 | `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`). |
-| `value` | `string | number | null` | `''` | Sets the current text value of the input field. |
+| `value` | `string | number | null` | `''` | Sets the current text value. Numbers are accepted for programmatic assignment, but user input updates the value as a string. |
 
 ### Events
 
 | Event | Type | Description |
 | --- | --- | --- |
 | `blur` | `CustomEvent<InputTextBlurEventDetail>`<br>`Event` | Emitted when the input loses focus, regardless of whether the value changed. |
-| `change` | `CustomEvent<InputTextChangeEventDetail>`<br>`Event` | Emitted when the input loses focus after its value was changed. |
-| `input` | `CustomEvent<InputTextInputEventDetail>`<br>`InputEvent` | Emitted on every value change as the user types. |
+| `change` | `CustomEvent<InputTextChangeEventDetail>`<br>`Event` | Emitted when the input loses focus after its value was changed. The component value and native event target value are strings after user input. |
+| `input` | `CustomEvent<InputTextInputEventDetail>`<br>`InputEvent` | Emitted on every value change as the user types. The component value and native event target value are strings. |
 
 ### Slots
 

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

@@ -0,0 +1,45 @@
+# p-input-time accessibility integration examples
+
+## Integration examples
+
+### Placeholder used as the only label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputTime name="time" placeholder="Time"></PInputTime>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputTime name="time" label="Appointment time" description="Use 24-hour format, for example 14:30."></PInputTime>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputTime name="time" hideLabel={true}></PInputTime>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputTime name="time" hideLabel={true} label="Appointment time"></PInputTime>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputTime name="time" label="Appointment time" aria-invalid={true} message="Invalid"></PInputTime>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputTime name="time" label="Appointment time" state="error" message="Enter a valid appointment time."></PInputTime>
+```

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

@@ -85,6 +85,10 @@ Due to the nature of **Web Components** and **shadow DOM**, there are limitation
 | `aria-labelledby` | 🚫 |
 | `aria-describedby` | 🚫 |
 
+## 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-input-url/accessibility.md

@@ -0,0 +1,45 @@
+# p-input-url accessibility integration examples
+
+## Integration examples
+
+### Placeholder used as the only label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputUrl name="website" placeholder="https://"></PInputUrl>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputUrl name="website" label="Website URL" description="Include https:// at the beginning."></PInputUrl>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputUrl name="website" hideLabel={true}></PInputUrl>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputUrl name="website" hideLabel={true} label="Website URL"></PInputUrl>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputUrl name="website" label="Website URL" aria-invalid={true} message="Invalid"></PInputUrl>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputUrl name="website" label="Website URL" state="error" message="Enter a valid URL, for example https://www.porsche.com."></PInputUrl>
+```

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

@@ -84,6 +84,10 @@ Due to the nature of **Web Components** and **shadow DOM**, there are limitation
 | `aria-labelledby` | 🚫 |
 | `aria-describedby` | 🚫 |
 
+## 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-input-week/accessibility.md

@@ -0,0 +1,45 @@
+# p-input-week accessibility integration examples
+
+## Integration examples
+
+### Placeholder used as the only label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputWeek name="week" placeholder="Week"></PInputWeek>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputWeek name="week" label="Calendar week" description="Select the week for your test drive."></PInputWeek>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputWeek name="week" hideLabel={true}></PInputWeek>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputWeek name="week" hideLabel={true} label="Calendar week"></PInputWeek>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```tsx
+<PInputWeek name="week" label="Calendar week" aria-invalid={true} message="Required"></PInputWeek>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PInputWeek name="week" label="Calendar week" state="error" message="Select a calendar week to continue."></PInputWeek>
+```

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

@@ -83,6 +83,10 @@ Due to the nature of **Web Components** and **shadow DOM**, there are limitation
 | `aria-labelledby` | 🚫 |
 | `aria-describedby` | 🚫 |
 
+## 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-link/accessibility.md

@@ -0,0 +1,73 @@
+# p-link accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```tsx
+<PLink href="https://porsche.com" aria-label="Details of product XYZ">
+  Details
+</PLink>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PLink href="https://porsche.com" aria={{'aria-label': 'Details of product XYZ'}}>
+  Details
+</PLink>
+```
+
+### Icon-only link without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PLink icon="arrow-right" href="https://porsche.com"></PLink>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PLink icon="arrow-right" hideLabel={true} href="https://porsche.com">
+  Product details
+</PLink>
+```
+
+### Indicating the current page
+
+#### ❌ Anti-pattern
+
+```tsx
+<PLink href="/models/911" aria-current="page">
+  911
+</PLink>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PLink href="/models/911" aria={{'aria-current': 'page'}}>
+  911 Carrera
+</PLink>
+```
+
+### Vague link label without context
+
+#### ❌ Anti-pattern
+
+```tsx
+<PLink href="https://porsche.com">
+  Show
+</PLink>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PLink href="https://porsche.com" aria={{'aria-label': 'Show details of product XYZ'}}>
+  Show details
+</PLink>
+```

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

@@ -69,6 +69,10 @@ If the text of a link does not clearly indicate what the link's target is, add a
 - **Don't** add native `aria-*` attributes directly on the component host.
 - **Don't** rely on short generic link labels like "Show" or "Add" without context.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties
@@ -80,7 +84,7 @@ If the text of a link does not clearly indicate what the link's target is, add a
 | `download` | `string` | `undefined` | Sets the native `download` attribute to trigger a file download. Only applies when `href` is set. |
 | `hideLabel` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values. |
 | `href` | `string` | `undefined` | When set, the component renders as an anchor navigating to this URL. Otherwise, provide a slotted anchor element. |
-| `icon` | `'none'`<br>one of 290 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed next to the link label. Use `none` to show no icon. |
+| `icon` | `'none'`<br>one of 293 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed next to the link label. Use `none` to show no icon. |
 | `iconSource` | `string` | `undefined` | Sets a path to a custom SVG icon, used instead of the built-in icon set. |
 | `rel` | `string` | `undefined` | Sets the `rel` attribute on the link (e.g. `noopener`). Only applies when `href` is set. |
 | `target` | `'_self'` `'_blank'` `'_parent'` `'_top'` `'string'` | `'_self'` | Specifies where to open the linked URL (e.g. `_self`, `_blank`). Only applies when `href` is set. |

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

@@ -0,0 +1,73 @@
+# p-link-pure accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```tsx
+<PLinkPure href="https://porsche.com" aria-label="Details of product XYZ">
+  Details
+</PLinkPure>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PLinkPure href="https://porsche.com" aria={{'aria-label': 'Details of product XYZ'}}>
+  Details
+</PLinkPure>
+```
+
+### Icon-only link without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PLinkPure icon="arrow-right" href="https://porsche.com"></PLinkPure>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PLinkPure icon="arrow-right" hideLabel={true} href="https://porsche.com">
+  Product details
+</PLinkPure>
+```
+
+### Indicating the current page
+
+#### ❌ Anti-pattern
+
+```tsx
+<PLinkPure href="/models/911" aria-current="page">
+  911
+</PLinkPure>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PLinkPure href="/models/911" aria={{'aria-current': 'page'}}>
+  911 Carrera
+</PLinkPure>
+```
+
+### Vague link label without context
+
+#### ❌ Anti-pattern
+
+```tsx
+<PLinkPure href="https://porsche.com">
+  Show
+</PLinkPure>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PLinkPure href="https://porsche.com" aria={{'aria-label': 'Show details of product XYZ'}}>
+  Show details
+</PLinkPure>
+```

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

@@ -72,6 +72,10 @@ If the text of a link does not clearly indicate what the link's target is, add a
 - **Don't** add native `aria-*` attributes directly on the component host.
 - **Don't** rely on short generic link labels like "Show" or "Add" without context.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties
@@ -85,7 +89,7 @@ If the text of a link does not clearly indicate what the link's target is, add a
 | `download` | `string` | `undefined` | Sets the native `download` attribute to trigger a file download. Only applies when `href` is set. |
 | `hideLabel` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values. |
 | `href` | `string` | `undefined` | When set, the component renders as an anchor navigating to this URL. Otherwise, provide a slotted anchor element. |
-| `icon` | `''`<br>one of 290 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed next to the label. |
+| `icon` | `''`<br>one of 293 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed next to the label. |
 | `iconSource` | `string` | `undefined` | Sets a path to a custom SVG icon, used instead of the built-in icon set. |
 | `rel` | `string` | `undefined` | Sets the `rel` attribute on the link (e.g. `noopener`). Only applies when `href` is set. |
 | `size` | `'2xs'` `'xs'` `'sm'` `'md'` `'lg'` `'xl'` `'2xl'` `'3xl'` `'4xl'` `'5xl'` `'inherit'`<br>_deprecated:_ `'xx-small'` `'x-small'` `'small'` `'medium'` `'large'` `'x-large'`<br>`BreakpointCustomizable<LinkPureSize>` | `'sm'` | Sets the font size of the link label. Supports responsive breakpoint values. |

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

@@ -0,0 +1,31 @@
+# p-link-tile accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```tsx
+<PLinkTile label="Details" href="#" aria-label="Details of Porsche Taycan"></PLinkTile>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PLinkTile label="Details" href="#" aria={{'aria-label': 'Details of Porsche Taycan'}}></PLinkTile>
+```
+
+### Vague link label without context
+
+#### ❌ Anti-pattern
+
+```tsx
+<PLinkTile label="Details" href="#"></PLinkTile>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PLinkTile label="Porsche Taycan details" href="#"></PLinkTile>
+```

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

@@ -65,6 +65,10 @@ If the text of a link does not clearly indicate what the link's target is, add a
 - **Do** add `aria-label` on slotted `<video>` elements used as backgrounds.
 - **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