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

package/skills/pds-knowledge-angular/references/components/p-carousel/accessibility.md

@@ -0,0 +1,61 @@
+# p-carousel accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```html
+<p-carousel aria-label="Slider">
+  <!-- slides -->
+</p-carousel>
+```
+
+#### ✅ Recommended
+
+```html
+<p-carousel [aria]="{'aria-label': 'Featured Porsche models'}">
+  <!-- slides -->
+</p-carousel>
+```
+
+### Carousel without skip path for keyboard users
+
+#### ❌ Anti-pattern
+
+```html
+<p-carousel>
+  <!-- many slides (>6 items) -->
+</p-carousel>
+```
+
+#### ✅ Recommended
+
+```html
+<p-carousel skipLinkTarget="#after-carousel" [aria]="{'aria-label': 'Highlights'}">
+  <!-- many slides (>6 items) -->
+</p-carousel>
+
+<p-heading tag="h2" id="after-carousel">
+  Next section
+</p-heading>
+```
+
+### Vague carousel label
+
+#### ❌ Anti-pattern
+
+```html
+<p-carousel [aria]="{'aria-label': 'Slider'}">
+  <!-- slides -->
+</p-carousel>
+```
+
+#### ✅ Recommended
+
+```html
+<p-carousel [aria]="{'aria-label': 'Featured Porsche models'}">
+  <!-- slides -->
+</p-carousel>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-carousel/p-carousel.md

@@ -59,7 +59,7 @@ Therefore, the `p-carousel`'s content has to be divided into multiple parts or s
 | `aria-labelledby="IDREF"` | References the accessible name. |
 | `aria-roledescription="carousel"` | Specifies the role as "carousel". |
 | `aria-roledescription="slide"` | Specifies the role of the carousel item as "slide". |
-| `aria-live="polite"` | Announces current active slide item. |
+| `aria-live="polite"` | Announces page position after control-driven movement (prev/next, pagination, drag), e.g. "2 of 8" via `intl.slideLabel`. Not announced when navigating by focusing slides. |
 
 ## Development considerations
 
@@ -78,6 +78,10 @@ Through the `skipLinkTarget` property, a skip link for keyboard users can be pro
 - **Don't** force keyboard users to tab through every slide control when a skip path is needed.
 - **Don't** use vague labels that do not communicate carousel context.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

package/skills/pds-knowledge-angular/references/components/p-checkbox/accessibility.md

@@ -0,0 +1,31 @@
+# p-checkbox accessibility integration examples
+
+## Integration examples
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-checkbox name="terms" [hideLabel]="true"></p-checkbox>
+```
+
+#### ✅ Recommended
+
+```html
+<p-checkbox name="terms" [hideLabel]="true" label="I accept the terms and conditions"></p-checkbox>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```html
+<p-checkbox name="terms" label="I accept the terms and conditions" [aria-invalid]="true" message="Required"></p-checkbox>
+```
+
+#### ✅ Recommended
+
+```html
+<p-checkbox name="terms" label="I accept the terms and conditions" [required]="true" state="error" message="Accept the terms and conditions to continue."></p-checkbox>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-checkbox/p-checkbox.md

@@ -68,6 +68,10 @@ In general, avoid using the `disabled` state. Disabled elements are no longer fo
 - **Don't** use `hide-label` without an accessible name.
 - **Don't** use `hide-label` when it is not clear what the checkbox controls.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

package/skills/pds-knowledge-angular/references/components/p-crest/accessibility.md

@@ -0,0 +1,17 @@
+# p-crest accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```html
+<p-crest href="/" aria-label="Porsche home"></p-crest>
+```
+
+#### ✅ Recommended
+
+```html
+<p-crest href="/" [aria]="{'aria-label': 'Porsche home'}"></p-crest>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-crest/p-crest.md

@@ -46,6 +46,10 @@ You can use native `click`, `focus`, `focusin`, `blur` and `focusout` events on
 - **Do** provide a descriptive `aria-label` for linked crests, for example "Porsche home".
 - **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-angular/references/components/p-divider/accessibility.md

