diff --git a/packages/components/src/components/post-card-control/post-card-control.tsx b/packages/components/src/components/post-card-control/post-card-control.tsx index 36ebcae76e..024df1c94c 100644 --- a/packages/components/src/components/post-card-control/post-card-control.tsx +++ b/packages/components/src/components/post-card-control/post-card-control.tsx @@ -26,7 +26,7 @@ let cardControlIds = 0; /** * @class PostCardControl - representing a stencil component * - * @slot default - Content to place into the `default` slot.

Markup accepted: block content.

Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable. This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured. More info: https://accessibilityinsights.io/info-examples/web/nested-interactive/

+ * @slot default - Content to place into the `default` slot.

Markup accepted: block content.

Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.
This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.
More info: https://accessibilityinsights.io/info-examples/web/nested-interactive/

* @slot icon - To insert a custom icon into the named `icon` slot.

Markup accepted: inline content.

It is only meant for img or svg elements and overrides the `icon` property.

*/ @Component({ diff --git a/packages/components/src/components/post-card-control/readme.md b/packages/components/src/components/post-card-control/readme.md index 17d9e3a833..ba8708d175 100644 --- a/packages/components/src/components/post-card-control/readme.md +++ b/packages/components/src/components/post-card-control/readme.md @@ -54,10 +54,10 @@ Type: `Promise` ## Slots -| Slot | Description | -| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `"default"` | Content to place into the `default` slot.

Markup accepted: block content.

Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.

| -| `"icon"` | To insert a custom icon into the named `icon` slot.

Markup accepted: inline content.

It is only meant for img or svg elements and overrides the `icon` property.

| +| Slot | Description | +| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `"default"` | Content to place into the `default` slot.

Markup accepted: block content.

Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.
This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.
More info: https://accessibilityinsights.io/info-examples/web/nested-interactive/

| +| `"icon"` | To insert a custom icon into the named `icon` slot.

Markup accepted: inline content.

It is only meant for img or svg elements and overrides the `icon` property.

| ## Dependencies diff --git a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx index 63dcd96a30..f6b75fa922 100644 --- a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx +++ b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx @@ -39,7 +39,10 @@ If this is not enough, you can also use the named `icon` slot and add your very If you need to add other content to the component, you can use the default slot to do so. -
Even if it is generally possible, we do not recommend using interactive elements in this slot.

Valid markup: block content.

Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable. This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured. More info: https://accessibilityinsights.io/info-examples/web/nested-interactive/

+
+

Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.

+

This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured. More info: https://accessibilityinsights.io/info-examples/web/nested-interactive/

+