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

package/{skill → skills/pds-knowledge-angular}/references/components/p-input-number/p-input-number.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-angular/references/components/p-input-password/accessibility.md

@@ -0,0 +1,45 @@
+# p-input-password accessibility integration examples
+
+## Integration examples
+
+### Placeholder used as the only label
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-password name="password" placeholder="Password"></p-input-password>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-password name="password" label="Password" description="Use at least 8 characters with one number."></p-input-password>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-password name="password" [hideLabel]="true"></p-input-password>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-password name="password" [hideLabel]="true" label="Password"></p-input-password>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-password name="password" label="Password" [aria-invalid]="true" message="Invalid"></p-input-password>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-password name="password" label="Password" state="error" message="Enter a password with at least 8 characters and one number."></p-input-password>
+```

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

@@ -80,6 +80,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-angular/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
+
+```html
+<p-input-search name="search" placeholder="Search"></p-input-search>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-search name="search" label="Search vehicles" description="Search by model name or VIN."></p-input-search>
+```
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-search name="search" label="Search vehicles" role="combobox" [aria-expanded]="false" aria-haspopup="listbox"></p-input-search>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-search name="search" label="Search vehicles" [aria]="{'role': 'combobox', 'aria-expanded': 'false', 'aria-haspopup': 'listbox'}"></p-input-search>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-search name="search" [hideLabel]="true"></p-input-search>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-search name="search" [hideLabel]="true" label="Search vehicles"></p-input-search>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-search name="search" label="Search vehicles" [aria-invalid]="true" message="Invalid"></p-input-search>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-search name="search" label="Search vehicles" state="error" message="Enter at least 3 characters to search."></p-input-search>
+```

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

@@ -115,6 +115,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-angular/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
+
+```html
+<p-input-tel name="phone" placeholder="Phone"></p-input-tel>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-tel name="phone" label="Phone number" description="Include your country code, for example +49."></p-input-tel>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-tel name="phone" [hideLabel]="true"></p-input-tel>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-tel name="phone" [hideLabel]="true" label="Phone number"></p-input-tel>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-tel name="phone" label="Phone number" [aria-invalid]="true" message="Invalid"></p-input-tel>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-tel name="phone" label="Phone number" state="error" message="Enter a valid phone number including your country code."></p-input-tel>
+```

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

@@ -80,6 +80,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-angular/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
+
+```html
+<p-input-text name="email" placeholder="Email"></p-input-text>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-text name="email" label="Email address" description="We use this to send your confirmation."></p-input-text>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-text name="reference" [hideLabel]="true"></p-input-text>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-text name="reference" [hideLabel]="true" label="Order reference"></p-input-text>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-text name="email" label="Email" [aria-invalid]="true" message="Invalid"></p-input-text>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-text name="email" label="Email address" state="error" message="Enter a valid email address, for example name@example.com."></p-input-text>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-input-text/p-input-text.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-angular/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
+
+```html
+<p-input-time name="time" placeholder="Time"></p-input-time>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-time name="time" label="Appointment time" description="Use 24-hour format, for example 14:30."></p-input-time>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-time name="time" [hideLabel]="true"></p-input-time>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-time name="time" [hideLabel]="true" label="Appointment time"></p-input-time>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-time name="time" label="Appointment time" [aria-invalid]="true" message="Invalid"></p-input-time>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-time name="time" label="Appointment time" state="error" message="Enter a valid appointment time."></p-input-time>
+```

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

@@ -81,6 +81,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-angular/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
+
+```html
+<p-input-url name="website" placeholder="https://"></p-input-url>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-url name="website" label="Website URL" description="Include https:// at the beginning."></p-input-url>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-url name="website" [hideLabel]="true"></p-input-url>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-url name="website" [hideLabel]="true" label="Website URL"></p-input-url>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-url name="website" label="Website URL" [aria-invalid]="true" message="Invalid"></p-input-url>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-url name="website" label="Website URL" state="error" message="Enter a valid URL, for example https://www.porsche.com."></p-input-url>
+```

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

@@ -80,6 +80,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-angular/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
+
+```html
+<p-input-week name="week" placeholder="Week"></p-input-week>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-week name="week" label="Calendar week" description="Select the week for your test drive."></p-input-week>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-week name="week" [hideLabel]="true"></p-input-week>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-week name="week" [hideLabel]="true" label="Calendar week"></p-input-week>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-week name="week" label="Calendar week" [aria-invalid]="true" message="Required"></p-input-week>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-week name="week" label="Calendar week" state="error" message="Select a calendar week to continue."></p-input-week>
+```

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

@@ -79,6 +79,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-angular/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
+
+```html
+<p-link href="https://porsche.com" aria-label="Details of product XYZ">
+  Details
+</p-link>
+```
+
+#### ✅ Recommended
+
+```html
+<p-link href="https://porsche.com" [aria]="{'aria-label': 'Details of product XYZ'}">
+  Details
+</p-link>
+```
+
+### Icon-only link without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-link icon="arrow-right" href="https://porsche.com"></p-link>
+```
+
+#### ✅ Recommended
+
+```html
+<p-link icon="arrow-right" [hideLabel]="true" href="https://porsche.com">
+  Product details
+</p-link>
+```
+
+### Indicating the current page
+
+#### ❌ Anti-pattern
+
+```html
+<p-link href="/models/911" aria-current="page">
+  911
+</p-link>
+```
+
+#### ✅ Recommended
+
+```html
+<p-link href="/models/911" [aria]="{'aria-current': 'page'}">
+  911 Carrera
+</p-link>
+```
+
+### Vague link label without context
+
+#### ❌ Anti-pattern
+
+```html
+<p-link href="https://porsche.com">
+  Show
+</p-link>
+```
+
+#### ✅ Recommended
+
+```html
+<p-link href="https://porsche.com" [aria]="{'aria-label': 'Show details of product XYZ'}">
+  Show details
+</p-link>
+```

