Skip to content

Alert title is forcing a h4 tag even if a h4 isn't appropriate in context #6444

@kdoberst

Description

@kdoberst

Describe the issue. What is the expected and unexpected behavior?
When I use the Alert component, the text entered at the title prop is rendered inside an h4 tag. This may not be the appropriate heading or a heading may not be appropriate for the content.

For example, if my page looks like this:

<h2>My header</h2>
content 
ALERT GOES HERE

I would need the alert to render an h3 as the title with the child content below.

In other cases, as in the inline alert with no children elements. The content in the title attribute isn't a header at all, in that it doesn't describe the content below it.

See WCAG 2.1 1.3.1 and 2.4.6

Expected
I expect that I can override the default h4 tag with another tag that may be more appropriate in the context the alert is being used.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.
You can view this behavior on the Alert demo page

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
I would call this a bug because it can lead to accessibility issues. The current workaround is not to use the Alert component and use custom code.

What is your product and what release version are you targeting?
OpenShift 4.10

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions