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

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

@@ -0,0 +1,45 @@
+# p-input-date accessibility integration examples
+
+## Integration examples
+
+### Placeholder used as the only label
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-date name="birthdate" placeholder="Date of birth"></p-input-date>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-date name="birthdate" label="Date of birth" description="Enter day, month, and year."></p-input-date>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-date name="birthdate" [hideLabel]="true"></p-input-date>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-date name="birthdate" [hideLabel]="true" label="Date of birth"></p-input-date>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-date name="birthdate" label="Date of birth" [aria-invalid]="true" message="Invalid"></p-input-date>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-date name="birthdate" label="Date of birth" state="error" message="Enter a valid date of birth."></p-input-date>
+```

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

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

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

@@ -0,0 +1,45 @@
+# p-input-month accessibility integration examples
+
+## Integration examples
+
+### Placeholder used as the only label
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-month name="month" placeholder="Month"></p-input-month>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-month name="month" label="Delivery month" description="Select the month for your delivery."></p-input-month>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-month name="month" [hideLabel]="true"></p-input-month>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-month name="month" [hideLabel]="true" label="Delivery month"></p-input-month>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-month name="month" label="Delivery month" [aria-invalid]="true" message="Required"></p-input-month>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-month name="month" label="Delivery month" state="error" message="Select a delivery month to continue."></p-input-month>
+```

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

@@ -0,0 +1,45 @@
+# p-input-number accessibility integration examples
+
+## Integration examples
+
+### Placeholder used as the only label
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-number name="speed" placeholder="Top speed" unit="kmh"></p-input-number>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-number name="speed" label="Top speed" unit="kmh" description="Enter the maximum speed in kilometers per hour."></p-input-number>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-number name="speed" [hideLabel]="true"></p-input-number>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-number name="speed" [hideLabel]="true" label="Top speed"></p-input-number>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```html
+<p-input-number name="speed" label="Top speed" [aria-invalid]="true" message="Invalid"></p-input-number>
+```
+
+#### ✅ Recommended
+
+```html
+<p-input-number name="speed" label="Top speed" unit="kmh" description="Enter the maximum speed in kilometers per hour." state="error" message="Enter a speed between 0 and 350 kilometers per hour."></p-input-number>
+```

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
@@ -109,15 +113,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. |
 | `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`). |
 | `step` | `number` | `1` | Sets the stepping granularity — the value must be a multiple of this number. Also controls step button increment size. |
-| `value` | `string | number | null` | `''` | Sets the current numeric value of the field. |
+| `value` | `string | number | null` | `''` | Sets the current numeric value. Strings and numbers are accepted for programmatic assignment, but user input updates the value as a string to mirror native input behavior. |
 
 ### Events
 
 | Event | Type | Description |
 | --- | --- | --- |
 | `blur` | `CustomEvent<InputNumberBlurEventDetail>`<br>`Event` | Emitted when the number input has lost focus. |
-| `change` | `CustomEvent<InputNumberChangeEventDetail>`<br>`Event` | Emitted when the number input loses focus after its value was changed. |
-| `input` | `CustomEvent<InputNumberInputEventDetail>`<br>`InputEvent` | Emitted when the value has been changed as a direct result of a user action. |
+| `change` | `CustomEvent<InputNumberChangeEventDetail>`<br>`Event` | Emitted when the number input loses focus after its value was changed. The component value and native event target value are strings after user input. |
+| `input` | `CustomEvent<InputNumberInputEventDetail>`<br>`InputEvent` | Emitted when the value has been changed as a direct result of a user action. The component value and native event target value are strings. |
 
 ### Slots
 

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
@@ -108,15 +112,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-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>
+```