package/{skill → skills/pds-knowledge-angular}/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

package/skills/pds-knowledge-angular/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
+
+```html
+<p-link-pure href="https://porsche.com" aria-label="Details of product XYZ">
+  Details
+</p-link-pure>
+```
+
+#### ✅ Recommended
+
+```html
+<p-link-pure href="https://porsche.com" [aria]="{'aria-label': 'Details of product XYZ'}">
+  Details
+</p-link-pure>
+```
+
+### Icon-only link without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-link-pure icon="arrow-right" href="https://porsche.com"></p-link-pure>
+```
+
+#### ✅ Recommended
+
+```html
+<p-link-pure icon="arrow-right" [hideLabel]="true" href="https://porsche.com">
+  Product details
+</p-link-pure>
+```
+
+### Indicating the current page
+
+#### ❌ Anti-pattern
+
+```html
+<p-link-pure href="/models/911" aria-current="page">
+  911
+</p-link-pure>
+```
+
+#### ✅ Recommended
+
+```html
+<p-link-pure href="/models/911" [aria]="{'aria-current': 'page'}">
+  911 Carrera
+</p-link-pure>
+```
+
+### Vague link label without context
+
+#### ❌ Anti-pattern
+
+```html
+<p-link-pure href="https://porsche.com">
+  Show
+</p-link-pure>
+```
+
+#### ✅ Recommended
+
+```html
+<p-link-pure href="https://porsche.com" [aria]="{'aria-label': 'Show details of product XYZ'}">
+  Show details
+</p-link-pure>
+```

package/{skill → skills/pds-knowledge-angular}/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

package/skills/pds-knowledge-angular/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
+
+```html
+<p-link-tile label="Details" href="#" aria-label="Details of Porsche Taycan"></p-link-tile>
+```
+
+#### ✅ Recommended
+
+```html
+<p-link-tile label="Details" href="#" [aria]="{'aria-label': 'Details of Porsche Taycan'}"></p-link-tile>
+```
+
+### Vague link label without context
+
+#### ❌ Anti-pattern
+
+```html
+<p-link-tile label="Details" href="#"></p-link-tile>
+```
+
+#### ✅ Recommended
+
+```html
+<p-link-tile label="Porsche Taycan details" href="#"></p-link-tile>
+```

package/{skill → skills/pds-knowledge-angular}/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