Remove Paragraph Tag from Alert Body

Bug Report

Description

Currently the terra-alert module wraps the body of the alert in a <p> tag. This proves problematic if a consumer uses HTML elements (which the docs state is valid input) in body of the alert as the react DOM validator outputs a warning. I have a attached a screenshot of the warning from the console below.

Steps to Reproduce

1. Create a Terra Alert in a test site.
2. Place a <div> element (or a Terra element that uses a <div> inside the alert as a child element.
3. Observe the warning in the console.

Additional Context / Screenshots

Expected Behavior

I would expect that when I use HTML elements (besides a <span>, for some reason it does not complain about a <span> tag) or other Terra elements that use divs under the hood to not print an error.

Possible Solution

Change the Terra Alert component to use a <div> for the body instead of a <p> tag.

Environment

• Component Name and Version: terra-alert 2.33.0
• Browser Name and Version: Google Chrome 70.0.3538.110
• Node/npm Version: Node 8.4 npm 5.3
• Webpack Version: 4
• Operating System and version (desktop or mobile): macOS desktop

@ Mentions

@tbiethman

[JakeLaCombe]

@gabeparra01 you are welcome to contribute this! It would be appreciated!

[JakeLaCombe]

I did a screen reader test with Jaws and Voiceover using a div instead of a paragraph. We wanted to make sure that the title and message read as a seamless statement to browsers, and it used to break on the title with a pause before reading the alert. It must have been a style change, not a markup that changed that, so I would be okay with using a div instead of a p for alert. I do see this as a valid case for an alert banner, but I would like to double check with our designer.