@@ -0,0 +1,41 @@
+# p-divider accessibility integration examples
+
+## Integration examples
+
+### Divider as the only section separator
+
+#### ❌ Anti-pattern
+
+```html
+<p-text>
+  Delivery details
+</p-text>
+
+<p-divider></p-divider>
+
+<p-text>
+  Payment details
+</p-text>
+```
+
+#### ✅ Recommended
+
+```html
+<p-heading tag="h2" size="md">
+  Delivery details
+</p-heading>
+
+<p-text>
+  ...
+</p-text>
+
+<p-divider></p-divider>
+
+<p-heading tag="h2" size="md">
+  Payment details
+</p-heading>
+
+<p-text>
+  ...
+</p-text>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-divider/p-divider.md

@@ -31,6 +31,10 @@ A divider is visual separation only. Use headings, landmarks, or section structu
 - **Do** pair dividers with headings or landmarks that describe the sections they separate.
 - **Don't** rely on a divider alone to communicate a new major section.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

package/skills/pds-knowledge-angular/references/components/p-drilldown/accessibility.md

@@ -0,0 +1,65 @@
+# p-drilldown accessibility integration examples
+
+## Integration examples
+
+### ARIA on trigger button host vs aria prop
+
+#### ❌ Anti-pattern
+
+```html
+<p-button aria-haspopup="dialog">
+  Menu
+</p-button>
+```
+
+#### ✅ Recommended
+
+```html
+<p-button [aria]="{'aria-haspopup': 'dialog'}">
+  Vehicle menu
+</p-button>
+```
+
+### Drilldown label on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```html
+<p-drilldown [open]="true" aria-label="Navigation">
+  ...
+</p-drilldown>
+```
+
+#### ✅ Recommended
+
+```html
+<p-drilldown [open]="true" [aria]="{'aria-label': 'Vehicle navigation'}">
+  ...
+</p-drilldown>
+```
+
+### Trigger without popup semantics or context
+
+#### ❌ Anti-pattern
+
+```html
+<p-button>
+  Menu
+</p-button>
+
+<p-drilldown>
+  ...
+</p-drilldown>
+```
+
+#### ✅ Recommended
+
+```html
+<p-button [aria]="{'aria-haspopup': 'dialog'}">
+  Vehicle menu
+</p-button>
+
+<p-drilldown [aria]="{'aria-label': 'Vehicle navigation'}">
+  ...
+</p-drilldown>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-drilldown/p-drilldown.md

@@ -74,6 +74,10 @@ To inform users that the trigger button opens a `dialog`, the `aria-haspopup` at
 - **Do** provide a meaningful dialog label through the drilldown `aria` prop when needed.
 - **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-angular/references/components/p-fieldset/accessibility.md

@@ -0,0 +1,37 @@
+# p-fieldset accessibility integration examples
+
+## Integration examples
+
+### Unlabeled field group
+
+#### ❌ Anti-pattern
+
+```html
+<p-fieldset>
+  <p-input-text name="street" label="Street"></p-input-text>
+  <p-input-text name="city" label="City"></p-input-text>
+</p-fieldset>
+```
+
+#### ✅ Recommended
+
+```html
+<p-fieldset label="Delivery address">
+  <p-input-text name="street" label="Street"></p-input-text>
+  <p-input-text name="city" label="City"></p-input-text>
+</p-fieldset>
+```
+
+### Error state without recovery guidance
+
+#### ❌ Anti-pattern
+
+```html
+<p-fieldset label="Delivery address" state="error" message="Invalid"></p-fieldset>
+```
+
+#### ✅ Recommended
+
+```html
+<p-fieldset label="Delivery address" [required]="true" state="error" message="Complete all required address fields to continue."></p-fieldset>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-fieldset/p-fieldset.md

@@ -57,6 +57,10 @@ The `p-fieldset` is a grouping component for wrapping contextual associated form
 - **Do** use `aria="{ 'role': 'radiogroup' }"` only when the fieldset contains custom radio controls.
 - **Don't** set `state="error"` without a descriptive `message`.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

package/skills/pds-knowledge-angular/references/components/p-flag/accessibility.md

@@ -0,0 +1,39 @@
+# p-flag accessibility integration examples
+
+## Integration examples
+
+### Informative flag without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-flag name="germany"></p-flag>
+```
+
+#### ✅ Recommended
+
+```html
+<p-flag name="germany" [aria]="{'aria-label': 'Germany'}"></p-flag>
+```
+
+### Decorative flag with redundant label
+
+#### ❌ Anti-pattern
+
+```html
+<p-flag name="germany" [aria]="{'aria-label': 'Germany'}"></p-flag>
+
+<p-text>
+  Germany
+</p-text>
+```
+
+#### ✅ Recommended
+
+```html
+<p-flag name="germany" [ariaHidden]="true"></p-flag>
+
+<p-text>
+  Germany
+</p-text>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-flag/p-flag.md

@@ -42,6 +42,10 @@ The following guidelines provide instructions for designers and developers on th
 - **Do** hide decorative flags from assistive technologies when adjacent text already names the country or region.
 - **Don't** leave informative flags without an accessible name.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

package/skills/pds-knowledge-angular/references/components/p-flyout/accessibility.md

@@ -0,0 +1,80 @@
+# p-flyout accessibility integration examples
+
+## Integration examples
+
+### ARIA on trigger button host vs aria prop
+
+#### ❌ Anti-pattern
+
+```html
+<p-button aria-haspopup="dialog">
+  Open dialog
+</p-button>
+```
+
+#### ✅ Recommended
+
+```html
+<p-button [aria]="{'aria-haspopup': 'dialog'}">
+  Open dialog
+</p-button>
+```
+
+### Dialog label on component host vs header slot
+
+#### ❌ Anti-pattern
+
+```html
+<p-flyout aria-label="Navigation">
+  ...
+</p-flyout>
+```
+
+#### ✅ Recommended
+
+```html
+<p-flyout>
+  <p-heading slot="header" tag="h2" size="lg">
+    Main navigation
+  </p-heading>
+  ...
+</p-flyout>
+
+<!-- or with aria prop when no visible header is shown -->
+
+<p-flyout [aria]="{'aria-label': 'Main navigation'}">
+  ...
+</p-flyout>
+```
+
+### Flyout trigger without popup semantics
+
+#### ❌ Anti-pattern
+
+```html
+<p-button>
+  Open dialog
+</p-button>
+
+<p-flyout>
+  <p-heading slot="header" tag="h2" size="lg">
+    Dialog heading
+  </p-heading>
+  ...
+</p-flyout>
+```
+
+#### ✅ Recommended
+
+```html
+<p-button [aria]="{'aria-haspopup': 'dialog'}">
+  Open dialog
+</p-button>
+
+<p-flyout>
+  <p-heading slot="header" tag="h2" size="lg">
+    Dialog heading
+  </p-heading>
+  ...
+</p-flyout>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-flyout/p-flyout.md

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

package/skills/pds-knowledge-angular/references/components/p-heading/accessibility.md

@@ -0,0 +1,29 @@
+# p-heading accessibility integration examples
+
+## Integration examples
+
+### Skipped heading level
+
+#### ❌ Anti-pattern
+
+```html
+<p-heading tag="h1" size="xl">
+  Configure your Porsche
+</p-heading>
+
+<p-heading tag="h4" size="md">
+  Delivery options
+</p-heading>
+```
+
+#### ✅ Recommended
+
+```html
+<p-heading tag="h1" size="xl">
+  Configure your Porsche
+</p-heading>
+
+<p-heading tag="h2" size="md">
+  Delivery options
+</p-heading>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-heading/p-heading.md

@@ -49,6 +49,10 @@ While using the `Heading` component, take care of the correct heading hierarchy
 - **Don't** choose a heading level based on appearance alone.
 - **Don't** skip heading levels when nesting sections.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

package/skills/pds-knowledge-angular/references/components/p-icon/accessibility.md

@@ -0,0 +1,39 @@
+# p-icon accessibility integration examples
+
+## Integration examples
+
+### Meaningful icon without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-icon name="warning"></p-icon>
+```
+
+#### ✅ Recommended
+
+```html
+<p-icon name="warning" [aria]="{'aria-label': 'Warning'}"></p-icon>
+```
+
+### Decorative icon with redundant label
+
+#### ❌ Anti-pattern
+
+```html
+<p-icon name="phone" [aria]="{'aria-label': 'Phone'}"></p-icon>
+
+<p-text>
+  +49 711 911 0
+</p-text>
+```
+
+#### ✅ Recommended
+
+```html
+<p-icon [ariaHidden]="true" name="phone"></p-icon>
+
+<p-text>
+  +49 711 911 0
+</p-text>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-icon/examples/Overview.ts

@@ -166,6 +166,8 @@ import { PorscheDesignSystemModule } from '@porsche-design-system/components-ang
 
       <p-icon name="configurate" [aria]="{'aria-label': 'Configurate icon'}"></p-icon>
 
+      <p-icon name="connect-services" [aria]="{'aria-label': 'Connect Services icon'}"></p-icon>
+
       <p-icon name="copy" [aria]="{'aria-label': 'Copy icon'}"></p-icon>
 
       <p-icon name="country-road" [aria]="{'aria-label': 'Country Road icon'}"></p-icon>
@@ -174,6 +176,8 @@ import { PorscheDesignSystemModule } from '@porsche-design-system/components-ang
 
       <p-icon name="cubic-capacity" [aria]="{'aria-label': 'Cubic Capacity icon'}"></p-icon>
 
+      <p-icon name="customer-support" [aria]="{'aria-label': 'Customer Support icon'}"></p-icon>
+
       <p-icon name="cut" [aria]="{'aria-label': 'Cut icon'}"></p-icon>
 
       <p-icon name="delete" [aria]="{'aria-label': 'Delete icon'}"></p-icon>
@@ -492,6 +496,8 @@ import { PorscheDesignSystemModule } from '@porsche-design-system/components-ang
 
       <p-icon name="shopping-cart-filled" [aria]="{'aria-label': 'Shopping Cart Filled icon'}"></p-icon>
 
+      <p-icon name="shopping-cart-off" [aria]="{'aria-label': 'Shopping Cart Off icon'}"></p-icon>
+
       <p-icon name="sidebar" [aria]="{'aria-label': 'Sidebar icon'}"></p-icon>
 
       <p-icon name="sidelights" [aria]="{'aria-label': 'Sidelights icon'}"></p-icon>

package/{skill → skills/pds-knowledge-angular}/references/components/p-icon/p-icon.md

@@ -39,6 +39,10 @@ Sometimes icons are used purely for **decorative purposes** and do not convey an
 - **Do** hide decorative icons from assistive technologies when adjacent text provides the meaning.
 - **Don't** add redundant `aria-label` to decorative icons beside visible text.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## Tests
 
 ### Automated
@@ -63,7 +67,7 @@ Sometimes icons are used purely for **decorative purposes** and do not convey an
 | --- | --- | --- | --- |
 | `aria` | `IconAriaAttribute` | `undefined` | Sets ARIA attributes on the icon — use `aria-label` to make the icon meaningful to screen readers when it conveys information. |
 | `color` | `'primary'` `'contrast-higher'` `'contrast-high'` `'contrast-medium'` `'contrast-low'` `'contrast-lower'` `'success'` `'warning'` `'error'` `'info'` `'inherit'` | `'primary'` | Sets the fill color of the icon using PDS color tokens. |
-| `name` | one of 290 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Selects an icon from the built-in PDS icon library by name (e.g. `arrow-right`, `close`). |
+| `name` | one of 293 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Selects an icon from the built-in PDS icon library by name (e.g. `arrow-right`, `close`). |
 | `size` | `'2xs'` `'xs'` `'sm'` `'md'` `'lg'` `'xl'` `'2xl'` `'3xl'` `'4xl'` `'5xl'` `'inherit'`<br>_deprecated:_ `'xx-small'` `'x-small'` `'small'` `'medium'` `'large'` `'x-large'` `'xx-large'`<br>`BreakpointCustomizable<IconSize>` | `'sm'` | Sets the icon size using the PDS typographic scale. Use `inherit` to derive size from the parent element. Supports responsive breakpoint values. |
 | `source` | `string` | `undefined` | Sets a path to a custom SVG icon, used instead of the built-in icon library. |
 

package/skills/pds-knowledge-angular/references/components/p-inline-notification/accessibility.md

@@ -0,0 +1,38 @@
+# p-inline-notification accessibility integration examples
+
+## Integration examples
+
+### Notification mounted only when needed
+
+#### ❌ Anti-pattern
+
+```html
+@if (hasWarning) {
+  <p-inline-notification state="warning" description="Warning"></p-inline-notification>
+}
+```
+
+#### ✅ Recommended
+
+```html
+<p-inline-notification
+  id="account-warning"
+  state="warning"
+  heading="Verify your email address"
+  description="Confirm your email to receive order updates."
+></p-inline-notification>
+```
+
+### Warning without descriptive heading
+
+#### ❌ Anti-pattern
+
+```html
+<p-inline-notification state="warning" description="Something went wrong"></p-inline-notification>
+```
+
+#### ✅ Recommended
+
+```html
+<p-inline-notification state="warning" heading="Delivery date unavailable" description="Choose another date or contact your Porsche Centre."></p-inline-notification>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-inline-notification/p-inline-notification.md

@@ -36,13 +36,17 @@ The `Inline Notification` component uses `role="status"` and `role="alert"` to a
 - **Do** use `state="warning"` or `state="error"` with descriptive content for urgent issues.
 - **Don't** conditionally mount the component only when an alert should be announced.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `actionIcon` | `''`<br>one of 290 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed inside the action button using a PDS icon name. |
+| `actionIcon` | `''`<br>one of 293 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed inside the action button using a PDS icon name. |
 | `actionLabel` | `string` | `undefined` | Sets the label text of the optional action button inside the notification. |
 | `actionLoading` | `boolean` | `false` | Disables the action button and shows a spinner to indicate an ongoing operation. |
 | `description` | `string` | `''` | Sets the supporting description text shown below the heading. |