Skip to content

PF4 Alert: React does not recognize the variantLabel prop on a DOM element. #3730

@Hyperkid123

Description

@Hyperkid123

Using the Alert component injects variantLabel prop to the alert action. This prop is only accepted by the AlertActionCloseButton and other AlerAction components.

There are two possible solutions to this

  1. Stop enforcing AlertActionCloseButton (and others) to be used as the action component by stopping cloning the action and injection of additional props. Let the consumers take care of accessibility. This would be a preferred option IMO because we can actually use component composition.
  2. Instead of using type node for the actions, make the action a render function and pass these additional props as a innerProps or something. Then the dev could take these accessibility props and apply them correctly.
  3. Remove the action prop from the alert and replace it by onClose (and others for other alert action components) prop. The only accepted components are AlertAction*. Customization of the action is pointless and we only need the actions.

Line of code responsible: https://github.com/patternfly/patternfly-react/blob/master/packages/patternfly-4/react-core/src/components/Alert/Alert.tsx#L85

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions