[EuiConfirmModal] Title should be wrapped in an HTML heading if provided as a string

[1Copenut]

Steps to reproduce

1. Open Kibana instance
2. Open a modal like the screenshots below
3. Evaluate with Dev Tools and verify there is text that is styled like a heading, but is semantically a simple DIV

---

---

Actual Result

• The modals have heading text that has a visual hierarchy that does not match its semantic hierarchy. Text that looks like a heading must be marked up as a heading to convey that importance to all users.

Expected Result

• Text keeps the current styling, but is marked up as an H2

Kibana Version:
v8.0.0

OS:
MacOS Big Sur

Browser:
Chrome

Relevant WCAG Criteria: Understanding Success Criterion 1.3.1: Info and Relationships - Level A

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)

[elasticmachine]

Pinging @elastic/kibana-design (Team:Kibana-Design)

[kertal]

This can't be changed in Kibana , it should be moved to EUI

[1Copenut]

Thanks for the followup @kertal. I moved this to EUI and have re-tagged it.

[cchaos]

@1Copenut The EuiModal component doesn't create the heading level directly. All of our docs examples shows wrapping the title text in an <h1> like so:

<EuiModalHeaderTitle>
  <h1>Modal title</h1>
</EuiModalHeaderTitle>

The statement that was made:

This can't be changed in Kibana , it should be moved to EUI

Is actually false, as all they need to do is wrap their title text in a HTML heading.

[cchaos]

If we need to, in the EUI docs, we can add a strong callout identifying this aspect. But it would be a truly harsh update to those who were copying the examples properly to have to unwrap all their text.

[cchaos]

I spoke somewhat too harshly too soon, it does look like our EuiConfirmModal specifically doesn't wrap the title if it's simply provided as a string. I've updated the title of the issue to reflect this.

[1Copenut]

@kertal I wanted to follow up on this issue. I made a change to our EUI component to wrap strings in an H1, but I'm still seeing DIV containers in Kibana 8 on the main branch locally. If consumers are passing in a legitimate React element, the component will not override it with a heading. Is there additional action Kibana teams can make, or does this issue have a longer tail than we first thought?

[cee-chen]

I made a change to our EUI component to wrap strings in an H1, but I'm still seeing DIV containers in Kibana 8 on the main branch locally

@1Copenut your fix isn't yet in Kibana - the upgrade PR is still open (elastic/kibana#122386). I would wait until that PR lands to check the main branch, or check that branch directly

[1Copenut]

Thank you @constancecchen